La largeur du contenu correspond à la dimension horizontale de la page. Lorsque la largeur du contenu est plus grande que la largeur de la fenêtre du navigateur, et qu'il ne s'adapte pas, le navigateur ajoute une barre de navigation horizontale afin de pouvoir faire défiler le contenu de gauche à droite, c'est ce qu'on appelle le scroll X. A contrario, lorsque le contenu s'adapte à la largeur de la fenêtre du navigateur, on dit que la page est "responsive".
La présence d'un scroll X nuit à l'expérience utilisateur : le défilement horizontal n'est pas intuitif pour les utilisateurs, ils n'ont pas le reflexe de faire défiler les pages de gauche à droite. Si les utilisateurs ont une mauvaise expérience, ils risquent de revenir sur la SERP et cliquer sur un autre site plus adapté ce qui dégrade votre classement.
Dans la plupart des cas, c'est au niveau des styles CSS qu'il faut intervenir et mettre en place des "media queries". Ces instructions permettent de déinir des propriétés CSS selon les dimensions de la fenêtre du navigateur.
Exemple d'utilisation de "media queries" :
<html>
<head>
<title>Me page responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* Largeur par défaut des blocs */
.bloc {
display: inline-block;
width: 100%;
}
/* Surchage de la largeur des blocs lorsque la fenêtre du navigateur fait au moins 600px */
@media screen and (min-width: 600px) {
.bloc {
width: 30%;
}
}
</style>
</head>
<body>
<h1>Mon contenu s'adapte</h1>
<div class="bloc">Bloc A</div>
<div class="bloc">Bloc B</div>
<div class="bloc">Bloc C</div>
</body>
</html>
Lorsque la fenêtre du navigateur fait 600px ou plus, les blocs sont alignés sinon ils sont empilés. Pour obtenir plus d'informations sur les "media queries" et le responsive, constultez l'article de google (en anglais).
Une autre méthode existe pour ne pas faire apparaître la barre de navigation horizontale lorsque le contenu est plus grand, elle consiste à cacher ce qui dépasse grâce à une instruction CSS "overflow: hidden;". Cette méthode est à éviter puisqu'elle cache le contenu éventuel à l'utilisateur et celui-ci ne peut pas l'afficher du tout.