Skip to main content
design-adaptatif

Trucs et astuces pour un design adaptatif (responsive design)

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’à.

html5-boilerplate

HTML5 Boilerplate v2

les développeurs de HTML5 Boilerplate viennet de sortir la version 2.0 de leur kit de démarrage HTML, CSS et JavaScript afin de pouvoir  créer site et prototypes en HTML5 rapidement.

Pour télécharger cette version de HTML5 Boilerplate v2.0, rendez-vous sur le site officiel HTML5 Boilerplate.

La version 2.0 comporte d’importante modification, notamment l’inclusion de la nouvelle feuille de style de reset normalize.css. Normalize est quelques peu différente de son prédécesseur. Elle conserve les valeurs par défaut des navigateurs et ne fait le reset que des éléments nécessaires à un affichage identique sur tous les navigateurs.

Nouvelle fonctionnalité également dans HTML5 Boilerplate, l’inclusion du support de Respond.js (qui permet de créer des design s’adaptant aux mobiles et tablettes tactiles), des gains de performances notables (jusqu’à 80% à en croire la note de version). Et finalement, avec cette v2,  IE 6 demandera maintenant à l’internaute d’installer Chrome Frame (le futur est en marche).

Pour plus de détails sur les nouveautés HTML5 Boilerplate v2, n’hésitez pas à lire le site officiel et notamment la note de version. Une chose intéressante à noter dans la Foire aux questions (en anglais, désolé) :

Do I need to upgrade my sites to a new version?

Nope. So far there have been no critical bugs within our code that we’ve fixed from version to version. There are some nice changes that reduce your stress, but updating your HTML or CSS to the new stuff is probably more effort than it’s worth.

However, the .htaccess and Build Script you probably didn’t edit and therefore can be dropped into your existing sites with little hassle and likely a significant reward. So feel free to update those, and also update your Modernizr and jQuery versions to the latest versions they have.