Jeudi 06 octobre, 2011

Trucs et astuces pour un design adaptatif (responsive design)

design-adaptatif

Le design adaptatif, très à la mode depuis l’émergence du mobile, est l’art de faire s’adapter un site à la taille de l’écran l’affichant. Prenez un même site sur PC, tablette tactile ou mobile, le site sera toujours lisible (sans défilement intempestif), et beau, mais il se présentera différemment. Alors quelles sont les bonnes pratiques pour avoir un site adaptatif ?

Le design adaptatif, ou responsive design, très à la mode depuis l’émergence du mobile, est l’art de faire s’adapter un site à la taille de l’écran l’affichant.

En d’autres termes, naviguez sur un même site depuis votre PC ou depuis votre tablette tactile ou votre mobile, le site sera toujours lisible (sans défilement intempestif), et beau, mais il se présentera différemment.
Par exemple, les colonnes de droite s’afficheront en dessous sur un petit écran, voir pas du tout, ou sous une forme différente afin de simplifier la lecture ou la navigation.

Alors quelles sont les bonnes pratiques pour avoir un site adaptatif ?

  • Approche « Mobile first » afin de vous concentrer sur l’essentiel de votre communication, et adapter ensuite le site pour afficher plus de choses pour les écrans le permettant.
  • Utilisez les @media CSS pour adapter la présentation de la page à la taille de l’écran.
  • Utilisez les librairies Javascript comme Respond.js ou CSS3 Media Queries afin d’apporter la prise en charge des @media aux navigateurs ne les comprenant pas par défaut.
  • Utilisez des « fluid layouts », ou zones adaptatives et relatives, afin de s’adapter à l’écran. Ne faites pas une CSS pour les iPhone, une pour les tablettes, …, car demain (et déjà hier) un écran avec des dimensions intermédiaires sortira.
  • Faites votre design en fonction de votre contenu. Les frameworks CSS sont à la mode, et utiles dans certains cas, mais font rarement l’affaire pour un site sur-mesure. Ne les laissez pas mettre votre créativité dans des cases.
  • Adaptez la taille de vos images à la taille des écrans avec img { max-width: 100%; }. Cela permet de gérer l’affichage, mais télécharge toujours un fichier unique (en général, le fichier en taille réelle). Pour pallier ce problème, essayer avec un script comme Responsive Images afin de télécharger l’image de la taille correspondant à celle de l’écran.
  • Utilisez le lazy loading pour vos images. Un petite librairie Javascript qui permet de ne télécharger les images que lorsque l’internaute aura fait suffisamment défiler la page pour que l’image se trouve dans la zone visible. On peut citer le très bon plugin jQuery Lazy Load.
  • Oubliez la perfection (mais essayez de l’atteindre). Il y aura toujours des personnes avec de très vieux navigateurs, ou Javascript désactivé. Faites en sorte que l’affichage de votre design dans ces conditions soit correct, que le site reste beau et utilisable, même si tout ne sera pas parfait (le site aura par exemple des images haute résolution alors que l’écran de l’internaute n’est pas très grand).

Cette façon de concevoir est récente, mais s’avère de plus en plus nécessaire, compte-tenu des périphériques variés ayant accès à internet (PC fixes, portables, tablettes, mobiles, télévision).
Suivre ces recommandations demande du temps et de la réflexion pour obtenir un site joli, bien fait, utilisé et utilisable, mais c’est important, et vous les connaissez maintenant, alors comme on dit, y’a plus qu’à.


Related Posts


HTML5 : des expériences à voir absolument
HTML5 : des expériences à voir absolument
HTML/CSS, HTML5
Fini la galère des tailles de police
Fini la galère des tailles de police
CSS3, HTML/CSS
Dessiner des formes en CSS pur
Dessiner des formes en CSS pur
CSS3, HTML/CSS

Soyez le premier à commenter ce billet !

Laisser un commentaire


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>