Table des matières
A la différence d'une affiche ou d'un visuel statique, un site va devoir s'adapter à de nombreux formats : grand écran, tablette, téléphone ... Il fut une époque où les site web se contentaient d'avoir une version pour ordinateur, mais la majorité des utilisateurs sont aujourd'hui susceptibles de consulter votre site sur téléphone.
Lorsque l'on réalise une page, il est donc crucial de prévoir comment elle s'affichera pour les petits écrans, afin d'éviter que la mise en page présente des bugs d'affichage, voir que la page deviennent carrément inutilisable sur téléphone.
Il serait néanmoins illusoire d'adapter son site parfaitement à l'intégralité des formats qui existent actuellement. Impossible par exemple de prendre en compte tout les formats de téléphone ! Pour que la tâche reste réalisable, on va donc vérifier que le site ne "casse pas" sur une plage de formats définis à l'avance :
Note : Ici, un px n'est pas un pixel, mais une unité de mesure en millimètre. à titre d'exemple, 2350px correspond à un écran de 24 pouces. Pour en savoir plus, consultez le guide dédié aux unités de mesure
Plus simplement, on va considérer que les écrans qui ont un format supérieur à 1920px ou inférieur à 320px sont peu susceptibles d'être utilisés, ou ne changeront pas trop la mise en page. On ne s'en préoccupe pas.
Ces cinq formats, appelés points de casse, n'ont pas été choisi au hasard : Il correspondent généralement au moment précis où la mise en page est susceptible de commencer à faire n'importe quoi. Cela ne veut pas forcément dire qu'il faut absolument éditer tout les points de casse pour chaque page. Si la mise en page reste cohérente lorsqu'on passe du format grande tablette à petite tablette par exemple, inutile de changer quoi que ce soit.
Cet onglet vous permet d'éditer une page web en fonction du format dans lequel il sera affiché. Si vous souhaitez que certains éléments aient un rendu différent en format mobile, par exemple, cliquer sur le bouton correspondant à l'affichage mobile vous permettra d'éditer la page uniquement pour les mobiles.
Les règles d'affichages fonctionnent sur le principe "plus petit que"
Grand écran d'ordinateur : S'applique à tout les formats d'écran
Petit écran d ordinateur : S'applique lorsque l'écran est plus petit que 1920px, c'est à dire les petits ordinateurs. Utile pour visualiser sur les petits ordinateurs, mais très rarement utilisé pour éditer une page.
Grande tablette : S'applique lorsque l'écran est plus petit que 993 px, c'est-à-dire à partir du format tablette
Petite tablette : S'applique lorsque l'écran est plus petit que 768px, c'est à dire les petites tablettes et les téléphones en format paysage.
Téléphone : S'applique lorsque l'écran est plus petit que 480 px, c'est-à-dire pour les mobiles.
Dans l'exemple ci-dessus, nous voulons que les éléments à l'écran s'affichent de manière horizontale pour tous les formats, et de manière verticale à partir du format tablette pour économiser de la place.
Vous disposez également d'une deuxième barre sous la première, fonctionnant de manière similaire. Les formats qui contiennent des réglages additionnels comportent un point vert.
Par défaut, l'affichage sur Oxygen est défini pile sur le point de casse, c'est-à-dire le pixel juste avant le format suivant, afin d'être sûr que la page ne cassera pas juste avant de passer au format du dessous. Mais il possible de changer ça.
Lorsque vous sélectionnez un autre format que celui affiché par défaut, une règle va apparaître en bas de page :
Cette barre vous permet de sélectionner un format précis en déplaçant les deux barres verticales. Sur la photo ci-dessus, par exemple, la taille est fixée sur 769px exactement, car nous sommes en format grande tablette. Mais on peut aussi déplacer le curseur sur environ 850px, par exemple, pour voir le rendu.
Cette option peut être utile si vous avez besoin de prévisualiser le rendu à un certain format, mais il est parfois plus simple de voir comment réagit la page en l'ouvrant directement et en la testant directement sur votre ordinateur.
Votre page est terminée et vous avez bien édité tout les points de casse important ? Alors il est temps de tester votre page. Ouvrez-la comme si vous étiez un utilisateur normal, et étirez-la dans tous les sens, en largeur comme en hauteur, à la recherche de tout comportement bizarre. Par exemple, la page est-elle encore lisible lorsque le navigateur est très large tout en étant écrasé en hauteur ?
Pour faciliter votre séance de test, vous pouvez vous aider de la fonction debug de votre navigateur en appuyant sur F12.
Important : Lorsque vous modifiez la hauteur (height) ou la largeur (width) d'un élément en mettant un pourcentage dans les plus petits formats d'écran, l'unité de mesure s'affichera en %, mais elle est parfois encore en px. Il faudra sélectionner % manuellement.
