Qu'est-ce qui se cache derrière ce nouveau mot à la mode, et comment créer un site web qui propose ce genre de fonctionnalité ? Ce tutoriel explique les concepts et leurs limites, et vous guidera à travers les étapes de base pour créer un site qui s'adapte aux différentes tailles d'écrans.
Le responsive design est une manière de concevoir les sites internet afin qu'ils s'adaptent à tous les types d'écran. Au vu du nombre croissant d'appareils différents (tablettes, smartphones…) et leurs écrans plus petits, il devenait indispensable de palier à ce problème. Dans ces pages réactives les éléments (textes, graphiques…) peuvent changer de taille en utilisant les feuilles de styles CSS (CSS3) et leurs media queries. Voici quelques-unes des différentes tailles d'écrans que nous sommes amenés à rencontrer :
- 240 × 320 (petit téléphone)
- 320 × 480 (iPhone)
- 480 × 640 (petite tablette)
- 768 × 1024 (iPad — Portrait)
- 1024 × 768 (iPad — Paysage)
Exemple de site avec du responsive design
Voir une galerie de sites développés avec du responsive design — Un autre showcase
Pour ceux qui veulent en savoir plus sur les perspectives à envisager, je vous invite à lire l'article de Fred Cavazza : Le responsive design à l'assaut des terminaux mobiles.
Pré-requis
On oublie le code JavaScript pour une fois, en revanche il est nécessaire de le tester sur les nouvelles versions de navigateurs (IE9, Firefox 4, Chrome 11, Opera 11…). Les vieux navigateurs (IE6, IE7, IE8, Safari 3.2…) ne supportent pas les CSS queries — voir la liste des navigateurs à proscrire.
Intégration
Media Query en HTML
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="example.css">
Media Query avec @import
@import url(example.css) screen and (max-width: 1024px)Media Query dans une feuille de styles
@media screen and (max-width: 1024px) {
/* les différents styles... */
}Certains sites vont jusqu'à 5 ou 6 tailles d'écran différentes (exemple smashingmagazine.com) mais généralement il est préférable de tabler sur 3 séries à l'aide des media queries :
@media only screen and (min-device-width: 768px) and (orientation: portrait),
screen and (max-width: 994px) {
/* 1 — pour les tablettes en mode portrait ou les ordinateurs avec moins de 994px */
}
@media screen and (max-width: 555px), screen and (max-device-width: 480px) {
/* 2 — pour les ordinateurs avec moins de 555px et la plupart des smartphones en paysage */
}
@media screen and (max-width: 320px) {
/* 3 — tous les autres appareils avec moins de 320px (smartphones en portrait) */
}Important : le viewport meta tag
En plus d'ajouter des media queries, il est nécessaire d'utiliser une balise meta viewport pour définir l'échelle initiale du site et désactiver le zoom sur les appareils mobiles :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Une des bonnes pratiques pour réussir à mettre en œuvre des sites avec du responsive design consiste à déterminer en amont les résolutions auxquelles votre site doit « répondre » (1024px et 768px pour l'iPad, 960px et 640px pour l'iPhone 4, 480px et 320px pour l'iPhone 3G, etc.).
Conclusion
Le responsive design répond avec brio aux nouvelles problématiques d'élasticité des sites internet. Vous pouvez tester vos réalisations avec l'outil en ligne mattkersley.com/responsive.
Un des côtés négatifs majeurs vient du contenu mobile car celui-ci n'est pas allégé par rapport à la « version ordinateur ». On peut effectivement « cacher » des parties, mais pour le mobile cela peut entraîner des surcharges inutiles lors du chargement d'éléments non utilisés (fichiers JS, CSS, images). Donc pour certains projets il vaudra mieux faire un site mobile dédié pour contrôler tous les éléments indépendamment.