Raison n° 1

Pour assister au Live de ce Jeudi bien sur!

On papotera de “Comment transformer ta passion, tes compétences et ton expertise en un Business en ligne rentable dès le 1er jour”

3 SUPER raisons
de nous rejoindre
Raison n° 2

Pour les Cadeauuuuuuuuux

Puisque tu aimes aussi les cadeaux, reçois dans ta boite mail de l’énergie, les stratégies et les outils (plus grandioses les uns que les autres) qui vont générer des résultats dans ton Business.

3 SUPER raisons
de nous rejoindre
Raison n° 3

Pour la bonne humeur & la motivation

Par ce qu’on est super sympas et que des gens sympas aiment s’entourer d’autres gens sympas, alors qu’est ce que t’attends? Rejoins-nous!

3 SUPER raisons
de nous rejoindre
Psssst! On me chuchote
dans l’oreillette que
tu ne seras pas déçu!
INSCRIPTION GRATUITE

Rejoins-nous

Wouhou, ça c'est une excellente décision!
Oops! Réessaye pour voir?
Héééélaba! T'es tombé au bon endroit - Libère-toi 1h ce jeudi pour découvrir l’entourloupe qui propulsera ton Business sur le Web

Comment faire le calcul de l’espacement Hn ?

July 20, 2020
Web Design,Freelance,Business
espacement Hn
Photo by Jessica Ruscello on Unsplash

Tous designers aspirent à ce que chaque page web qu’ils créent soit attirante. Je parie que ça fait également partie de tes objectifs ! Commence alors par t’occuper des espacements entre tes titres et sous-titres (aussi appelés Heading). J’ai trouvé une solution automatisée qui va te rendre la vie plus facile : tu pourras réaliser le calcul de l’espacement Hn automatiquement. Mais avant, sais-tu réellement quels sont les avantages à utiliser les Hn sur un site web ?

Utiliser des Hn : bonne ou mauvaise idée ?

En utilisant des Hn, tu peux être sûr que les pages web que tu crées seront plus claires et plus compréhensibles. Tu fais d’ailleurs d’une pierre deux coups : non seulement les pages plairont aux internautes, mais elles le sont aussi vis-à-vis des moteurs de recherche.

Dis-moi : est-ce qu’il t’est déjà arrivé de faire face à une page qui ne comportait qu’un long pavé de textes ? Qu’est-ce que tu as ressenti ? Moi, j’en rencontre tout le temps. Je dois t’avouer qu’elles me font tout de suite fuir, avant même que j’aie eu le temps de comprendre de quoi elle parlait.

espacement Hn
Photo by Pine Watt on Unsplash

Alors, si un humain a du mal à comprendre un texte dénué de Hn, que ferait une machine ou un robot ? Certes, ces derniers sont intelligents, mais pas assez pour déchiffrer de telles informations. D’où l’importance de hiérarchiser les arguments, les idées… C’est précisément là que les headings (différents Hn) entrent en jeu. Ils facilitent la structuration d’une page web. Et si le calcul de l’espacement Hn est bien fait, le résultat est encore mieux.

Aussi, les internautes adorent les pages bien structurées. Cela leur donne une bonne expérience utilisateur.

Les Hn sont bien plus importants, côté SEO

D’un point de vue SEO, la mise en place de différents Hn et le calcul de l’espacement Hn sont aussi d’une importance capitale. J’ai déjà abordé le sujet tout à l’heure, comme quoi il serait plus facile aux moteurs de recherche de comprendre de quoi parle le site web.

Google n’aura aucun mal à indexer ton site. Est-ce que tu as déjà pris le temps de lire mon autre article sur les astuces SEO pour faire apparaître ton site dans les meilleurs résultats de recherche, tu te souviens peut-être d’un de mes conseils : il faut insérer des mots clés dans les Headings. Ce faisant, tu fais comprendre à Google de quoi parle encore ta page, ton site.

espacement Hn
Photo by Jonny Caspari on Unsplash

Comment placer les Hn et faire le calcul de l’espacement Hn ?

Si tu veux que tout se passe bien, il faudrait quand même respecter une certaine règle. En plaçant les différents Hn, tu dois absolument le faire par ordre. Jamais, il ne faut sauter de niveau ; sachant que les Hn sont composés de : H1, H2, H3, H4, H5 et H6. Les plus utilisés étant les H1 jusqu’à H3.

Voici un exemple plus concret :

Il faut structurer une page de cette manière : H1 > H2 > H3 > H4..., et non de la sorte : H2 (en tête de page) > H4 (suit tout de suite ce H2) > H1 > H3... Bref, il est question de simple logique.

Par ailleurs , il est important d’équilibrer le nombre de Hn. Ce ne serait pas convenable d’insérer plusieurs H1 ou plusieurs H2, ou encore plusieurs H3. D’ailleurs, pour une page, un seul H1 est permis. Les H2 jouent le rôle de sous-titre, et H3, des sous-sous-titres.

Par exemple :

  • H1
  • Introduction
  • H2
  • Paragraphe
  • H3
  • Paragraphe
  • H3
  • Paragraphe
  • H2
  • Paragraphe
  • Conclusion

Le H1 sert généralement à décrire tout le contenu (une sorte de résumé en 4 ou 5 mots) ; il s’agit du titre général du texte. Veille bien à ce qu’il ne contienne pas trop de mots, et comporte le mot clé principal.

espacement Hn
Photo by Rolands Zilvinskis on Unsplash

Comment fonctionne la mise en forme des Headings ?

De base, le H1 a la taille la plus grande de tous ; il est également le plus gras. S’ensuit alors le H2, puis H3 et ainsi de suite. Tu dois toutefois savoir qu’on ne parle pas ici de mise en forme, mais de “structure”. Ces tailles et niveaux de gras montrent seulement l’importance des headings.

Or, il est tout à fait possible de changer leurs formes, de manière qu’elles soient attirantes visuellement, et ainsi, rendent l’ensemble de la page agréable à voir. En général, ces typographies dépendent des thèmes et CSS adoptés pour le site.

Or, voici comment tu peux t’y prendre avec ces mise en forme et espacement Hn.

Utilise un guide de style

Est-ce que tu te souviens du guide de style dont je te parle souvent. J’en donne à ceux qui suivent ma formation (et c’est gratuit).

Pour chaque Heading, j’ai choisi une taille et une typographie précises. À chaque nouvelle page que tu crées sur Webflow, les Hn adoptent automatiquement ces tailles et typos. Seulement, tu ne vas pas forcément aimer le style que j’ai peaufiné. Ce n’est pas un problème, sache que tu peux créer ton propre guide de style.

Fais-toi aider par type-scale.com

Le problème, quand tu devras créer ton propre guide de style est que tu n’as peut-être aucune idée de l’espacement Hn à adopter entre les headings. C’est là que tu fais appel à type-scale.com. Dis désormais adieu aux calculs d’espacement manuel. Sur la plateforme, tu as directement accès à un nombre de pixels proposés automatiquement, un ratio qui te permet un bel espacement.

Il y a une vidéo Youtube dans laquelle je décris cela en bas de l'article. Soutenez-moi en vous abonnant à la chaine YouTube "Happy Desk Design"

espacement Hn
Photo by Clark Street on Unsplash

Conclusion
Les détails font toute la différence ! Eh oui, l’espacement Hn fait partie de ces détails-là. C’est pourquoi il faut accorder beaucoup d’importances à leur calcul. Heureusement pour vous, il existe désormais un outil qui permet de le faire automatiquement et surtout, gratuitement !

YouTube : Espacement Heading (H1, H2, H3...) calculé pour toi ! (2020)

Reviens sur cette page chaque fois que tu voudras. As-tu trouvé des idées que j'aurais oubliés? Si oui, quels sont-ils? Laisse un commentaire ci-dessous ou envoi un mail à hello@happydesk.be
Kevin Palombo, Gérant de Happydesk
Reçois une montaaaagne de cadeaux

Cadeaux.

On garde tous son âme d’enfant, alors on aime recevoir plein de cadeaux, une montaaaagne de cadeaux, une galaxiiiiiie de cadeaux, une.... YOUHOU, t’es toujours avec nous? Puisque tu aimes aussi les cadeaux, reçois dans ta boite mail de l’énergie, les stratégies et les outils (plus grandioses les uns que les autres) qui vont générer des résultats dans ton Business.

Psssst !

Libère-toi du temps pour jeudi car une surprise intergalactique t’attend.