Astuces responsive design avec Bootstrap

Lorsque vous créez un site avec responsive design (les thèmes Bootstrap), il faut penser à vos utilisateurs qui consulteront le site sur un équipement mobile (smartphone, tablette). La première recommandation de Red Fish Web Syndrome - Astuces pour sites créés sur e-monsite, est de créez vos pages de façon linéaire en respectant une lecture de gauche à droite et non de haut en bas.

Astuces pour équipement mobile et thème Bootstrap

L'affichage de vos éditeurs visuels est de gauche à droite puis de haut en bas. Si vous utilisez des images d'illustration, il est préférable d'avoir l'image sur la même ligne et non un bloc contenant les images et une seconde ligne avec les textes.

Ci-dessous, vous trouverez deux exemples pour démontrer que l'affichage sur PC est différent de l'affichage sur mobile, et comment favoriser la consultation de votre site responsive sur les petits écrans (tablette, smartphone).

Exemple de ma page d'accueil, avec les images d'illustration sur la même ligne que les textes qu'elles illustrent. La première image montre le contenu sur PC, la seconde la même page sur mobile.

L'affichage sur PC à gauche

L'affichage sur tablette/smartphone à droite

Pour placer ces deux images dans cette page, j'ai fais l'inverse (ce qu'il ne faudrait pas faire).A savoir mettre mes titres sur la même ligne, puis mes images en dessous.

Le résultat à l'affichage est celui-ci :

L'affichage sur PC

L'affichage sur tablette/smartphone

Conclusion : préférez une structure de page horizontale

En mettant les description de mes illustrations sur deux colonnes sur la même ligne puis en mettant les images sur une ligne en dessous (toujours sur deux colonnes), les titres s'affichent à la suite, puis viennent les images. La compréhension est donc plus compliquée.

Il est donc préférable pour une meilleure lecture pour tous, de placer l'image sur la même ligne que les propos qu'elle illustre.

Commentaires (1)

haris-francis
  • 1. haris-francis (site web) | 20/02/2017
Merci!

Ajouter un commentaire