Adapter la taille du contenu à la fenêtre d'affichage

Cette règle se déclenche lorsque les analyses PageSpeed Insights indiquent que le contenu de la page ne s'adapte pas horizontalement à la taille de la fenêtre d'affichage spécifiée, ce qui oblige l'internaute à utiliser une vue panoramique pour visualiser l'intégralité du contenu.

Présentation

Que ce soit sur des appareils mobiles ou de bureau, les internautes ont l'habitude de faire défiler les sites Web verticalement, mais pas horizontalement. Obliger l'internaute à faire défiler la page horizontalement ou à faire un zoom arrière pour en visualiser l'intégralité engendre une expérience utilisateur médiocre.

Lors du développement d'un site pour mobile à l'aide d'une balise Meta de fenêtre d'affichage, il est facile de créer accidentellement du contenu qui ne s'adapte pas complètement à la fenêtre d'affichage spécifiée. Par exemple, une image qui apparaît avec une largeur supérieure à celle de la fenêtre d'affichage peut obliger l'internaute à faire défiler horizontalement cette dernière. Vous devez adapter ce contenu à la largeur de la fenêtre d'affichage, afin que l'internaute n'ait pas à la faire défiler horizontalement.

Recommandations

Étant donné que les dimensions d'écran varient énormément entre les appareils (par exemple, entre des téléphones et des tablettes, et même entre différents téléphones), vous devez configurer la fenêtre d'affichage de sorte que vos pages s'affichent correctement sur la plupart des appareils. Cependant, étant donné que la largeur (en pixels CSS) de la fenêtre d'affichage peut varier, le contenu de votre page ne doit pas se baser sur une largeur de fenêtre d'affichage en particulier.

  • Ne définissez pas de grandes largeurs CSS absolues pour les éléments d'une page (telles que "div{width:360px;}"), car l'élément pourrait se révéler trop large pour la fenêtre d'affichage d'un appareil plus étroit (par exemple, un appareil avec une largeur de 320 pixels CSS, comme un iPhone). Utilisez plutôt des valeurs de largeur relatives, telles que "width:100%". De même, faites attention à ne pas utiliser de grandes valeurs de positionnement absolu qui pourraient faire sortir l'élément de la fenêtre d'affichage sur de petits écrans.
  • Des requêtes média CSS peuvent être utilisées pour appliquer un style différent selon la taille des écrans si cela s'avère nécessaire. Cet article de HTML5 Rocks indique d'autres recommandations à suivre.
  • En ce qui concerne les images, cet article offre un bon aperçu de la façon de diffuser des images dimensionnées de manière adaptative sans provoquer d'ajustement inutile de la mise en page lors de l'affichage.