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

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

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

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

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

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

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

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

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

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

À 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

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

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

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

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

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

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

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

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

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

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.