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

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.

Invité
31 décembre 2012

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

Invité
31 décembre 2012

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

Invité
31 décembre 2012

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 !

Invité
31 décembre 2012

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

Invité
31 décembre 2012

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/0.....daptative/

Invité
Glop75
31 décembre 2012

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

Invité
pablo
31 décembre 2012
Eric
Admin
31 décembre 2012

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

Invité
Gib
31 décembre 2012

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.

Invité
31 décembre 2012

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

Invité
31 décembre 2012

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.

 
Lire les articles précédents :
Les dernières offres d’emploi du web

La sélection des dernières offres d’emploi du web de Presse-citron Jobs, en partenariat avec Remix jobs. Développeur php - H/F...

Fermer