Webmasters : Responsive Designs : le pouvoir des media queries

Chez Google, nous vénérons les données, et passons beaucoup de temps à surveiller les statistiques de nos divers sites. N’importe quel développeur qui regarde un tant soit peu ses stats aura remarqué la proportion croissante de visites provenant des appareils mobiles de dernière génération. Ces visites représentent un important pourcentage d’internautes, qui utilisent un navigateur moderne prenant en charge les dernières évolutions HTML, CSS, et JavaScript, mais également dotés d’un petit écran, autour des 320px.

Notre engagement d’accessibilité nous oblige à proposer une bonne expérience de navigation à l’ensemble de nos utilisateurs. Nous avons été face à un dilemme de taille entre créer des sites optimisés pour les mobiles, ou adapter les sites existants pour qu’ils s’affichent bien à la fois sur ordinateur et sur mobile. Créer deux sites nous permettrait de mieux cibler les différents appareils, mais maintenir un seul et unique site permet de conserver une seule URL, sans la complexé des redirections. Dans un soucis de simplicité,  nous avons choisi d’opter pour une seule page pour les deux expériences, et avons commencé à réfléchir à des pistes pour satisfaire les objectifs suivants :

1. Nos pages doivent s’afficher correctement sur n’importe quelle taille d’écran
2. Le code source de la page doit être strictement identique sur n’importe quel appareil
3. Nous ne devons à aucun moment afficher une barre de scroll horizontale, quelque soit la taille de l’écran

Contenu empilé, navigation adaptée, images redimensionnées – Chromebooks

Implémentation

Pour commencer, un marquage simple et sémantique permet d’avoir des pages plus flexibles et plus faciles à remanier. Au lieu de spécifier une width pour les éléments contenants, nous avons commencé à utiliser max-width, et à la place de height, min-height. Nous ne fixons par ailleurs plus les tailles des images, mais préférons leur attribuer un max-width de 100%. De cette façon, les polices plus grosses, les textes sur plusieurs lignes et les images ne dépassent pas des bords des containers.

img { max-width: 100%; }

Ces quelques règles sont un bon point de départ, mais manquent de flexibilité. Heureusement, les « media queries » sont désormais prises en charge par les navigateurs modernes, incluant IE9 et la majorité des appareils mobiles. Ces dernières peuvent faire la différence entre un site qui se dégrade correctement sur un navigateur mobile, et un site conçu pour bénéficier d’une interface optimisée. Mais d’abord, nous devons prendre en compte la façon dont les navigateurs des smartphones fonctionnent.

Viewports

Quand un pixel n’est plus un pixel.

Par défaut, les navigateurs mobiles se font passer pour des navigateurs classiques, et affichent les pages comme si vous les consultiez depuis un navigateur sur votre ordinateur. C’est pour cela que les textes sont impossibles à lire sans zoomer. Le viewport par défaut pour le navigateur Android est de 800px, et de 980px sur iOS, quelque soit le nombre réel de pixels présents à l’écran.

Afin que le navigateur mobile affiche votre page à une échelle plus visible, vous devez utiliser la balise viewport :

 <meta name="viewport" content="width=device-width, initial-scale=1"> 

Les résolutions des écrans mobiles varient beaucoup, mais la majorité des navigateurs sur smartphone revendiquent une largeur d’écran dans les alentours de 320px. Si votre appareil mobile a une largeur de 640 pixels physiques, alors une image de 320px remplirai tout l’écran, e, utilisant le double de pixels. Ceci explique notamment pourquoi les textes semblent plus condensés sur un petit écran.

La raison pour laquelle nous utilisons le « device-width » dans le viewport est la largeur s’adapte lorsque l’utilisateur change l’orientation de son smartphone ou de sa tablette. Combiné à des media queries, cette technique vous permettra d’ajuster l’apparence de votre site même si l’utilisateur fait tourner son appareil :

 @media screen and (min-width:480px) and (max-width:800px) {   /* Target landscape smartphones, portrait tablets, narrow desktops   */ } @media screen and (max-width:479px) {   /* Target portrait smartphones */ } 

Vous pouvez également utiliser les media queries pour cibler les différentes orientations sans avoir à spécifier de tailles en pixel :

 @media all and (orientation: landscape) {   /* Target device in landscape mode */ } @media all and (orientation: portrait) {   /* Target device in portrait mode */ }

Conclusion

Il n’y a pas de manière simple de rendre les sites accessibles sur les appareils mobiles. Les « liquid layouts » sont une bonne base de départ, mais cette méthode nécessite un certain nombre de compromis sur le design. Les media queries sont très pratiques pour affiner l’apparence de votre site sur de nombreux appareils, mais souvenez-vous que 25% des visites proviennent de navigateurs ne prenant pas en charge cette technique, ce qui peut causer des problèmes de performance.

Et si vous avez un widget sophistiqué sur votre site, il fonctionne certes parfaitement avec une souris, mais beaucoup moins bien sur un écran tactile. La clé est de tester tôt et souvent. Si vous ne pouvez pas utiliser des appareils réels, le SDK Android et le simulateur iOS sont à votre disposition. Demandez à des amis ou à des collègues de consulter vos sites depuis leur mobile, et regardez comment ils naviguent. Les navigateurs mobiles sont une  grande source de trafic, et apprendre à les connaître représente une nouvelle voie de développement à explorer. Quelques exemples de designs responsives 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

Posté dans sa version originale en anglais par Rupert Breheny, Edward Jung, & Matt Zürrer, équipe Google Webmaster