Passer au contenu

10 sites français qui ont déjà adopté le responsive design

Maintenant que les spécifications du HTML 5 sont finalisées, les développeurs n’ont plus de prétexte pour utiliser l’HTML 5 et le CSS 3 dans leurs sites et applications. J’ai choisi de présenter dans cet article quelques sites français qui utilisent au mieux le responsive design — à apprécier en réduisant progressivement la fenêtre de votre navigateur.

À l’heure où les appareils qui se connectent à Internet sont de plus en plus nombreux et les résolutions d’écran quasiment toutes différentes, les éditeurs doivent aujourd’hui adapter leurs sites web à tous les supports…

Le responsive web design (RWD) est une notion relativement récente qui consiste à adapter un site à toutes les résolutions (ou presque) en utilisant les media queries. Oubliez les versions spécifiques pour les smartphones et les tablettes, cette fonction en CSS 3 permet de cibler la largeur, la hauteur ou encore l’orientation d’une page dans une seule et unique feuille de style et donc de satisfaire tout le monde.

Maintenant que les spécifications du HTML 5 sont finalisées, les développeurs n’ont plus de prétexte pour utiliser l’HTML 5 et le CSS 3 dans leurs sites et applications. J’ai choisi de présenter dans cet article quelques sites français qui utilisent au mieux le responsive design — à apprécier en réduisant progressivement la fenêtre de votre navigateur.

ZDNet

ZDNet, le site spécialisé dans les nouvelles technologies que l’on ne présente plus, est parfaitement adapté à toutes les résolutions d’écran. La version la plus large contient une masse d’informations avec entre autres les news, les blogs ou encore les débats, mais les versions plus réduites sont aussi efficaces et synthétiques : les informations principales sont accessibles. Le tout dans un design propre et efficace, et ce, quelle que soit la résolution.

Gamekult

Dans le même genre mais axé sur les jeux vidéo, Gamekult est aussi un bon exemple qui utilise très bien le responsive design. En effet, le site complet passe à un site simplifié pour devenir finalement un site mobile en réduisant petit à petit la fenêtre de son navigateur. Et la version la plus réduite ressemble n’a rien à envier à une version mobile classique car elle est plus jolie et s’adapte aux résolutions des smartphones et des tablettes.

Microsoft

J’ignorai complètement que le site officiel de Microsoft utilisait les media queries, et pourtant ce n’est pas très étonnant tant la firme fait la promotion du HTML 5 et CSS 3, notamment pour les dernières versions de son navigateur. Le site est extensible et n’a pas vraiment de largeur fixe donc il s’ajuste à toutes les résolutions, les plus grandes comme les plus petites.

SUP’Internet

SUP’Internet, l’école supérieure des métiers de l’Internet, possède logiquement un site web qui utilise les dernières technologies de pointe. L’utilisation du responsive design n’est certes pas aussi poussée que sur les sites précédents mais reste toutefois intéressante. Cela dit, le site est tout à fait accessible sur les téléphones portables.

L’Élysée

À l’instar du site officiel de Barack Obama, la nouvelle version du site gouvernemental de l’Élysée qui a été lancée il y a peu est disponible dans de nombreuses résolutions. Chacun est libre de consulter l’agenda ou les déclarations du Président de la République sans se soucier de son système d’exploitation ou sa résolution d’écran, les informations étant facilement accessibles.

Cabinet Guerin

Cet exemple est moins classique mais tout aussi intéressant : Loïc Guerin, un avocat à la Cour possède un site web adaptatif disponible en trois langues particulièrement réussi. Il est très réussi et adapté à toutes les résolutions, même si les plus petites possèdent un design simplifié qui est largement suffisant. Une vitrine idéale pour promouvoir ses services et son parcours.

Tonnellerie Cavin

Dans un autre genre, la Tonnellerie Cavin est un bon exemple avec son site en noir et blanc et en trois langues. Cette vitrine, simple mais redoutablement efficace sur toutes les résolutions, regroupe les actualités, références, produits, vidéos et photos de cette maison située en plein coeur de la Bourgogne.

Evalbox

Evalbox est une solution qui permet de gérer de tests en ligne pour que les recruteurs puissent évaluer les candidats potentiels. À l’image des sites précédents, ce site s’adapte en toute simplicité à n’importe quelle résolution et le carrousel de la page d’accueil n’échappe pas à ce redimensionnement progressif.

Peace & Wool

Peace & Wool est un site e-commerce pour le moins original car il propose à ses client(e)s des vêtements et accessoires à tricoter ou faire soi-même. Le design est tout aussi original avec les visuels qui ressemblent plus à des photos Instagram qu’à des photos de produits plus classiques. La mise en page de ce site est évidemment flexible et donc convient même sur les plus petits supports.

Photoreview

Place à une revue du web consacrée exclusivement au monde de la photo, Photoreview. Ce site qui reprend un peu le style de Pinterest adapte sa mise en page en fonction de la taille de la fenêtre du navigateur afin de proposer une expérience optimale à tous les passionnés de photographie. L’animation lors que les blocs se réajustent est un petit plus appréciable.

N’hésitez pas à compléter cet article en proposant d’autres sites français qui utilisent le responsive design. Cette liste est en effet loin d’être exhaustive mais a le mérite de regrouper tout type de sites.

📍 Pour ne manquer aucune actualité de Presse-citron, suivez-nous sur Google Actualités et WhatsApp.

Opera One - Navigateur web boosté à l’IA
Opera One - Navigateur web boosté à l’IA
Par : Opera
38 commentaires
38 commentaires
  1. Le responsive design est vraiment quelque chose de plus en plus important.
    Vu le nombre de plate forme ou de support pour aller sur un site web, ne pas rendre son site “responsive” reviendrai à vouloir se passer de certaines sources de traffic.

    Bon article

  2. Et dans une quinzaine de jours la v2 de Dino&Dino (the original italian socks) sera aussi en responsive design ! Phase de test en cours avant la mise en ligne, à suivre !

  3. J’ai du mal à saisir l’intérêt d’un tel article. Des milliers de sites y font appel et depuis bien longtemps, avant ceux mentionnés ici (promo déguisée ?).
    Cela n’a par ailleurs rien à voir avec les récentes actualités sur HTML5 puisque c’est un pur produit CSS et que l’on dépend entièrement des navigateurs.

    1. @Gib : les sites sont certes nombreux à utiliser cette technique mais combien sont français ? Le but de cet article est simplement de (re)montrer les possibilités du responsive design en citant des sites plus ou moins visités.

      Et le rapport avec les récentes actualités sur HTML 5, c’est que l’on utilise généralement HTML 5 et CSS 3 ensemble. Enfin, c’est mon avis de développeur.

  4. Côté culture :
    – le festival de l’Histoire de l’art : http://festivaldelhistoiredelart.com/
    – Les Abattoirs (Toulouse) : http://www.lesabattoirs.org/
    – le Mac Val : http://www.macval.fr/
    – le Guggenheim Bilbao : http://www.guggenheim-bilbao.es/
    – l’exposition “Picasso Black & White” au Guggenheim New York : http://web.guggenheim.org/exhibitions/picasso/

    Voir aussi le dispositif proposé par Geoffrey Dorne et Julien Dorra, la Responsive Museum Week : http://responsivemuseum.com/fr/index.html.

  5. De l’avantage de faire des bêtises, 2 semaines avant que le fest-noz ne soit inscrit à l’UNESCO, j’ai détruit par mégarde la base de données de mon site sur ces manifestations !
    Devant le reconstituer dans l’urgence, j’ai produit ceci http://fest-noz.jluk.fr/ plus un second plus minimaliste.
    Après quelques recherches, je suis revenu aux thèmes de Graph Paper Press qui me conviennent très bien pour des photos. Il en existe beaucoup d’autres ailleurs, mais il faut tester en réduisant fortement la largeur des navigateurs.

  6. Question dans la lignée du sujet : est-ce que les templates WordPress 3.5 premium dit ‘responsive’ sont équivalents en termes de qualité / responsive design ? Ou y-a-t-il des points spécifiques à prendre en compte ? Merci !

  7. http://www.lesnumeriques.com

    Par contre le responsive design c’est bien, mais c’est lourd….. à charger sur un téléphone par exemple…

    tous les éléments de la page se chargent, même ceux non affichés, et faut souvent attendre que tout soit chargé pour pouvoir faire quelque chose… (le temps que tous les scripts se chargent par exemple…)

  8. le cabinet guerint est manifique!, puis on rentre dans HONORAIRE, et en savoir plus, et la, comme tout avocat qui ce respect, le css a pris des vacances et on ce retrouve avec du illisible ^^
    ahh les avocats. . .

  9. Les specs du Html5 sont peut-etre “finalisés” mais c’est seulement les specs pour les browsers.
    Faut-il encore que les browsers les implementes et surtout se mettent en accord sur les normes.
    Beaucoup de propriété CSS3 ont besoin d’un prefixe par browser et autre cas par cas.

    Sinon le CSS3 est dispo depuis longtemps, c’est un peu dommage que ces sites aient mis si longtemps à s’adapter

  10. Salut,

    Connaissez-vous des bonnes agences ou particuliers PRO pour une refonte de site internet qui réponde a la Tech Responsive Design ?

    Merci d’avance

  11. Pour le moment cette technique est très lourde en terme de temps de chargement sur un mobile car on rajoute plusieurs couches de CSS, il me semble qu’il existe d’ailleurs un autre système d’amélioration progressive qui fonctionne parpalier de résolution.

  12. Je n’aurais pas parlé de résolution, mais plutôt de format. Les résolutions c’est standard ou Retina, et là, il y a encore du boulot …

  13. Biz, je ne vois pas en quoi cette technique serait lourde si la mise en page est faite proprement. Il s’agit simplement de respecter les standards, de produire des box avec des tailles maximales et des dimensions en pourcentage.
    Au contraire, ces sites sont plus légers et pour une fois, je peux consulter Internet sur mon BlackBerry, tâche quasi impossible autrement.

  14. Juste une petite faute : “les développeurs n’ont plus de prétexte pour utiliser l’HTML 5 et le CSS 3 dans leurs sites et applications”.
    À changer par : “les développeurs n’ont plus de prétexte pour ne pas utiliser l’HTML 5 et le CSS 3 dans leurs sites et applications”.

  15. @Eric : j’ai noté l’erreur aussi, maintenant il n’y a plus que recoder tous nos CSS, plus facile à dire qu’à faire 😉
    En tout cas c’est bluffant.

  16. Je pense aussi que tout développer en Responsive ne serait pas un bon choix. D’accord pour les tablettes, mais certains sites perdent en ergonomie dès qu’il s’agit de les visualiser sur mobile. Une version dédiée serait plus appropriée.

    Mais ce n’était pas Bougues qui avait déjà développé une version HTML pour mobiles, et ce bien avant l’heure ?

  17. Le site de Microsoft est particulièrement réussi, l’utilisation d’un responsive design est très efficace dans ce cas-là mais de façon général on perd non seulement en temps de chargement mais aussi en intuitivité dans beaucoup de cas en utilisant des responsive design.

  18. Le rendu du site de Grazia est vraiment impressionnant, on voit toute la puissance du responsive design mais je doute qu’une généralisation du responsive design puisse avoir lieu dans la mesure où les utilisateurs mobile sont très largement handicapés en termes de temps de chargement et de qualité d’affichage.

  19. pas d’accord avec elysee.fr – adaptation au mobile et tablette oui, responsive non ! il manque plein d’éléments du design initial du site web

  20. Je pense que les sites réduiraient leurs coût s’ils développaient des versions responsives design plutôt qu’une version mobile + version Tablette et version I-phone.

    Sinon, un autre site sympa en responsive design : pricemetry.com. Outil d’aide à l’achat en line.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *