Concevoir : L'adaptabilité maximale ou le Responsive Design

La multiplication des médias permettant l'accès à nos sites devient extrême.
Là où, il y a encore 2 ans, on devait traiter le cas de l'affichage d'un site dans 2 résolutions cibles (800x600 et 1024x768), on arrive à un nombre de résolutions possibles quasiment égal au nombre de terminaux (tablette, smartphone, portable, TV, ...).

Si vous avez déjà été confronté aux problématiques d'impression sur des sites Web, vous avez surement, au moins une fois, résolu cette problématique par l'utilisation d'une feuille de style dédiée à l'impression(media="print").
De même, il est envisageable de traiter la multitude de support par du spécifique :

• définition de redirection en fonction du média sur un site dédié = une charge de maintenance importante (même si c'est en partie géré si l'on utilise un CMS)
• chargement d'une feuille de style spécifique au média = autant de CSS que de terminaux, à faire évoluer pour tout nouveau terminal non compatible
• optimisation du site pour les médias de faible résolution = limitation des possibilités en terme d'ergonomie et de contenu

On voit clairement qu'il n'y a pas de solution miracle parmi celles ci-dessus, une réponse à ce manque d'adaptabilité passe par le "Responsive Design". Basé sur les "Fluid Grids", "Fluid Images"  ce concept propose une mise en page adaptative...

A partir de votre Mockup, vous définissez l'unité de base de votre page et toute la mise en page est définie sur la base de cette unité via la définition de taille en ems (si vous avez bataillé avec IE pour le redimenssionnement de texte cela ne doit pas être une unité inconnue ;)).

De cette manière, vos conteneurs (div) sont eux aussi proportionnels à votre contenu, dans l'exemple d'Ethan Marcotte,

on définit :

• corps de texte : 16px (soit 1 em)
• Titre H1 : 1,5em (24px/16px)
• Enumeration : 0,875em (14px/16px)

En traitant les conteneurs à l'identique (#page{max-width.61.75em} soit 988px/16px) on a une taille maximale variable fonction de la taille du texte du navigateur.

Ajouter à cela la nouvelle capacité de CSS3, à savoir les media queries et vous avez un environnement adapté au média qui consulte vos pages au sein d'un même design : That's all folks !


Sources :
http://www.w3.org/TR/css3-mediaqueries/
http://www.alistapart.com/articles/howtosizetextincss/
http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/fluidgrids/
http://unstoppablerobotninja.com/entry/fluid-images