Poids du contenu au-dessus de la ligne de flottaison

Le placement du contenu influence à la fois ce que les gens lisent et la façon dont la page est évaluée. Une page dont la substance démarre 900px plus bas est jugée sur ce qui se trouve au-dessus. Cette compétence mesure ce qui est réellement visible en premier et rééquilibre.

Le fichier de compétence

---
name: above-fold-content-weight
description: À utiliser quand une page a un contenu solide qui ne commence qu'après un grand hero, un carrousel ou une barre d'annonce.
---

# Poids du contenu au-dessus de la ligne de flottaison

Le placement du contenu influence à la fois ce que les gens lisent et la façon dont la page est évaluée. Une page dont la substance démarre 900px plus bas est jugée sur ce qui se trouve au-dessus. Cette compétence mesure ce qui est réellement visible en premier et rééquilibre.

## Ce qu’il vous faut d’abord

- La page à 375px et à une hauteur d'écran portable courante
- Sa structure de titres et de corps de texte

## Méthode

1. Chargez la page en 1366x768 et en 375x812 et relevez la position verticale du H1, du premier paragraphe de corps de texte et de l'appel à l'action principal.
2. Mesurez quelle part du premier écran s'écoule avant la première phrase substantielle. Au-delà de la moitié, c'est un problème.
3. Identifiez ce qui occupe cet espace. Barres d'annonce, heros surdimensionnés et blocs décoratifs en sont les causes habituelles.
4. Vérifiez si des éléments promotionnels passent devant la proposition de valeur, une annonce de fonctionnalité écrite pour les utilisateurs existants placée au-dessus de l'explication de ce qu'est le produit.
5. Rééquilibrez en déplaçant les éléments promotionnels et secondaires sous le message principal plutôt qu'en rétrécissant le hero, ce qui abîme généralement le design.
6. Remesurez aux deux tailles et confirmez que l'appel à l'action principal est entièrement au-dessus de la ligne de flottaison sur un écran de 768px de haut.

## Ce que ça produit

Les positions mesurées avant et après, avec les éléments précis déplacés et la raison de chaque rétrogradation.

## Là où ça dérape

- Ne mesurer que sur un grand écran de bureau où tout tient
- Réduire la taille du texte pour en faire tenir davantage, ce qui échange un problème contre un autre
- Supposer qu'un hero haut est toujours une erreur, il ne l'est que lorsqu'il retarde le message

---

Extrait de la bibliothèque de compétences QuQi - https://www.quqi.io/fr/skills/above-fold-content-weight

Ce qu’il vous faut d’abord

• La page à 375px et à une hauteur d'écran portable courante
• Sa structure de titres et de corps de texte

Méthode

1. 01 Chargez la page en 1366x768 et en 375x812 et relevez la position verticale du H1, du premier paragraphe de corps de texte et de l'appel à l'action principal.
2. 02 Mesurez quelle part du premier écran s'écoule avant la première phrase substantielle. Au-delà de la moitié, c'est un problème.
3. 03 Identifiez ce qui occupe cet espace. Barres d'annonce, heros surdimensionnés et blocs décoratifs en sont les causes habituelles.
4. 04 Vérifiez si des éléments promotionnels passent devant la proposition de valeur, une annonce de fonctionnalité écrite pour les utilisateurs existants placée au-dessus de l'explication de ce qu'est le produit.
5. 05 Rééquilibrez en déplaçant les éléments promotionnels et secondaires sous le message principal plutôt qu'en rétrécissant le hero, ce qui abîme généralement le design.
6. 06 Remesurez aux deux tailles et confirmez que l'appel à l'action principal est entièrement au-dessus de la ligne de flottaison sur un écran de 768px de haut.

Ce que ça produit

Les positions mesurées avant et après, avec les éléments précis déplacés et la raison de chaque rétrogradation.

Là où ça dérape

• Ne mesurer que sur un grand écran de bureau où tout tient
• Réduire la taille du texte pour en faire tenir davantage, ce qui échange un problème contre un autre
• Supposer qu'un hero haut est toujours une erreur, il ne l'est que lorsqu'il retarde le message

Utiliser cette compétence dans votre propre IA

Le fichier téléchargé est un simple markdown dont l'en-tête porte le nom et le déclencheur. Quand un assistant sait charger des compétences tout seul, c'est cet en-tête qu'il lit pour décider que celle-ci s'applique.

Plus dans SEO on-page