Suivez-nous

Internet

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.

Il y a

le

À 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

mediaqueries-top-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.

38 Commentaires

38 Commentaires

  1. Réparation iPhone Lille

    31 décembre 2012 at 10 h 32 min

    Je pense qu’il aurait fallu aussi noter le site de TopAchat qui est plutôt réussi 🙂

  2. casque moto

    31 décembre 2012 at 10 h 50 min

    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

  3. Dino

    31 décembre 2012 at 10 h 50 min

    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 !

  4. Julien des Jolis Coqs

    31 décembre 2012 at 10 h 59 min

    Je vous propose également le site de cette agence web : http://www.addonline.fr tout fraîchement mis à jour

  5. Thibaut

    31 décembre 2012 at 11 h 04 min

    Même si le responsive design est conseillé assez souvent, ce n’est pas toujours la meilleure solution. Ou du moins, il peut être couplé avec des sites optimisés spécifiquement pour un support.

    Quelques infos supplémentaires : http://blog.orealys.com/2012/06/responsive-design-conception-adaptative/

  6. Glop75

    31 décembre 2012 at 11 h 10 min

    Grazia : http://www.grazia.fr/ est un bon exemple de site média qui est en responsive design depuis l’année dernière.

  7. pablo

    31 décembre 2012 at 11 h 14 min

  8. Eric

    31 décembre 2012 at 11 h 26 min

    On peut aussi ajouter ApplisPro, le (futur) petit dernier de Presse-citron http://www.applispro.com/ Pas encore fini mais ne devrait pas tarder 🙂

  9. Gib

    31 décembre 2012 at 11 h 27 min

    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.

    • Camille

      31 décembre 2012 at 11 h 50 min

      @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.

  10. Sébastien Magro

    31 décembre 2012 at 11 h 36 min

    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.

  11. Michel

    31 décembre 2012 at 11 h 43 min

    Toujours la problématique appli ou site mobile …. 1euro.com
    Le truc complexe c’est le tracking et le retournement de tablette…

  12. Jean-LuK

    31 décembre 2012 at 11 h 55 min

    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.

  13. Eric

    31 décembre 2012 at 12 h 15 min

    @Gib : quelle « promo déguisée » ? Si vous suiviez un peu vous auriez vu que Camille a lancé il y a quelques jours un appel sur Twitter pour préparer son sujet https://twitter.com/nephthys/status/284239683024719873
    Moi c’est votre commentaire dont j’ai du mal à saisir l’intérêt

  14. Xavier

    31 décembre 2012 at 14 h 08 min

    Ca commence à arriver dans le web Français et ça fait plaisir!
    Il y a aussi le site http://www.agendaculturel.fr qui vient de sortir sa version responsive!

  15. MAD

    31 décembre 2012 at 15 h 15 min

    Bonjour,
    Avec ce site vous pourrez vérifier si un site utilise le responsive ou pas : http://mattkersley.com/responsive/

  16. Olivier888

    31 décembre 2012 at 16 h 19 min

    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 !

  17. toto

    31 décembre 2012 at 16 h 21 min

    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…)

    • Camille

      31 décembre 2012 at 20 h 11 min

      @toto : c’est effectivement un des inconvénients du responsive design, à chacun de peser le pour et le contre. 😉

  18. adel

    31 décembre 2012 at 17 h 29 min

    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. . .

  19. Annuaire RP Naruto

    31 décembre 2012 at 17 h 33 min

    Quoi ?! Je suis pas dans la liste ?! o.O

    Bon, je sors…

  20. Suricat

    31 décembre 2012 at 19 h 02 min

    Même à tout petit moyen, on arrive à faire de choses simples : http://www.magali-segura.fr/

  21. Laurent Denis

    31 décembre 2012 at 22 h 46 min

    2 « petits sites amateurs » réalisés tout simplement avec Rapidweaver (outil de création web sous OSX) et le thème « Boréal » de Nick Cates Design.
    http://www.gazelles-des-sancerre.com
    http://www.cosmictripfestival.fr

  22. Sway

    1 janvier 2013 at 2 h 23 min

    http://www.skodamag.fr

    Attention à la limite entre responsive et adaptative

  23. Mattt07

    1 janvier 2013 at 11 h 13 min

    Moyennement fan du responsive car trop « lourd » sur mobiles…

  24. micky2be

    1 janvier 2013 at 11 h 53 min

    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

  25. Eric

    1 janvier 2013 at 14 h 09 min

    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

  26. biz

    1 janvier 2013 at 21 h 01 min

    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.

  27. Wolf™

    1 janvier 2013 at 21 h 41 min

    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 …

  28. Kanpai (voyage au Japon)

    2 janvier 2013 at 9 h 29 min

    On peut aussi rajouter Kanpai http://www.kanpai.fr et sa communauté de voyageurs au Japon 😉

  29. Jean-LuK

    2 janvier 2013 at 10 h 00 min

    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.

  30. Eric

    2 janvier 2013 at 11 h 35 min

    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 ».

  31. business intelligence

    2 janvier 2013 at 14 h 34 min

    @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.

  32. Francois

    3 janvier 2013 at 8 h 38 min

    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 ?

  33. Gérard Cave

    5 janvier 2013 at 14 h 09 min

    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.

  34. Jacques

    5 janvier 2013 at 14 h 19 min

    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.

  35. lau

    7 janvier 2013 at 17 h 51 min

    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

  36. Thibault

    8 janvier 2013 at 15 h 35 min

    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 de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Dernières news

Les bons plans

Les tests