Mise en page d’un blog : 1, 2 ou 3 colonnes ?

rédigé par Jean-Baptiste, le mai 11, 2013

Nous venons de régler les question de l’organisation de l’information et de la navigation au sein de votre blog, intéressons-nous dès à présent à la mise en page globale de votre blog.

Lorsque vos lecteurs accéderont à un de vos articles sur leur ordinateur ou sur leur mobile, comment vous assurer qu’ils arriveront à bien lire l’article en cours et à découvrir d’autres articles intéressants ?

 

Grands principes de mise en page communs à tous les blogs

 

Avant de vous demander combien il vous faudra de colonnes pour gérer les espaces contenus et barre latérale, j’ai essayé de résumer en une image quelques grands principes de mise en page que l’on retrouve sur les blogs et sur pas mal de sites.

 

Une zone de contenu lisible

 

La zone de contenu contient  le texte de vos articles. Il faut donc vous assurer que la lisibilité de cette zone est parfaite en terme de typographie et de mise en page. Respectez donc ces 3 règles fondamentales :

  1. Une taille de police > 12 px
  2. On lit mieux sur un fond blanc avec police de caractère noire
  3. Il ne faut pas que l’on compte plus de 100 caractères par ligne pour préserver un confort de lecture optimal

 

Une barre latérale > 300 pixels en largeur

 

La barre latérale située à gauche ou à droite de la zone de contenu contient la navigation par tags et par rubriques, vos derniers articles, et peut-être un espace publicitaire (le format d’affichage standard sur le web est le 300×250, voilà pourquoi je tiens à une largeur > à 300 px).

 

Tous ces zones doivent être centrés et < 1000 pixels en largeur

 

On lit encore beaucoup les blogs derrière un ordinateur : 88 % des connexions à mon blog se font derrière un ordinateur, 12 % derrière une tablette ou un mobile.

 

Aujourd’hui, les écrans d’ordinateur  avec des résolutions d’écran inférieures à 1024 pixels doivent être assez rares (moins de 1 % je pense). En revanche, nous avons encore pas mal de 1024×768 en circulation (au moins 10 %), mais surtout des résolutions > ou = à 1280 pixels.

 

 

Il faut arriver à contenter tous ces publics, d’où l’idée d’avoir un design centré qui ne fasse plus 1000 pixels en largeur. Ceux qui auront des résolutions d’écran 1920×1080 ne verront pas ainsi tout votre site complètement à gauche  et ceux qui sont à 1024×768 pourront encore vous lire sans avoir à scroller horizontalement (chose que plus personne ne fait !).

 

Faut-il choisir une mise en page à deux ou trois colonnes ?

 

1 colonne pour la sidebar, 1 colonne pour le contenu

 

Personnellement, je vous conseillerai  plutôt d’opter pour une mise en page classique à 2 colonnes.  Une colonne pour mettre en avant le contenu, une colonne pour mettre en avant la barre latérale (catégories, tags).

 

Pour savoir si vous devez mettre à droite ou à gauche la barre latérale, je vous renvoie à mon précédent article.

 

Si vous avez besoin de 3 colonnes

 

Vous avez décidé d’optimiser au maximum la lisibilité de votre zone de contenu : réduction de la largeur pour avoir 50 à 75 caractères par ligne. Il vous reste donc pas mal d’espace à gauche ou à droite, et ça pourrait être l’occasion de positionner 2 colonnes au lieu d’une dans la barre latérale pour remonter vos derniers articles au même niveau que vos catégories

On arriverait alors à ces 2 types de disposition qui paraissent tout à fait pertinentes (il reste au-dessus des 2 colonnes un espace > 300 px si besoin pour la pub) :

 

Evitez d’avoir une colonne à gauche et une colonne à droite du contenu

 

Imaginez ce type de mise en page pour vos visiteurs.

 

Lors de chaque visite, votre lecteur se demandera s’il faut regarder à gauche ou à droite pour naviguer dans les catégories. La colonne de gauche aura plus d’impact que celle de droite (sens de lecture), et tout ce qui se trouvera à droite sera ignoré.

 

Une mise en page à une colonne seulement sur mobile

 

12 % de connexions mobiles / tablettes chez moi, soit un peu plus que les 1024×768, il ne faut pas bien-sûr négliger ces personnes ! Sur ce type de terminaux, il faut basculer en mise en page une colonne. 2 techniques permettent de le faire :

  1. Le reponsive web design
  2. Un plugin wordpress WP-Touch

Personnellement, j’ai opté pour la 2ème technique plus facile à mettre en oeuvre  quand on part d’un design prévu pour les écrans PC. La 1ère technique (responsive web design) étant la plus propre et la plus satisfaisante en terme de rendu et de performance, si je devais recommencer, je retoucherai mon template à partir d’un design responsive.

 

Mon frère (expert WordPress) a fait ça très bien sur son blog. Je vous invite à utiliser son thème « thaim » pour en juger par vous même et pour l’adapter à votre design.

 

Si on est sur un écran PC > 600 px, on a un affichage sur 2 colonnes

 

 

Si on bascule sur un terminal tablette / mobile < 600 px, on passe à un affichage 1 colonne

 

 

 

Évitez les affichages 1 colonne sur 1000 px de largeur, à moins d’avoir une très grande police, car au delà de 100 caractères par ligne, le texte devient très difficile à lire pour l’oeil humain.

 

Jean-Baptiste
Suivez-moi

Jean-Baptiste

Responsable marketing digital chez Orange le jour. Blogueur, Auteur, Entrepreneur la nuit,j'ai plus de 10 ans d'expérience sur Internet en gestion de projets, création d'audience, monétisation.
Jean-Baptiste
Suivez-moi


Tu veux gagner de l'argent avec ton blog ?
Lis tout de suite BlogBuster dispo sur Amazon, Kobo, Fnac, iTunes pour 3,99 €

blogbuster ebook

Nous te recommandons :


Categories and Tags:  Ergonomie

Commentaires (1)

 

  1. Amanda dit :

    Trés bon article bien expliqué, merci !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *



Deviens toi aussi un YouTubeur


Rechercher


Recevoir Blogbuster par email

    Ajoutez votre email :





BlogBuster, le livre


blogbuster ebook

Derniers Commentaires

  • Sylvain { Bonjour J'espère que vous allez voir mon message J'ai acheter votre livre pour apprendre le monde du blogging, d’ailleurs je l'ai trouver génial :) Je... } – Nov 20, 4:52
  • Seekat { Bonjour, Petit conseil supplémentaire : n'hésitez pas à faire un peu de teasing auprès de votre communauté avant la sortie de votre vidéo. Cela vous... } – Nov 09, 4:33
  • sg { Bonjour Actuellement en auto-entreprise, je voudrais mettre en place un système de cagnotte type cagnotte en ligne afin que les contributeurs puissent m'aider à payer... } – Nov 08, 6:14
  • fred { merci bcp sa fait longtemps que je cherchais quelqu'un qui pouvais m'explique sa merci bcp } – Nov 08, 8:16
  • Habib { Bonsoir Merci pour l'article, très bien structuré. C'est quoi le titre de livre de Guy Kawasaki que vous avez recommandé dans l'article. très cordialement } – Nov 07, 2:05
  • Jean-Baptiste { Salut @myrakiel je mets déjà régulièrement à jour cet article ;-) Salut @patrice il faut déclarer à Prodouane toute recette venant de l’UE (hors France).... } – Oct 29, 6:46

Catégories


Derniers articles et tutos


Derniers plugins ajoutés


Trouver un plugin


Mentions légales - Contact