Accueil > graphisme > equilibrer-du-contenu

{ Mise en page : équilibre du contenu }

Introduction

Dans ce tuto, nous allons utiliser un exemple de mauvaise gestion de la mise en page :

Exemple 1

Ce site est loin d'être le pire des exemples, c'est pourquoi, par avance, nous nous excusons auprès de ses auteurs.

La mise en page est un tout : le contenu doit faire partie de la page. Ce n'est pas juste un truc posé là, parce qu'on n'a pas le choix.

Alors, comment faire ?

Dans l'exemple 1, le problème principal est que le contenu s'adapte aux dimensions de la fenêtre. Le grand défit d'une Full page, c'est le nombre de tailles d'écran différentes. Il faut donc penser aux nombreuses personnes ayant des Nets books et dont les écrans sont souvent en dessous des 13 " habituelle (c'est pourquoi on déconseille, en général, ce genre de mise en page ). Du coup, le contenu a l'air de se promener chaotiquement dans la page et le manque de structure de cette dernière nous fait rater les informations essentielles. L'utilisation d'un tableau pour la structure de la page est pour beaucoup dans le manque de lisibilité, ce dernier limitant les possibilités de mise en page.

Exemple 2

Exemple 2

Avec une page bien délimitée, on oblige le regard à se concentrer sur le contenu. Ne pas noyer la page d'accueil sous une tonne d'informations, soit aller vers l'essentiel, invite généralement l'internaute à visiter le reste de votre site.
Dans l'exemple 2, la mise en page permet à l'œil de survoler une première fois le contenu, le visiteur fait alors un tri sélectif ! Il va d'abord se concentrer sur les informations qui lui paraissent importantes. Ces informations sont généralement les titres et les images du haut de page. D'où l'importance d'avoir des titres bien visibles.

Important : plus une page est haute, moins les informations de bas de page sont consultées. Pensez donc à utiliser des " ancres " et autres liens internes.

Structure et confort, le design du web

Penser confort des yeux, c'est, par exemple, équilibrer sa mise en page et aérer son texte.
Dans l'exemple 1, les textes sont bien aérés, mais, l'équilibre n'est pas au rendez-vous. On ne sait pas qu'elle est l'information la plus importante entre celle de droite et de gauche. Cela crée une contradiction entre l'information et son positionnement, et, du coup, une gêne visuelle.
La confusion est accentuée par le manque d'espace entre les colonnes, ainsi que leurs tailles identiques. La dynamique, présente, est donc déstabilisée.
Ici, tous les textes sont en gras. Le gras permet de surligner une information, il ne faut donc pas en abuser. La confusion continue, puisque l'œil ne peut pas différencier les différents types d'informations.

Important : Les couleurs sont un bon moyen de différencier les informations. Mais il faut éviter d'avoir plus de 3 couleurs différentes. Il est conseillé aussi de bien les définir : Titres, liens, textes.

Enfin le menu est le lien entre vos pages ! évitez de mettre qu'une image de fond, si ce n'est que pour le référencement. Google, comme tout moteur de recherche, référence mieux les textes. Si vous voulez être sûr de référencer toutes vos pages, utilisez des liens textes !

Attention : ici la page continue plus bas. Seulement l'espace entre les informations du haut et celles du bas est trop important. Attention donc, ce n'est pas parce qu'il y a une " scroll bar " que tout le monde pensera à regarder jusqu'en bas !

Conclusion

Dans l'exemple 2, nous avons utilisé la dynamique déjà présente pour rééquilibrer le contenu. Nous avons utilisé le gras pour surligner les informations importantes, aéré les colonnes et modifier la structure pour n'avoir que des balises " div ". Nous avons aussi mis des titres. Ils sont là pour la structure, mais aussi pour le référencement ! Pensez aussi que vos images n'ont pas besoin d'être grandes. Il suffit d'utiliser des " LightBox " pour les afficher plus grandes. Vous gagnez en clarté et en temps de chargement.

Si vous avez du mal avec la mise en page, nous vous recommandons le livre d'Isabelle Canivet, rédactrice Web, " Bien rédiger pour le Web… " (Voir : Lecture pour WebDesigner).
Si des détails vous échappent, ou si vous avez des questions, n'hésitez pas à laisser un commentaire !