Mise en page web

Mettre en page son site internet de façon efficace

Article mis à jour le 30/01/2021


Il m’arrive souvent de tomber sur des sites professionnels faits “maison”. J’entends par là que leur propriétaire n’a pas fait appel à un pro pour sa mise en page. Ces sites là, on les repère au premier coup d’œil.

Parfois j’ai des bonnes surprises mais on ne va pas se mentir, souvent on frise la catastrophe. Parmi les erreurs courantes que j’ai pu voir: trop de polices différentes, taille de texte inadaptée, mise en avant de mots inintéressants, absence de titres ou au contraire trop de titres.

Une mise en page claire et bien hiérarchisée = un meilleur référencement

Les titres et les sous-titres

Les titres d’une page ou d’un article sont essentiels à un bon référencement, alors autant ne pas les négliger et faire n’importe quoi.

Globalement, ils sont nommés sous les termes H1, H2, H3, H4, H5, H6. Ils n’y en a jamais plus de 6 appellations. Ils servent à structurer votre texte à la manière des “grand 1”, “petit 1”, “petit a” de l’écriture traditionnelle.

Seul le H1 se doit d’être unique; pour tous les autres, vous pouvez en utiliser autant que vous le désirez.
On ne saute ou on inverse jamais un chiffre. Par exemple, un H3 ne sera jamais avant un H2 et on ne passe pas d’un H1 à un H4 directement.

Ordinateur affichant une mise en page web simplifiée

 En résumé

  • H1 = je l’utilise pour le titre de ma page.
  • H2 = je l’utilise pour les titres des différentes parties de ma page.
  • H3, H4, H5, H6 = je l’utilise pour les sous-titres des différentes parties de ma page.

La typographie

Un seul mot d’ordre: pensez à vos lecteurs! Certains peuvent avoir des déficiences visuelles et il faut le prendre en compte car ils sont aussi vos lecteurs. Vous l’avez compris, le but de la typographie est avant tout de faciliter la lecture des pages de votre site avant de faire joli.

On réservera les polices fantaisies aux seuls titres et on utilisera une police adaptée au web (de type Open Sans, Roboto) ou une police système (de type Verdana, Arial) pour le reste. Vous trouverez plein de polices sympas et libre d’usage sur Google Fonts.

On écrit aussi suffisamment grand (sans tomber dans l’énorme non plus) pour les malvoyants. On privilégiera donc une taille de police de 16px ou 18px. Si vous descendez en dessous de 14px, cela commence à poser des problèmes de lisibilité. Donc, on évite !

Typographie web

 En résumé

  • Police des titres = j’utilise une police fantaisie si je veux mais elle doit rester lisible.
  • Police du texte = j’utilise une police adapté au web de type Open Sans, Roboto ou Verdana.
  • Taille de la police = j’utilise une taille de 16px ou 18px ce qui facilite le confort de lecture.

Les mots en gras

Tout comme les titres, les mots en gras (strong) servent au référencement. Alors on réfléchit à ses mots clés et à son domaine d’activité et on évite de mettre en gras tout et n’importe quoi.

Que mettre en gras ? Simple. On met en gras les mots ou parties de phrases importants, ceux qui se raccrochent au thème abordé par votre page et ceux qui font référence à vos mots clés.

Comment ça marche? Quand Google vient visiter votre page, il choisit d’abord les mots en gras pour son référencement. Alors autant éviter de mettre en avant des mots comme “c’est super!” quand on parle de ces produits ou de son métier. Cela n’apporte rien en terme de professionnalisme et pourrait nuire à votre crédibilité.

Avertissez-moi quand il y a du neuf...

Votre adresse e-mail sera uniquement utilisée pour vous envoyer notre newsletter. Vous pouvez vous désinscrire à tout moment à l'aide du lien inclus dans chaque e-mail.

Commentaires
S’abonner
Notification pour
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires

Demande de devis

Que ce soit pour la création ou la refonte de votre site web, il vous suffit de remplir le plus précisément possible le formulaire qui suit. Cela me permettra de cerner vos attentes et de vous proposer un devis au prix le plus juste.

S’il venait à me manquer certaines informations, je reprendrai contact avec vous par email avant de vous faire une proposition.

Devis pour site web

Vous êtes...

Votre entreprise

Votre projet

Par exemple : https://monsite.fr
L'écoconception permet de minimiser l'impact écologique de votre site sur la Planète au travers de l'hébergement, le design, le contenu etc...
Par exemple : 1 lampe X avec 1 seul coloris = 1 produit simple
Par exemple : 1 jupe X avec 2 coloris et 3 tailles = 1 produit avec variations

Votre Hébergement

Par exemple : monsite.fr
Par exemple : OVH, O2switch, Gandi, Ionos etc...
Par exemple : OVH, O2switch, Gandi, Ionos etc...
Pour info, je travaille avec O2switch, un hébergeur 100% français de qualité premium