Typographie et mise en page sur le Web

Support papier et support écran Certains sites Web proposent du contenu sous forme de très longs textes plein écran. Ces livres transposés en document Web sont peu efficaces. La lecture d'un livre est en effet très différente de celle de pages sur écran.

Support papier et support écran Source : "Guide de conception pédagogique et graphique d’un site éducatif sur le réseau Internet" (http://www.cpm.ulaval.ca/GUIDEW3EDUCATIF/) Au sein d’un même site D’un site web à l’autre

Support papier et support écran La page-écran illustre une réalité parcellaire et segmentée ; ce n'est pas une page dans un livre. L'information doit être condensée, synthétisée et davantage structurée.

Critères d'utilisation du texte Typographie Pas plus de 2 polices différentes Police à empattement ou sans empattement ? Définition de l’empattement (serif) Arial Times New Roman 20 points 20 points 28 points 28 points Abcgy Il Abcgy Il

Critères d'utilisation du texte Typographie De préférence des polices sans empattement (sans serif), en général plus lisibles à l’écran Une meilleure typographie pour les écrans Des polices standards, ou du texte dans un fichier image <FONT FACE= “ Verdana, Arial… ”>Texte</FONT> Typefaces Taille minimum de 4 mm (environ 12 points)

Critères d'utilisation du texte Typographie Mixer majuscules et minuscules : la lecture de phrases en majuscules est 20% plus lente Type and legibility Pour mettre en valeur, éviter l'italique, préférer le gras Typographic emphasis (David Siegel) Éviter le soulignement (héritage des machines à écrire), qui masque les jambages des minuscules Sans soulignement, c’est tellement mieux ! Respecter les règles de typographie française !

Critères d'utilisation du texte Couleur Avantage : pour signaler des mots ou parties de textes importants Inconvénient : perturbe la stratégie de balayage

Critères d'utilisation du texte Couleur Si le texte est susceptible d’être imprimé, préférer le contraste positif : foncé sur fond clair Un texte en négatif (caractères clairs sur fond sombre) paraît souvent plus petit qu’il n’est : compenser en choisissant une taille de caractères plus importante et des lignes plus courtes

Critères d'utilisation du texte Texte animé Affichage dynamique : guide l'ordre de lecture Prévoir un temps d'affichage suffisant et un moyen de contrôle (stop, marche) Clignotement : seulement pour message d'alerte, doit pouvoir être annulé Bas de casse : jeux en tous genres avec des lettres, art ASCII...

Critères d'utilisation du texte Gestion de l'espace Se limiter à une idée ou notion par page-écran Ne pas dépasser 10 à 12 mots par ligne ou 50 à 60 caractères

Mise en page Alignement Aligner le texte à gauche de préférence La justification à droite apporte plus de rigueur, mais la non-justification à droite améliore la lisibilité. Choisir un alignement et l’appliquer à la page entière. Ne pas combiner différents types d’alignements. La répétition d’un même alignement renforce l’apparence d’une page. Utiliser des tableaux pour positionner les différents éléments (en désactivant les bordures : BORDER=0)

Mise en page Proximité Tous les éléments d’une mise en page entrent en relation les uns avec les autres. Deux éléments rapprochés semblent ainsi avoir une relation d’appartenance l’un envers l’autre. Bien souvent, sur les pages Web, plusieurs éléments, comme orphelins, sont relégués à l’écart sans raison ; d’autres affichent des relations inappropriées. Par exemple, dans certaines pages, un sous-titre est plus proche du texte placé au-dessus que du texte auquel il fait référence, une légende est éloignée de l’illustration qu’elle est censée décrire, etc... Regrouper ensemble les éléments connexes.

Mise en page Répétition Répéter les éléments susceptibles de lier toutes les pages d’un même site. Les boutons de navigation sont des éléments qui apportent une homogénéité visuelle et fonctionnelle à l’ensemble. Mais le choix des couleurs, les illustrations, le format, la typographie, etc. peuvent également être des éléments répétitifs qui permettent d’unifier l’ensemble d’un site. Exemple : Url’s Internet Cafe

Mise en page Contraste Jouer sur le contraste. Le contraste est ce qui attire le regard sur une page. Les éléments contrastés guident l’œil, hiérarchisent les informations, permettent de survoler un volume important d’informations et d’y puiser les données recherchées. Le contraste peut être produit par un formatage gras, des caractères plus grands, un style totalement différent, mais aussi par un jeu de couleurs, des graphiques miniatures, une organisation de l’espace… Pour être efficace, le contraste doit être marqué. Créer un point focal. Quelque chose doit tenir lieu de force dominante, à partir de laquelle les autres éléments sont structurés de manière hiérarchique. Ce focus est créé en jouant sur le contraste.

Mise en page Concept graphique Élaborer un concept graphique : gestion des horizontales et des verticales dans l’espace de la page écran Le rendu visuel doit composer un équilibre entre les verticales et les horizontales afin de produire une harmonie formelle perceptible au regard. Bannir les règles horizontales qui gênent la progression visuelle (balise <HR>)

Mise en page Concept graphique Exemple : une « forme en L » permet d ’ajuster géométriquement une impression d’ouverture (espace non délimité) et de fermeture qui est donnée par la présence des barres, des angles, de l’épaisseur des traits. Web style guide : pattern and page design

Mise en page Concept graphique Deux erreurs à éviter : Une structure de présentation qui n'est pas "accrochée". On a alors l'impression visuelle que le texte flotte sur le support. Nous sommes dans ce cas en présence d'un concept graphique pas suffisamment développé qui ressemble à une mise en page ordinaire d'un texte sur une feuille de papier. A l'inverse, un concept graphique trop développé peut donner l'impression d'une certaine lourdeur. Dans ce cas, le texte est enfermé dans des rubriques qui sont trop étanches (encadrements trop soulignés, lignes trop épaisses).

Les feuilles de style CSS : Cascading Style Sheets (feuilles de style en cascade) Permettent de séparer le contenu d’un site Web de sa mise en forme. Autorisent des modifications d’affichage sans passer par l’édition du code HTML. Permettent de changer l’aspect de tout le site en ne modifiant que quelques lignes de code dans un unique fichier.