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)
Une mise en page adaptative ou réactive est composée de trois parties :
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).
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.
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é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) |
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.
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.
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.
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.
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.