Mise en page « adaptative » ou « réactive » : avantages et inconvénients

par
   

Formats d'écranDe 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 :

  1. une grille flexible
  2. des éléments adaptés à la taille de l'écran
  3. et l'utilisation de requêtes média (media queries)

Maquettes d'une page avec une grille flexible

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)
{.classForaMediumScreen {  width:30%}}

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.

COMMENTAIRES

  1. Laurent

    Comme nous en discutions lors de la rédaction de ton article, c’est une tendance qui prend de l’ampleur!

    Je viens de tomber sur un article du readwriteweb qui amène l’idée que Facebook est entrain de passer au responsive design en transformant ses différentes plateformes mobiles en HTML 5.

    Je ne peux alors m’empêcher de penser à d’autres joueurs, comme le Financial Times, qui ont lâché le AppStore d’Apple pour cause de coûts prohibitif et qui ont transformé leur app en HTML 5 pour en faire une web app. Il y a des chances qu’ils suivent la tendance, si elle continue, et adaptent leur code actuel pour se tourner tranquillement vers du responsive design à leur tour.

    Répondre
  2. Karine Samson

    C’est aussi le temps que les CMS, ainsi que les cursus scolaires, s’adaptent à ces techniques émergentes.

    Merci pour l’article, superbe résumé!

    Répondre

Laisser un commentaire

XHTML: Balises autorisées <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>