À 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.
Je pense qu’il aurait fallu aussi noter le site de TopAchat qui est plutôt réussi 🙂
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
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 !
Je vous propose également le site de cette agence web : http://www.addonline.fr tout fraîchement mis à jour
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/
Grazia : http://www.grazia.fr/ est un bon exemple de site média qui est en responsive design depuis l’année dernière.
http://www.nealite.fr
On peut aussi ajouter ApplisPro, le (futur) petit dernier de Presse-citron http://www.applispro.com/ Pas encore fini mais ne devrait pas tarder 🙂
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.
@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.
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.
Toujours la problématique appli ou site mobile …. 1euro.com
Le truc complexe c’est le tracking et le retournement de tablette…
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.
@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
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!
Bonjour,
Avec ce site vous pourrez vérifier si un site utilise le responsive ou pas : http://mattkersley.com/responsive/
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 !
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…)
@toto : c’est effectivement un des inconvénients du responsive design, à chacun de peser le pour et le contre. 😉
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. . .
Quoi ?! Je suis pas dans la liste ?! o.O
Bon, je sors…
Même à tout petit moyen, on arrive à faire de choses simples : http://www.magali-segura.fr/
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
http://www.skodamag.fr
Attention à la limite entre responsive et adaptative
Moyennement fan du responsive car trop “lourd” sur mobiles…
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
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
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.
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 …
On peut aussi rajouter Kanpai http://www.kanpai.fr et sa communauté de voyageurs au Japon 😉
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.
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”.
@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.
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 ?
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.
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.
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
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.