Webdesign Friday (#wdfr) - La communauté des webdesigners francophones

Les vendredis Webdesign !Chaque semaine, un nouvel article par un professionnel du Web.

S02E01 : Responsive Web Design

S02E01 : Responsive Web Design

Vendredi 2 septembre 2011.

13h, le WDFR saison 2 débute, la foule est en délire. Pendant ce temps Francis explique comment vont se dérouler les sessions WDFR de cette nouvelle année “scolaire” et rappelle la marche à suivre pour participer au tweet-up (pour les nouveaux surtout, parce que nous on sait comment ça se danse :D).

Cette saison, le WDFR c’est tout les premiers vendredi du mois.

Qu’est-ce que le Responsive Web Design ?

13h05, interro surprise :

“@wdfriday : Aujourd’hui donc, nous allons parler Responsive Web Design. Déjà, est-ce que quelqu’un n’a AUCUNE idée de ce que ça peut bien être ?”

La question aurait pû paraître bête et inutile, mais le fait est que cette technique du Responsive Web design (RWD en abrégé ; Webdesign adaptatif en français moche) reste encore un peu obscure, et est souvent confondu avec le Webdesign “fluide” ou “élastique”, sur lequel s’appuie un peu le RWD, mais pas que.

Le RWD, contrairement au web design élastique, n’adapte pas seulement la largeur de la zone de contenu mais permet généralement, grâce à diverses techniques, d’adapter à la fois :

  • la taille des textes,
  • la taille des images,
  • la taille des vidéos et diaporamas (le cas échéant),
  • et bien sûr la largeur du conteneur

Et tout ceci, suivant la taille de la fenêtre du navigateur.

Pour faire simple

Design fluide : le design prend toute la largeur de la fenêtre, la taille des polices reste la même, la largeur des média restent identique ; RWD : le design ne prend pas forcement toute la largeur de la fenêtre, chaque contenu s’adapte à la fenêtre.

Comment mettre en place un Web design adaptatif?

Pendant cette session, on a vu que plusieurs techniques existaient pour servir un design adaptatif, notamment les grilles de mise en page fluides et la technique des media queries.

La technique de grille fluide est une très bonne façon de proposer une interface “identique” selon la taille de fenêtre, cependant elle est assez fastidieuse à mettre en place puisque chaque pixels doit être convertis en pourcent ou en ems (et pourquoi pas en rems).

Bien que la technique des media queries soit assez simple à mettre en place, celles-ci ne font pas tout. En effet, on ne conçoit pas un design adaptatif comme on conçoit un design Web “classique” et encore moins comme une interface dédiée aux périphériques mobiles. Nicolas Torres (@noclat, qu’on remercie au passage pour son outil de transcrit) résume bien la chose :

“@noclat : @goetter bien d’accord ! C’est pas avec des medias queries qu’on met Amazon sur mobile !”

Faire du RWD, c’est aussi traiter les images, players vidéos et autre diaporamas de façon à ce que ceux-ci adaptent leur taille au conteneur, ou les disposer de manière différente.
Le design adaptatif nous permettra aussi de supprimer (cacher) des blocs de contenus annexes, n’ayant pas grande importance lors de l’affichage sur petits écrans. C’est aussi ça le RWD : mettre en avant ce qui doit l’être, quelque soit la taille de fenêtre/écran

Pour faire ceci, les media queries ne suffisent plus, et il n’est par rare de faire appel à du Javascript, pour par exemple transformer un menu horizontal en menu déroulant sur mobile.

Enfin, petite chose à retenir, et la plus importante : un design Web adaptatif, ça se prépare ! C’est à prendre comme un site Web à part et non pas juste une “sur-couche” en fin de projet – le RWD doit être penser en amont du projet.

Ressources et tutoriels

Pour terminer ce compte rendu, voici une liste de toutes les ressources partagées pendant la session :

Exemple de sites Responsive :

Frameworks et outils :

Tutoriels :

Divers :

 

A propos de l'auteur : Ange Chierchia

Webdesigner et développeur front-end, je parle couramment HTML5 et CSS3 et partage ressources/astuces sur Twitter et mon blog. Mes centres d'intérêt du moment : la typo sur le Web, l'ergonomie des interfaces utilisateur.

Live Tweet

Dans le Blog

Newsletter

Vous souhaitez être tenu au courant des dernières nouvelles concernant le WDfriday, événements, conférences, barcamps, etc… ?

N'hésitez pas à vous inscrire à notre newsletter !