Responsive web design: un webdesign adaptatif

Le 12 août 2011 dans Webdesign | 4 Comments

Si il y a bien quelque chose que l’on peut considérer de « Next Big Thing » sur le net, c’est bien le responsive web design. Vous en avez peut-être entendu parler, ou peut être que vous avez déjà lu l’excellent « Responsive Web Design » de Ethan Marcotte.

Voici ici un rapide topo de ce qui est la tendance à la mode sur le web et incontestablement l’avenir du webdesign!

Un design pour les gouverner tous

Les résolutions d’écran ont toujours été un souci pour le webdesign. Il y a bien des années on voyait des annonces du genre « site optimisé pour un écran de 800px par 600px. Ensuite les standards ont grandi avec les écrans, 960px puis 1200px. Mais en même temps, les smartphones et les tablettes nous ont pondu des résolutions plus fines: 320px de large pour l’iPhone .

Je prend mon cas, à la maison j’ai un écran 24 pouces, en déplacement j’utilise celui de mon MacBook 13′, depuis mon canapé j’ai mon iPad et dans le bus mon iPhone… 4 machines avec des tailles et des contraintes (souris/doigt) radicalement différentes.

A ce stade, on ne peut plus simplement prendre une taille standard puisqu’il n’existe justement plus de standards…

Réaliser un design pour chacune: impossible?! Oui mais non.

Les design fluides utilisant des tailles en pourcentages ne sont pas nouveaux, au contraire, ce sont des dinosaures du web. S’ils sont parfaits pour s’adapter entre un écran 15′ ou 17′, ils ont un peu plus de mal à gérer un iPhone et leur lisibilité devient complexe si on les étale tout le long d’un écran 27′.

C’est là que le concept du « Responsive Webdesign » s’applique:

Servir à chaque appareil le design qui lui est le plus adapté.

Et pour se faire, notre outil sera les CSS: les Media Queries. Les Media Queries n’ont rien de neuf sur le web. On les utilisait déjà pour créer des feuilles de style spécifiques à l’impression d’une page web.

Maintenant c’est exactement le même concept sauf qu’au lieu de préciser « print » ou « screen », on peut spécifier une multitude d’éléments. Entre autres: le nombre de couleurs de l’écran, l’orientation (portrait ou paysage, bien pratique pour les mobiles) et bien entendu, la largeur de la fenêtre!

En termes de technique, dans notre CSS ça n’est pas plus compliqué que ça:

#header
{ width: 280px;
background-color: red;}

@media screen and (max-width: 800px) {

#header
{ width: 140px;}

}

Ici je définis la largeur et la couleur de mon header: un fond rouge et 280 pixels de large. Ensuite je décris tout bêtement que si ma page fait moins de 800 pixels de large, le header ne doit faire que 140px de large. Les styles en cascade permettent de modifier uniquement les éléments que l’on souhaite. Dans ce cas, j’ai changé la largeur de mon header mais il restera rouge.

Ça n’est pas plus compliqué que ça!

Vous avez maintenant tout ce qu’il vous faut (ou presque)! Ça n’est pas plus complexe que de définir la taille de l’écran et de changer/ajouter ce que l’on souhaite pour adapter son site comme on le souhaite. Par exemple, on peut donc définir l’affichage su site de cette manière:

  • Sur un très grand écran: deux sidebar, une page très large.
  • Sur un plus petit: une seule sidebar et un site plus étroit.
  • Sur un format tablette: une navigation plus adaptée au tactile.
  • Sur le format mobile: une vraie mise en page mobile étroite et une navigation adaptée.

En utilisant un design fluide (c’est à dire en spécifiant des pourcentages au lieu de dimensions en pixels précis) on peut donc arriver à un site qui s’adapte parfaitement à n’importe quelle taille d’écran. Un vrai site adaptatif dans les règles de l’art et le respect des standards CSS3. A vous de jouer désormais!

Un peu de pratique

Rien de tel que quelques images pour se faire une idée du fonctionnement du concept. Je vais utiliser des captures de l’excellent site Mediaqueri.es qui fait une galerie des meilleurs sites adaptatifs du moment. N’hésitez pas non plus à visiter les sites et redimensionner la fenêtre de votre browser pour voir le résultat.

New Adventure Conf

Ici le site est surtout composé d’un design fluide mais on remarque aussi que la taille des textes s’adapte à la taille de la fenêtre. Et arrivé à une certaine limite, on passe à un design purement mobile.

Forefathers

Le design s’adapte réellement en fonction de l’espace disponible. Le designer a choisi de repositionner les différents éléments en fonction de l’espace disponible. On est face à un vrai design adaptatif avec des media queries et une grille fluide.

D’autres exemples sur Mediaqueri.es

Un peu de lecture…

Ici je n’ai pas la prétention de vous apprendre le webdesign adaptatif mais seulement de vous le présenter. Si vous voulez en savoir plus et vous lancer voici quelques excellentes bases:

Responsive Web Design (en anglais) de Ethan Marcotte
Bien écrit, vite lu et disponible aussi bien en Ebook qu’en version papier. (la version Epub contient des vidéos, un vrai livre interactif sur iPad) C’est un must-read absolu pour toute personne qui se considère comme webdesigner!

Les Media Queries chez Alsacreations
Si vous faites du web et que vous êtes francophone, il n’est certainement pas nécessaire de présenter Alsacreations. Leur article est très complet et très détaillé si vous souhaitez commencer à mettre les mains dans le cambouis.

Les recommendations W3C sur les Media Queries
Un peu indigeste, mais ça a le mérite d’être exhaustif!

Mediaqueri.es
Une belle galerie de sites adaptatifs.

A vous de jouer!

En ce qui me concerne, j’ai commencé à utiliser les Media Queries pour mon blog Tecchan mais pour le moment il ne gère que deux tailles d’écrans (large et étroit). Il va de soit qu’à l’avenir j’aimerais le rendre complêtement adaptatif, de même pour mon portfolio.

N’hésitez pas à faire part de vos expériences ou à partager des sites qui vous plaisent!

PS: merci à @Twenster et aux gens du #wdfr pour m’avoir aidé à trouver une bonne traduction française au terme « Responsive Web Design ».

EDIT 11 octobre 2011: une version revue et améliorée est paru sur le blog de Enigma. J’ai remplacé la partie technique par une étude plus poussée sur les avantages stratégiques de ce concept. Jetez y un œil!

Loris Grillet

Graphiste et Web Designer basé à Genève. Maniaque de typographie, geek et amoureux des pixels comme du papier. Quand je ne travaille pas sur de nouveaux projets, je Tweete, partage mes projets sur Dribbble et explore le monde…

  • http://nicolasbouliane.com Nicolas Bouliane, Granby

    C’est une très bonne idée d’y aller avec de tels designs, mais en même temps, les navigateur mobiles doivent charger le site en entier, et ça peut prendre du temps!

    Reste que c’est très attirant si le public le justifie (à 30 clics par jour, on oublie ça!)

    • http://www.loriskumo.com Loris

      Je vois ton souci et tu as raison. Pour éviter d’infliger ceci aux mobiles il suffit de construire ton site dans l’autre sens: partir du mobile pour aller vers le bureau.
      Voici un lien qui pourrait t’intéresser: http://stuffandnonsense.co.uk/projects/320andup/

  • http://www.loriskumo.com Loris

    Une version revue et améliorée est paru sur le blog de Enigma. J’ai remplacé la partie technique par une étude plus poussée sur les avantages stratégiques de ce concept. Jetez y un œil!

    http://enigmaprod.ch/blog/responsive-web-design-un-webdesign-adaptatif/

  • http://www.tchokos.net Nicolas ROSSI

    Il est possible d’afficher une image plus légère pour les petites tailles d’écrans, en jouant avec les media queries et display:none, ou, en modifiant le lien de l’image vers une plus petite si elle est en arrière plan.

    Un autre exemple de site responsive design <360<640 : http://www.sitadapt.com