Règles de mises en pages

Règles globales

Définir des styles CSS pour h1,h2,h3 des styles pour les introductions, pour les paragraphes justifiés, pour les paragraphes non justifiés, et créer des pages avec un style uniformisé de mise en page des typo et de la disposition des éléments.

Eviter d’avoir plus de 3 typo différentes sur une seule page (incluant les titres, le gras, les différences d’alignement

Mise en page

Regrouper le contenu dans des blocs distincts

• Utiliser la hiérarchie des titres h1, h2, h3…
• Donner un titre principal clair et unique à chaque page en utilisant h1
• Mettre des intertitres pour créer une hiérarchie visuelle
• Laisser des espaces suffisants entre les différents éléments
• Regrouper les éléments liés pour les distinguer des autres, en utilisant (avec modération) des couleurs, des fonds et des bordures
• Utiliser des listes avec des puces ou des chiffres
• Eviter le multi-colonnage: des exceptions notables : les plans de site, les index ou les « landing pages ».
• Ajouter des tableaux ou des schémas pour couper les blocs de texte

Astuce
Une bonne structuration de contenu facilite la lisibilité et l’accessibilité. Pour vérifier qu’une page est bien structurée, il suffit de désactiver les styles sur son navigateur : si la page reste intelligible et facile à lire, il est probable que la page respecte les points ci-dessus.

Alignement

Le texte doit être aligné à gauche : éviter le texte centré ou aligné à droite.

Justifié:

• La justification du texte s’utilise uniquement pour les paragraphes de plus de 3 lignes, de plus elle s’utilise en alternance avec l’alignement à gauche, il ne faut pas utiliser uniquement l’alignement justifié dans un toute une page, il faut alterner pour que cela paraisse naturel.
• Le justifié ne peut pas être utilisé dans les titres, ou les textes en gras ni les introductions.

Centré:

• Ne pas utiliser le texte centré sur un texte de plus de 4 lignes ou de plusieurs paragraphes

Droite:

• Justifiez à gauche. Ne justifiez pas à droite, cela augmente le temps de lecture si l'espacement n'est pas régulier.

Couleur et mise en forme textuel

• Le texte souligné est exclusivement réservé aux liens
• Eviter le texte en MAJUSCULES: le texte devient plus difficile et plus long à lire, il peut aussi être perçu comme AGRESSIF. Les MAJUSCULES sont tolérables pour des phrases courtes ou les menus
• Ne jamais utiliser les textes clignotants ou défilants, également difficiles à lire
• Ajouter de la couleur pour que l’information ressorte davantage, et non pour donner de l’information (certaines personnes voient mal ou pas du tout les couleurs)
• Eviter les combinaisons rouge/vert tant pour les images que pour le texte, difficiles à distinguer pour les daltoniens
• Le caractère gras permet de mettre en valeur et de rendre plus visibles certains mots importants. Il convient de ne pas en abuser car cette technique de mise en valeur perdrait toute son efficacité (deux ou trois mot dans un paragraphe)

Polices

• Limitez-vous à trois polices de caractères : Vous pourrez vite constater que trois polices sont suffisantes. Si vous en utilisez davantage, votre design risque d’être un rien « cacophonique ».
• Utiliser des polices lisibles et disponibles et privilégier les polices Sans-Serif (dite sans empattement) comme Verdana et Arial : les polices Serif comme Times New Roman sont difficiles à lire quand la taille des caractères est petite ; elles peuvent être utilisées quand la taille des caractères est assez grande, pour les titres par exemple

Titres

• Utiliser la hiérarchie des titres h1, h2, h3…
• Les titres doivent disposer d’une marge supérieur double à leur taille, et inférieur de la moitiée de leur taille
• L’interligne dans un titre multiligne doit être plus rapproché que dans un texte standard pour permettre l’identification en tant que titre et non en tant que texte

Voici par exemple comment font les journaux :

Paragraphes

• Eviter les lignes seules, créer des paragraphes si possible de tailles similaires en nombre de lignes, sinon regroupez les paragraphes.
• Eviter les retour à la ligne au milieu d’un paragraphe, créez de beaux blocs de textes
• La longueur de vos lignes doit varier entre 50 et 60 caractères et les rangées ne doivent pas dépasser 650 pixels.

Listes à puces

• Les listes plutôt que des blocs de texte: Préférer les listes à puces aux longues énumérations de mots séparés par des virgules pour structurer et faciliter la lecture.
• Ne pas créer des listes à puces de plus de 4 éléments
• Le texte des listes à puces doit être de taille similaires et affiché sur un nombre de lignes similaires
• Positionner les puces à l’intérieur du paragraphe dans le css

Les visuels

Règle de base

Il n’y a rien de moins professionnel qu’un site qui présente des images de mauvaise qualité, à l’exception d’un site qui présente des images de mauvaise qualité qui mettent du temps à charger. Vous ne devez exposer sur votre site que des visuels de qualité supérieure et optimiser leur format pour qu’ils puissent apparaître rapidement. Prenez soin de sélectionner des galeries appropriées et surtout, ne surchargez pas vos pages d’images en pagaille.

Choisir un format d’image adapté pour garantir le meilleur rapport qualité/poids

• Le JPEG pour les photos
• Le GIF ou le PNG pour les autres (dessins, art, infographies)

Optimiser le poids des fichiers

• Régler la qualité et le poids des images JPEG
• Mettre chaque image à la dimension exacte qui sera utilisée

Proscrire les images sans valeur ajoutée

• Utiliser sans excès les images pour décorer, informer ou casser des longs blocs de texte
• Utiliser des icônes pour préciser le sens des liens importants… mais éviter l’utilisation d’icônes seules pour les liens ou les éléments de navigation, peu d’icônes étant universellement comprises

Optimiser la cliquabilité des images-liens

• Ajouter des flèches ou des mots
• Utiliser les boutons

Eviter les images de texte

… à l’exception des logos ou des illustrations. Elles sont parfois peu lisibles.

Fournir un texte alternatif à chaque image

• …pour que l’information véhiculée soit accessible à ceux qui ne voient pas l’image
• La description doit être concise, fonctionnelle et avoir du sens
• Utiliser l’attribut ‘alt’ pour cette description ou ‘longdesc’ si nécessaire, avec une chaîne vide (ALT=‘‘’’) pour les images purement décoratives

Améliorer l’impact du visuel

• Flou: Il faudrait être fou pour dégrader la qualité de ses images ? Pas forcément. Les images floues invitent à découvrir les images nettes. De plus, le fond brumeux fait la part belle aux mots qui deviennent les clés de l’énigme visuelle. Ajoutez une icône pour compenser le tout et votre visuel ne pourra que faire effet.
• Texte encadré: Si vous ne souhaitez pas heurter la qualité de votre photo, encadrer votre texte peut s’avérer représenter une excellente alternative. Cette astuce simple et efficace vous assurera que votre message porte ses fruits.
• Forme partiellement transparente : L’inconvénient de l’astuce précédente est que le texte devient difficilement lisible quand sa couleur se confond avec les teintes de la photo. Afin de vous assurer que votre texte apparaisse sous son plus beau jour tout en restant dans des tons alignés avec votre design, utilisez une boîte partiellement transparente. Votre image n’en sera pas affectée et vous mettrez en valeur votre message avec beaucoup de charme.

Couleurs

Comment choisir vos couleurs ?

Chaque couleur est associée à une émotion particulière. En voici les plus courantes :

Vous pourrez trouver toutes les associations couleur/sensation facilement en utilisant l’outil code-couleur. Une fois l’impact des couleurs assimilé, il ne vous reste qu’à choisir une palette moderne afin d’en exploiter le potentiel.