Design responsive – exploiter la puissance des media queries

Mardi 1er mai 2012

Nous adorons les données et passons beaucoup de temps à surveiller les analyses de nos sites Web. Tout développeur Web faisant de même aura remarqué l’augmentation récente du trafic provenant des appareils mobiles. Au cours de l’année écoulée, nous avons constaté que de nombreux sites clés obtiennent un pourcentage important de pages vues depuis des smartphones et des tablettes. Ceux-ci représentent un grand nombre de visiteurs, avec des navigateurs sophistiqués qui prennent en charge les dernières versions de HTML, CSS et JavaScript, mais qui disposent également d’un espace d’écran limité avec des largeurs aussi étroites que 320 pixels.

Notre engagement envers
l’accessibilité signifie que nous nous efforçons d’offrir une bonne expérience de navigation à tous nos utilisateurs. Nous avons été confrontés à un choix difficile entre créer des sites Web spécifiques aux mobiles ou adapter les sites existants et les nouveaux lancements pour qu’ils s’affichent bien sur ordinateur et sur mobile. Créer deux sites nous permettrait de mieux cibler du matériel spécifique, mais maintenir un seul site partagé préserve une URL canonique, évite les redirections compliquées et simplifie le partage des adresses Web. Dans un souci de maintenabilité, nous avons penché pour l’utilisation des mêmes pages pour les deux et avons commencé à réfléchir à la manière dont nous pourrions respecter les directives suivantes :

1. Nos pages doivent s’afficher de manière lisible à n’importe quelle résolution d’écran
2. Nous balisons un ensemble de contenu, le rendant visible sur n’importe quel appareil
3. Nous ne devrions jamais afficher de barre de défilement horizontale, quelle que soit la taille de la fenêtre

Mise en œuvre

Comme point de départ, un balisage simple et sémantique nous donne des pages plus flexibles et plus faciles à réorganiser si la mise en page doit être modifiée. En nous assurant que la feuille de style permet une
mise en page fluide, nous sommes déjà sur la voie de la compatibilité mobile. Au lieu de spécifier largeur pour les éléments conteneurs, nous avons commencé à utiliser largeur maximale à la place. Au lieu de
hauteur nous avons utilisé hauteur minimale, afin que les polices plus grandes ou le texte sur plusieurs lignes ne dépassent pas les limites du conteneur. Pour éviter que les images à largeur fixe ne “forcent” l’ouverture des colonnes fluides, nous appliquons la règle CSS suivante :

La mise en page fluide est un bon début, mais peut manquer d’une certaine finesse. Heureusement, les
media queries sont désormais
bien prises en charge dans les navigateurs modernes
y compris IE9+ et la plupart des appareils mobiles. Celles-ci peuvent faire la différence entre un site qui se dégrade bien sur un navigateur mobile et un site amélioré pour tirer parti de l’interface utilisateur rationalisée. Mais nous devons d’abord prendre en compte la façon dont les smartphones se présentent aux serveurs Web.

Viewports

Quand un pixel n’est-il pas un pixel ? Quand il est sur un smartphone. Par défaut, les navigateurs de smartphones prétendent être des navigateurs de bureau haute résolution et mettent en page une page comme si vous la consultiez sur un écran d’ordinateur. C’est pourquoi vous obtenez un “mode aperçu” avec un texte minuscule impossible à lire avant de zoomer. La
largeur de viewport par défaut
pour le navigateur Android par défaut est de 800px, et de 980px pour iOS, quel que soit le nombre de
pixels physiques réels
sur l’écran.

Afin d’inciter le navigateur à afficher votre page à une échelle plus lisible, vous devez utiliser la balise meta viewport :

Les résolutions d’écran mobile varient considérablement, mais la plupart des navigateurs de smartphones modernes signalent actuellement une largeur d'appareil standard de l’ordre de 320px. Si votre appareil mobile a réellement une largeur de 640 pixels physiques, alors une image de 320px de large serait dimensionnée à la largeur totale de l’écran, en utilisant le double du nombre de pixels dans le processus. C’est aussi la raison pour laquelle le texte semble beaucoup plus net sur le petit écran – le double de la densité de pixels par rapport à un écran d’ordinateur standard.

L’avantage de régler la largeur sur largeur d'appareil dans la balise
meta viewport est qu’elle se met à jour lorsque l’utilisateur change l’orientation de son smartphone ou de sa tablette. Combiner cela avec des media queries vous permet d’ajuster la mise en page au fur et à mesure que l’utilisateur fait pivoter son appareil :

En réalité, vous constaterez peut-être que vous devez utiliser différents points de rupture en fonction de la façon dont votre site s’écoule et s’affiche sur divers appareils. Vous pouvez également utiliser la media query orientation pour cibler des orientations spécifiques sans faire référence aux dimensions en pixels,
là où c’est pris en charge.

Un exemple de media queries

Nous avons récemment relancé la page
À propos de Google . En plus de mettre en place une mise en page fluide, nous avons ajouté quelques media queries pour offrir une meilleure expérience sur les petits écrans, comme ceux d’une tablette ou d’un smartphone.

Au lieu de cibler des résolutions d’appareil spécifiques, nous avons opté pour un ensemble relativement large de points de rupture. Pour une résolution d’écran supérieure à 1024 pixels, nous affichons la page telle qu’elle a été conçue à l’origine, conformément à notre grille de 12 colonnes. Entre 801px et 1024px, vous voyez une version légèrement compressée grâce à la mise en page fluide.

Ce n’est que si la résolution de l’écran tombe à 800 pixels que le contenu qui n’est pas considéré comme essentiel sera envoyé au bas de la page :

Avec une dernière media query, nous entrons dans le territoire des smartphones :

À ce stade, nous ne chargeons plus la grande image et nous empilons les blocs de contenu. Nous avons également ajouté un espace blanc supplémentaire entre les éléments de contenu afin qu’ils soient plus facilement identifiés comme des sections différentes.

Avec ces mesures simples, nous nous sommes assurés que le site est utilisable sur une large gamme d’appareils.

Conclusion

Il convient de garder à l’esprit qu’il n’existe pas de solution simple pour rendre les sites accessibles sur les appareils mobiles et les viewports étroits. Les mises en page fluides sont un excellent point de départ, mais certains compromis de conception peuvent être nécessaires. Les media queries sont un moyen utile d’ajouter de la finition pour de nombreux appareils, mais n’oubliez pas que
25 % des visites proviennent de navigateurs de bureau qui ne prennent pas actuellement en charge cette technique et qu’il existe certaines
implications en termes de performances. Et si vous avez un widget sophistiqué sur votre site, il pourrait fonctionner à merveille avec une souris, mais pas aussi bien sur un appareil tactile où le contrôle fin est plus difficile.

La clé est de tester tôt et souvent. Tout temps passé à naviguer sur vos propres sites avec un smartphone ou une tablette sera inestimable. Lorsque vous ne pouvez pas tester sur de vrais appareils, utilisez le
Android SDK ou l’
iOS Simulator. Demandez à vos amis et collègues de consulter vos sites sur leurs appareils, et observez également comment ils interagissent.

Les navigateurs mobiles sont une excellente source de nouveau trafic, et apprendre à mieux les prendre en charge est un nouveau domaine passionnant du développement professionnel.

Quelques autres exemples de design responsive chez Google :

• www.google.com/about/
• www.google.com/goodtoknow
• www.google.com/culturalinstitute
• www.google.com/events/sciencefair
• www.google.com/intl/en/chrome/devices
• picasa.google.com

Écrit par Rupert Breheny,
Edward Jung, et
Matt Zürrer, Google Webmaster Team