Qu'est-ce qui ce cache derrière ce nouveau mot à la mode, 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. En effet au vue du nombre croissant d'appareils différents (tablettes, smartphone, ... ) et leurs écrans plus petits que les écrans d'ordinateurs, il devenait indispensable de palier à ce problème. Dans ces pages réactives les éléments (textes, graphiques...) deviennent réactifs et peuvent changer de taille en fonction de la taille d'écran en utilisant les feuilles de styles CSS (CSS3) et leurs media queries (on y reviendra dans l'article).
Voici quelques unes des différentes tailles d'écrans que nous sommes amenés à rencontrer:
- 240 x 320 (petit téléphone)
- 320 x 480 (iPhone)
- 480 x 640 (petite tablette)
- 768 x 1024 (iPad - Portrait)
- 1024 x 768 (iPad - Paysage)
Exemple de site avec du responsive design
voir une galerie de site développé 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 sur le sujet : Le responsive design à l’assaut des terminaux mobiles. Nous allons nous intéresser à son intégration.
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, je vous laisse regarder la liste des navigateurs à proscrire.
Intégration
Media Query en HTML
<link rel="stylesheet" media="screen and (max-width: 1024px)" rel="stylesheet" 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 voir 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 medias queries. Donc voici comment traiter les autres tailles d'écran :
@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 une résolution horizontale de moins de 994px */ }
@media screen and (max-width: 555px), screen and (max-device-width: 480px) { /* 2 - pour les ordinateurs avec une résolution horizontale de moins de 555px et la plupart des smartphones en mode paysage (480px de large) */ }
@media screen and (max-width: 320px) { /* 3 - tous les autres appareils avec moins de 320px de large (principalement les smartphones en mode portrait */ }
Important : le viewport meta tag
En plus d'ajouter des medias queries, il est nécessaire d'utiliser une balise meta viewport pour définir l'échelle initiale du site et surtout de désactiver le zoom sur les appareils mobiles et les tablettes. On l'écrit ainsi :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Retrouvez tous ces différentes CSS queries dans le fichier de Démonstration
Une des bonnes pratiques pour réussir à mettre en œuvre des sites avec du responsive design consiste à déterminer les résolutions auxquelles votre site doit "répondre". En effet vous pourrez anticipez en amont toute les probabilités pour les différentes résolutions d'appareils (1024px et 768px pour l'iPad, 960px et 640px pour iPhone 4 et 480px 320px et pour les iPhone 3G etc).
Conclusion
Le responsive design répond avec brio aux nouvelles problématiques d’élasticité des sites internet. On peut même dire qu'on attendait une solution de ce genre, mais il faudra encore être patient avant que ces techniques ne se démocratisent. Vous pouvez d'ores et déjà tester vos réalisations avec un outil en ligne http://mattkersley.com/responsive/.
Un des cotés négatif majeur vient du contenu mobile car celui-ci n'est pas allégé par rapport à celui de 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 qui ne sont pas utilisés (fichiers JS, fichiers CSS, images). Donc pour certains projets il vaudra mieux faire un site mobile dédié pour contrôler tous les éléments indépendamment. Le responsive design donne la possibilité suivant les projets d'offrir un site élastique, encore faut-il l'avoir prévu en amont de la réalisation.
Pour aller plus loin
Les spécifications de la W3C pour les CSS3 et les Media Queries
Une grosse quantité de ressources et de techniques compilées par Smashing Magazine
Devenez fan de Ecaireur.net sur Facebook. Suivez-moi sur Twitter. Copyright Eclaireur.net.
Jeu de briques
Snake
Pacman
Bubble