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.

Ce site vous a plu ? Visitez aussi :  et 

-