Mise en page des sites Web
Visez l'élégance et la clarté
L'art de la mise en page est né bien avant Gutemberg, lorsque des moines recopiaient des textes sacrés avec amour et application.
Cette longue expérience a permis de dégager des règles universelles qui s'appliquent aussi bien aux pages Web qu'aux manuscrits d'autrefois.
Cette page s'inspire d'un article de RankSpirit : Mise en page des sites Web
Sélection de liens concernant la mise en page
Comment écrire
des titres qui tuent
Dans son style percutant et particulièrement parlant,
Jan nous dresse une liste de propositions destinée aux
rédacteurs en panne d'idées.
Les titres...
question de genre
Cette liste complètera utilement celle proposée par Jan.
Avec ça, l'inspiration ne pourra plus vous manquer.
Mettre en forme le texte pour plus de lisibilité.
Une foule de réflexions sur la présentation d'un texte à l'écran.
Exemples
de mise en page Web
Liste de sites présentant des mises en pages originales ou
intéressantes. Cette liste pourra vous inspirer lors de la
création de la structure générale de votre site.
Typographie
et mise en page
La typographie et l'art d'utiliser les bons lettrages (choix des
polices, des tailles, des styles, etc.) Voici une synthèse des
règles essentielles à respecter.
Règles de typographie
Un inventaire particulièrement complet des règles typographiques à
respecter.
CSS et mise en page
"CSS-Faciles" aborde les aspects techniques de la mise en page
structurelle par CSS.
Comment organiser
son contenu
Redaction.be
La structure des pages
Vos pages doivent être conçues comme des pyramides. Ces pyramides vont fonctionner à la façon d'un entonnoir qui va guider les lecteurs dans vos pages.
Le titre : Clair,
court, explicatif, accrocheur. Un titre absent ou peu intéressant vous
fera perdre plus de la moitié de vos lecteurs.
Le titre est donc l'élément essentiel de vos pages. Il
peut être accompagné d'un sous-titre qui précisera
l'objectif de la page. Notre colonne de droite propose plusieurs sites
qui vous aideront à conçevoir des titres "accrocheurs".
Le chapeau : Situé
sous le titre (ou sous le sous-titre si vous en avez un). En
caractère gras, ou d'une taille légèrement
supérieure à celle du texte, le chapeau permet aux
lecteurs de vérifier que le contenu proposé correspond
bien à ce qu'ils recherchent. Il résume votre page en 2
à 5 lignes. Informatif et/ou intriguant, ce texte doit
être attirant ! Si le chapeau contient deux idées,
scindez-le en deux paragraphes courts et rapides à lire. Ou
mieux, ne conservez qu'une idée.
Les paragraphes : la
règle d'or est : une idée = un paragraphe. Demandez-vous
toujours si vos paragraphes ne pourraient pas être
ré-ordonnés de façon plus logique ou plus facile
à suivre. Supprimez sans état d'âme les paragraphes
qui n'apportent rien à votre propos, ou déplacez-les dans
une autre page.
Les
inter-titres : l'attention
d'un internaute s'évapore plus vite que l'essence. L'inter-titre
vous permet de rattraper un lecteur qui allait quitter votre page.
Placez un inter-titre tous les 4 à 10 paragraphes. Cette
habitude vous permettra de mieux construire vos pages et de regrouper
vos paragraphes en groupes homogènes.
Les jokers
Faites plaisir à vos lecteurs. Voici quelques idées qui vous permettront de mettre un peu d'animation et de gaité dans vos pages :
Les images : Illustratives,
humoristiques, explicatives,
surprenantes : tous les coups sont permis !!! Une image par page permet
de reposer l'oeil de vos lecteurs et de capter leur
intérêt. Mais attention au poids !!! Vos images devront
être petites mais parfaitement lisibles. Plus une image est
simple, moins elle "pèsera" lourd et mieux elle jouera son
rôle d'illustration. Le site RankSpirit propose une liste de
sites offrant des images libres de droit.
Les légendes d'images : Si
votre image est illustrative, il faut absolument lui attribuer une
légende (petit texte de quelques mots figurant sous l'image). Les
légendes sont souvent lues
par les visiteurs pressés.
Les listes :
Les thèmes ou idées organisées sous forme de listes sont plus
facilement lues et comprises par vos lecteurs. Le texte d'une liste est
souvent
plus synthétique (plus court). Il vous obligera à structurer votre
pensée. Les internautes adorent les
listes. Faites leur plaisir !
Les
encadrés : Les encadrés permettent de
"casser" les mises en page trop strictes et leur apportent un
côté vivant. Il a souvent un fond légèrement plus
foncé que le reste de la page. Il pourra contenir un
petit texte amusant ou anecdotique, un complément
d'information, une liste de liens en rapport avec le sujet ou une
bibliographie.
Design "fluide" ou design fixe ?
On appelle "design fluide" les pages dont la largeur s'adapte à celle de la fenêtre. Ce site est un exemple de réalisation en design fluide. A contrario, le design fixe inscrit la page dans une largeur invariable (généralement 800 pixels, afin de rester compatible avec les écrans les plus anciens).
Avantages du design fluide :
Respect
de l'utilisateur : on
respecte la liberté de l'utilisateur qui peut adapter le format
à ses préférences. En augmentant la largeur de la
page, le contenu "remonte" et diminue le besoin d'utiliser l'ascenseur
vertical.
Pas
de place "perdue" : toute la largeur de la fenêtre est
utilisée.
Possibilité
d'augmenter la taille des caractères : sur
un design fixe, le contenu est "coincé" dans une largeur
prédéfinie qui rend illisibles les textes dont la taille
a été trop agrandie. Opera est le seul navigateur qui
évite cet inconvénient.
Inconvénients du design fluide :
Complexité
du design : la
mise en page varie énormément en fonction de la largeur
de la fenêtre. Cela peut poser des problèmes techniques
difficiles à résoudre. On peut tenter de gérer
cette difficulté en utilisant exclusivement la
propriété CSS "float" pour positionner les images et les
encadrés dans la page.
Largeur
de colonne variable : un
texte qui occupe toute la largeur d'un écran peut être
très fatiguant à lire, car l'oeil doit parcourir de
grandes distances pour analyser toute la ligne. La largeur d'une
colonne doit normalement être calculée pour contenir 10
à 15 mots maximum. Cette contrainte est impossible à
respecter strictement dans un design fluide ou les largeurs de colonne
sont variables.
On peut tenter de minimiser cet inconvénient à l'aide de codes javascript qui "corrigent" les largeurs de colonne trop importantes. C'est le cas de ce site qui ajoute une bande verticale décorative à la page quand la largeur de fenêtre dépasse 1200 pixels. Cette bande à pour effet de diminuer la largeur du bloc contenant le texte principal.
Solution idéale ?
La solution idéale à ce dilemme consiste probablement à réaliser plusieurs designs correspondant aux différentes largeurs d'écrans existants sur le marché et à faire basculer l'affichage d'un design à l'autre en fonction de la largeur de la fenêtre.
La mise en place d'une telle solution représente hélas un gros investissement en temps et une solide maîtrise technique pour fonctionner dans tous les cas de figure.
Les concepteurs de pages Web doivent en tout cas prendre en compte les différents formats d'écran à partir desquels les pages seront consultées. Avec l'accès au Web à travers les téléphones portables et les PDA, ce problème est de plus en plus critique.