De nombreuses conventions existent sur Internet, pas besoin d’être un développeur Web pour se flatter de les respecter. Il s’agit souvent de quelques petites règles à suivre qui rendent l’ensemble d’un site plus agréable à l’œil, plus facile à naviguer et d’aspect beaucoup plus professionnel!

Voici notre palmarès de 7 des plus importantes règles de mise en page.

1. Garder le soulignement seulement pour les hyperliens
2. Éviter la surcharge de la mise en forme
3. Aligner le texte une fois pour toute
4. Le gras, les majuscules, l’italique, quelle différence?
5. L’espace vide est aussi un caractère
6. La place des images
7. Les .gif animés

1.

Nous sommes parfois tentés de souligner nos titres ou les éléments importants d’un texte. Cela est un reliquat du temps où c’était la seule manière de mettre certains mots en évidence lorsque l’on travaillait à l’aide des machines à écrire. Non seulement cet usage tombe en désuétude dans les documents imprimés, mais de plus, l’Internet s’est développé en utilisant le soulignement pour signifier une portion de texte cliquable (hyperlien), permettant de naviguer vers une autre page Web. En contrevenant à cette convention, vous risquez de frustrer les utilisateurs qui tenteront, sans succès, de cliquer sur le texte en question.

2.

Lors du développement de vos maquettes et lors de la création de vos gabarits de page, Nmedia Solutions s’assure que le contraste du texte soit suffisant et programme l’affichage automatique de cette couleur dans vos pages.

Nmedia Solutions fixe également la taille du texte et la police de caractère.

Vous n’avez donc pas à les modifier dans Altitude, à moins de vouloir mettre certaines portions de texte en évidence. Dans ce cas, pertinence et parcimonie s’imposent.

Résistez à la tentation d’utiliser beaucoup de couleur, de gras, etc. : en appliquant plusieurs attributs différents et/ou en grande quantité dans une page, le texte devient difficile à lire (ou devient carrément agressant pour le lecteur); les éléments vraiment essentiels se noient dans la masse; et, encore pire, le site prend un aspect amateur et déglingué qui nuit à l’image, au sérieux et à la crédibilité de l’organisation.

Posez-vous comme question : « Est-il vraiment pertinent que je mette telle ou telle partie de texte en évidence? Est-ce absolument nécessaire par rapport au cœur du message qui est à véhiculer? Est-ce que ça va apporter quelque chose au lecteur? » Restreignez-vous.

Exemples d’utilisations pertinentes et ciblées de la couleur

• Un sous-titre : choisir une couleur assez foncée et faisant écho aux couleurs du design;
• Un chapeau de page : choisir une couleur plus tendre pour faire ressortir le texte sans ombrager le reste du contenu de la page;
• Une légende de photo : choisir une couleur plus terne (gris) qui laisse la lisibilité aux éléments plus importants et à la photo elle-même;
• Un avertissement : choisir une couleur chaude (rouge) pour faire en sorte que le lecteur se sente interpellé et qu’il sente une urgence ou un danger. N’en abusez pas, cela pouvant devenir très vite agressant (surtout le rouge).

Exemples d’utilisations du jeu sur la taille du texte

• Un sous-titre : choisir une taille de 14pt
• Un titre de 3e niveau : choisir une taille de 12pt et mettre en gras
• Une légende de photo : choisir une taille de 9pt

En fait, définissez-vous une « recette » pour chacun des niveaux de titres, et appliquez-la à tout votre site. Cette structure logique facilitera la lecture et conférera une meilleure crédibilité à votre site.

3. Aligner le texte une fois pour toutes

L’alignement dans le corps du texte doit être constant sur tout le site : toujours à gauche ou toujours justifié. Cet alignement de base est déterminé dans le gabarit, vous ne devriez donc pas avoir à le paramétrer sur chaque page.

Notez que, d’une part, l’usage de la justification – qui faisait presqu’office de loi depuis l’avènement du traitement de texte assisté par ordinateur – tend à tomber en désuétude. D’autre part, soyez conscient qu’à l’écran un texte justifié peut parfois avoir l’air lamentable à cause de trop grands espaces entre les mots.

Vous pouvez tout de même modifier l’alignement dans quelques cas précis.

Aligner au centre

Évitez de centrer de gros paragraphes de texte, cela rend la lecture très difficile. Le centrage est réservé aux colonnes de texte très courtes et étroites.

Exemples d’alignements au centre pertinents:

• Centrer une image avec son titre et sa légende
• Centrer les éléments d’une colonne d’un tableau de données
• Centrer le titre d’un tableau

Aligner à droite

L’alignement à droite est aussi utilisé de manière très parcimonieuse.

Exemples d’alignement à droite corrects :

• Liens « Pour en savoir plus », « Suivant », « Suite », etc., qui amènent le lecteur « plus loin »;
• Nombres et valeurs monétaires d’un tableau. Cela permet d’aligner les décimales;
• Nom de l’auteur d’une citation ou d’un texte;
• Paragraphe court lié à une image qui serait placée à droite dans la page;
• Éléments de certaines colonnes dans un tableau, lorsque c’est pertinent. Par exemple : la colonne de gauche d’un formulaire qui contiendrait les questions, ce qui rapproche ainsi les questions (colonne de gauche) de leurs réponses respectives (colonne de droite) et en facilite la lecture.

4. Le gras, les majuscules et l’italique

Le gras

Pour faire ressortir les mots clés les plus importants, qui vont guider le lecteur et l’aider à faire la synthèse des informations, on peut avoir recours au gras. Évitez cependant de mettre en gras de longs paragraphes, cela alourdit les pages sans faciliter la lecture. Le gras peut aussi être utilisé pour la hiérarchisation des titres.

Les majuscules

En ce qui concerne les majuscules, elles peuvent également être utilisées pour écrire des titres et attirer l’attention, mais elles deviendront très agressantes et illisibles sur de longs textes. Pensez également que, pour mettre de l’emphase, vous pouvez utiliser les signes de ponctuation (!, ..., ?).

L’italique

L’italique n’est pas une mise en forme de style, mais un formatage sémantique. Il ne doit pas servir à « faire beau » mais à refléter la nature des mots écrits. Voici une petite citation de chez Wikipédia expliquant l’utilité de l’italique dans la langue française :

« En typographie française l'italique est principalement employée pour les passages en langue étrangère — par rapport à la langue principale du texte —, aux citations de mots isolés, aux noms d'œuvres d'arts, aux notes de musique, aux mots et caractères autonymes (employés en tant que mots ou en tant que caractères : « le mot mot », « mettre les points sur les i »). Certaines parties du paratexte sont, selon les éditions, écrites en italique. »

http://fr.wikipedia.org/wiki/Italique

Pour plus de détails sur les règles d’usage de la typographie, nous vous invitons à consulter Le Ramat de la typographie par Aurel Ramat; ou encore Le français au bureau de l’Office de la langue française (Publications du Québec).

5.

L’espace vide, dans l’imprimerie comme dans l’informatique, constitue un élément de typographie à part entière. Il faut lui donner la place qu’elle mérite.

N’ayez pas peur de faire de nombreux paragraphes pour bien délimiter les idées principales de vos textes. Faites des sauts de ligne manuels après des éléments de listes afin de bien distinguer les éléments. Lorsque vous utilisez des tableaux, mettez une marge interne d’au moins 3 pixels. Bref, laissez votre page respirer, elle n’en sera que plus agréable à visiter.

N’essayez pas à tout prix de remplir les vides avec des photos ou des dessins de moindre qualité. Les images que vous utilisez doivent servir à la communication en apportant de l’ambiance ou de l’information supplémentaire.

6.

Puisqu’on parle des images, voici quelques petits trucs concernant leur positionnement dans les pages.

Positionnement d’image à gauche et à droite du texte

Pour positionner une image à droite ou à gauche du texte, insérez d’abord un tableau de deux colonnes, avec une marge interne. Positionnez votre curseur dans l’une des deux cellules, insérez votre image. Positionnez votre curseur dans l’autre cellule, insérez votre texte. Le tour est joué!

Positionnement de plusieurs images côte à côte

Pour positionner plusieurs images, créez un tableau de plusieurs colonnes. Positionnez votre curseur dans chacune des cellules pour y insérer les images.

Faites attention à quelques petits détails pour maximiser l’apparence de votre page :

• Assurez-vous que vos images ont la même ou sensiblement la même taille. Une grosse image à côté d’une toute petite génère un mauvais contraste.
• Regroupez les images selon leur grandeur ou leur format. Positionnez sur la même ligne les images de même format.
• Créez une symétrie dans l’organisation des photos. Si deux photos sont à dominance rouge, et qu’une est noire, on préfèrera mettre la noire au centre. Cette symétrie horizontale donnera un aspect balancé à la page.

7.

Il fut un temps où la capacité d’afficher des images sur Internet constituait une véritable révolution technologique et nous vîmes bientôt pulluler une multitude de petites animations visuelles très simples, des images de type « .gif animés ». L’engouement était total, chaque site en contenait son lot : petites enveloppes se cachetant et se postant d’elles-mêmes, oiseaux voletant, etc.

Sachez que ce type d’animation est maintenant généralement perçu comme très agaçant et ne s’utilise strictement plus dorénavant sur les sites de calibre professionnel.

Elles peuvent tout au plus parfois convenir à des sites destinés aux enfants ou à l’amusement en général....

En suivant ces quelques conseils, vous pourrez conserver l’unité et l’apparence professionnelle de votre site, en plus de rendre vos textes plus faciles à lire et à synthétiser.

Bon travail!