De plus en plus d’internautes consultent votre site à partir d’un appareil mobile. En même temps, la taille des écrans est de plus en plus variée. Une des façons de répondre à ces nouveaux besoins est de créer une mise en page dite « adaptative » ou « réactive » (« responsive design »).
(La plupart de ces concepts sont tellement nouveaux que la terminologie en anglais n’est pas encore arrêtée, tandis que la terminologie officielle en français est inexistante)
Les ingrédients
Une mise en page adaptative ou réactive est composée de trois parties :
- une grille flexible
- des éléments adaptés à la taille de l’écran
- et l’utilisation de requêtes média (media queries)
Une grille flexible
Comme discuté précédemment par mon collègue Mathieu, une grille flexible permet de présenter le contenu d’un site dans un nombre approprié de colonnes, en fonction de la largeur de l’écran.
On parle alors de grille pliante (« folding grid »), de grille adaptative (« adaptive grid »).
Une des adaptations les plus évidentes est de repositionner les blocs de contenu en fonction de la largeur de l’appareil, et de son orientation (portrait ou paysage).
- une colonne sur un téléphone,
- deux ou trois colonnes sur un iPad,
- quatre colonnes sur un ordinateur de bureau.
Ce repositionnement doit alors suivre certaines règles, qu’un ergonome doit déterminer à l’avance. Par exemple, on pourra déterminer que le contenu de la colonne de droite doit apparaître en bas du contenu principal, avec le bas de page. Certains éléments, par exemple des publicités ou des étiquettes, pourraient disparaître de la page.
Éléments adaptés à la taille de l’écran
La taille de la police de caractère peut aussi être redimensionnée, de même que l’espacement entre les blocs.
Enfin, des images peuvent être virtuellement rognées, ou encore remplacées par une plus petite.
L’utilisation de requêtes média (media queries)
L’utilisation de « requêtes médias » permet d’activer des styles différents, en fonction de certains paramètres tels que la largeur de l’écran ou son orientation.
Pour les curieux, voici à quoi ressemble une requête média:
@media screen and (min-width: 800px) and (max-width: 1200px) |
Avantages
Permet d’avoir une seule URL pour chacune des pages d’un site
Une URL universelle pour chacune des pages évite d’avoir à prévoir un mécanisme pour passer de la version mobile à la version complète et inversement, ce qui n’est pas sans poser des problèmes ergonomiques.
De plus, la redirection de l’utilisateur vers la version mobile, qui parfois pose problème, est ainsi évitée.
S’adapte à l’écran d’un maximum d’appareils
Un site mobile n’est pas approprié pour un iPad par exemple. Aussi, une mise en page flexible permet de tenir compte du fait qu’un appareil peut être en mode portrait ou paysage.
Inconvénients
Plus lent qu’un site mobile dédié
Cette lenteur est principalement causée par le fait qu’il est nécessaire d’inclure une plus grande quantité de code directement dans la page. Or, comme on le sait, la vitesse est primordiale pour les internautes.
Plus complexe à créer qu’un site mobile
Programmer ce genre d’adaptation de zéro peut représenter un travail titanesque. Heureusement, certains passionnés ont créé des librairies de codes ouverts qui simplifient le travail des intégrateurs. Malgré tout, la création d’un site « réactif » demeure complexe.
Conclusion
Créer un site « réactif » ou « adaptatif » peut être un investissement judicieux, d’autant que le taux d’adoption des appareils mobiles augmente rapidement. Mais comme peu de développeurs ont en ce moment de l’expérience avec ces techniques émergentes, il faut donc s’attendre à des coûts de développement beaucoup plus élevés.
