Le problème principal d’une personne qui désire se mettre à internet, c’est que trop souvent elle s’intéresse plus à la technologie utilisée qu’au but final.

Ce qui fait qu’un site est lisible, agréable, ce n’est pas le choix entre tel ou tel langage, telle ou telle base de données, tel ou tel CMS ou encore tel ou tel effet de style plus ou moins à la mode.

Ce ne sont que des outils au service du rendu, au service de votre document.

Nous allons donc, pour l’instant, nous focaliser sur les principes de base de la mise en page, bien qu’ils aient été initialement pensés pour la communication papier aussi appelée « tradi » (pour traditionnelle), on peut sans aucun problème les transposer à la mise en page Web, moyennant bien sur quelques petits agencements.

Je ne vais pas entrer dans les techniques propres à la mise en page pour le web (partie code) pour le moment, cela viendra surement un peu plus tard dans d’autres articles de la série.

Voyons maintenant les éléments constituants un document :

Le texte :

Le texte donne à un document ce que l’on appelle le « gris typographique ». En gros, si vous prenez du recul (physiquement parlant) pour regarder un document, au bout d’un moment vous n’apercevrez plus qu’une « masse » grise.

Ce « gris typographique » sera plus ou moins harmonieux en fonction de différents critères :

• La police utilisée
• La taille de la police
• L’espace entre les lettres
• L’espace entre les lignes
• L’espace entre les mots
• Texte italique ou non
• Texte en gras ou non
• L’alignement du texte
• La justification du texte

Comme vous le voyez je n’ai pas utilisé de gros mots comme « approche », interlignage, graisse ou autre, le but ici est que les concepts soient immédiatement accessibles à tous.

Des réglages fins de ces critères vous permettront d’obtenir des blocs de textes plus ou moins harmonieux, faites des tests, car s’ajoutent la dessus d’autres éléments difficilement contrôlables hors d’un projet précis :

• La longueur de votre rédactionnel.
• La taille du bloc de texte (en général on parle de largeur).

Les Blancs :

Le blanc, c’est la pause, la respiration, la coupure dans la lecture.
Le blanc c’est l’élément structurant de votre document. Des blancs trop forts écraseront les contenus, des blancs trop faibles fatigueront l’oeil du lecteur, pas simple.

En faisant un raccourci rapide, le blanc c’est tout ce qui n’est pas contenu, que l’on parle de marges de documents, d’espaces entre « gris typographiques », voir d’espaces à l’intérieur d’un « gris typographique » (saut de paragraphe).

Vous avez maintenant vos deux éléments de base.

C’est tout? Ou sont les images? Quid des couleurs? Des graphismes? De l’iconographie?

Ca c’est pour plus tard, commencez par vous amuser à tester le rendu visuel d’un document lambda (par exemple une page d’un livre).

Un petit exercice :

Utilisez un logiciel de traitement de texte ou de mise en page.

Vous pouvez générer du faux texte en utilisant un générateur en ligne : http://www.lipsum.com/

Créez un texte à trois paragraphes.
Créez un nouveau document avec le logiciel choisi et copiez y votre faux texte.

En premier, changez la police du texte (vous pouvez même en utiliser une différente pour chaque paragraphe, c’est à proscrire en terme de mise en page, mais ça vous fera gagner du temps).

Faites joujou avec vos textes, changez les espacements des lettres, des mots, les tailles des polices, bref tout ce dont je vous ai parlé dans le paragraphe sur le texte.

Changez les marges et observez l’impact sur votre document.

Changez la hauteur des sauts de paragraphe.

Puis passez votre document en mode paysage. Aaargll ça change tout.

Une fois passé en mode paysage, construisez un semblant de page web, vous pouvez utiliser pour cela les tableaux de votre logiciel de traitement de texte ou les blocs de votre logiciel de mise en page.

Première version :

• Un titre en haut de page. (titre du site)
• Un sous titre. (titre de la page)
• Un « menu » horizontal contenant 6 liens : lien 1, lien 2, ou ce que vous voulez.
• Vos trois paragraphes de texte
• Un menu de bas de page (reprenez le premier menu)

Une fois ce document réalisé, refaites joujou avec tous les réglages possibles, observez les mutations de votre document, apprenez à maîtriser le rendu.

Deuxième version :

• Un titre en haut de page. (titre du site)
• Un sous titre. (titre de la page)
• Un « menu » Vertical à droite du texte contenant 6 liens : lien 1, lien 2, ou ce que vous voulez.
• Vos trois paragraphes de texte

Même chose que pour l’exercice précédent.

Pour un meilleur rendu visuel, vous pouvez utiliser les options de prévisualisation fournies avec la plupart des logiciels, pas la peine d’imprimer votre document à chaque modification.

Le temps que vous testiez tout ça, j’aurais surement avancé dans la suite de mes articles sur les bases de la mise en page appliquées aux sites Internet.

Une dernière chose, il faut ben parler technique à un moment ou à un autre, tous ces réglages, qu’ils soient au niveau du texte ou pour la gestion des blancs, sont réalisables en utilisant des spécifications CSS appliquées au code HTML. Si vous n’y connaissez rien, allez faire un tour sur le site d’Alsacréations, il y a de nombreuses sources et de nombreux tutoriels.

A bientôt pour la suite.

EDIT du 13/12/2006 : Merci à Stéphane de Simple Entrepreneur de découvrir des outils en ligne pour nous.

Donc voici trois outils en ligne en ligne pour tester des polices, pour des commentaires allez voir l’article de Stéphane :

• Typetester
• Font Tester
• Typeviewer

Les articles de la série:

• Quelques notions de mise en page : Les bases, du texte et des blancs
• Quelques notions de mise en page : Les couleurs et les contrastes
• Quelques notions de mise en page : images et couleurs

D’autres sont à venir.