Site de l'association Denentzat à Amendeuix-Oneix

Présentation des sites Web selon la largeur de votre écran

Le problème

Lorsque vous regardez un site web sur votre ordinateur fixe doté d'un écran de 27 pouces, vous n'êtes pas du tout dans les mêmes conditions que lorsque vous le regardez sur votre téléphone portable (autour de 5 pouces). La présentation ne saurait être la même car les pages deviendrait rapidement illisibles.

Cette différence dans la présentation rend toute explication de l'utilisation du site difficile et peut en déconcerter certains d'où cette petite explication.

La solution

Pour traiter ce problème, on serait tenté de concevoir des sites adaptés à chaque format d'appareil, PC, tablette ou smartphone. Mais cela deviendrait rapidement lourd à gérer. Pour affronter ces disparités, les ingénieurs spécialistes du Web ont inventé les techniques dites « responsives» (traduisez adaptatives).

Le site est alors programmé en utilisant des feuilles de styles dans lesquelles sont employées des « media queries » (traduisez « requêtes de média »). Il s'agit pour ces requêtes d'interroger le navigateur sur le média qui l'exécute (ici le média est le PC, la tablette ou le smartphone). Les feuilles de styles sont alors en mesure de savoir si elles ont affaire à un média étroit (largeur inférieure à un certain nombre de pixels), moyen ou large et de présenter le site différemment.

Le résutat

Notre site utilise ces techniques. Vous pouvez vous en rendre compte sur un écran large en diminuant la largeur de votre fenêtre de navigation. Vous constaterez qu'il y a en fait deux seuils, le seuil 1: passage de large à moyen, et le seuil 2 : passage de moyen à étroit. Comme un dessin vaut toujours mieux qu'un long discours, je vous présente trois images correspondant respectivement à un appareil large, à un appareil de largeur moyenne, et à un appareil étroit.

img

img

img

On peut constater que, sur les appareils de largeur moyenne, certaines parties de la page normalement présentées côte à côte sont maintenant empilées et que le menu peut être encore présenté sur une ligne horizontale. Mais lorsque l'appareil devient trop étroit, ce menu apparaît lui aussi sous forme de blocs empilés.

N'oubliez pas non plus que sur un smartphone, vous ne voyez qu'une faible partie de la page en hauteur et qu'il vous faut penser à faire défiler la page dans la fenêtre. Une petite gymnastique mentale pas toujours évidente.

Et quand le site n'est pas adaptatif ?

Lorsque le site n'est pas adaptatif, le résultat n'est pas toujours des meilleurs et le site est soit illisible, soit difficile à naviguer si on agrandit l'image. Je vous laisse le constater en vous rendant sur le site de Saint-Palais avec votre smartphone ou en faisant l'exercice de réduction de la fenêtre de navigation sur votre PC.

Le site de Saint-Palais est bien-sûr infiniment plus riche que le nôtre – nous n'avons pas autant de thématiques à aborder – et assez remarquable en terme de design sur un écran large – les images sont magnifiques et le choix des couleurs et des polices très travaillé. Cependant, sa lecture sur un smartphone n'est pas des plus faciles et il gagnerait beaucoup à utiliser un peu plus ces techniques quitte à se simplifier un peu. N'oublions pas que les touristes de passage qui veulent se renseigner ne disposent souvent que de leur smartphone.

Commentaires des utilisateurs

Connectez vous pour poster un commentaire.