La ligne de flottaison désigne la limite inférieure de la zone visible à l'écran avant que le visiteur ne scrolle. Tout ce qui se trouve au-dessus de cette ligne est vu sans action de sa part ; tout ce qui est en dessous dépend de sa volonté de continuer à lire. Cette limite n'est pas une mesure fixe en pixels : elle varie selon l'écran, le navigateur et l'appareil, ce qui oblige à la concevoir avec de la marge plutôt qu'avec une règle unique.
Cet article répond à trois questions dans l'ordre : ce qui doit obligatoirement s'y trouver, ce qui n'y a pas sa place, et comment vérifier ce qui se passe réellement chez les visiteurs plutôt que de se fier à l'intuition.
Avant d'aller plus loin. Toutes les causes évoquées plus bas ne concernent pas forcément votre site. En deux minutes, ce diagnostic vous dit lesquelles traiter en priorité.
Pourquoi la ligne de flottaison reste déterminante
L'habitude de scroller, acquise sur les réseaux sociaux, a fait croire que cette zone comptait moins qu'avant. En réalité, elle conditionne toujours la décision de rester ou de partir.
Selon l'étude Scrolling and Attention du Nielsen Norman Group, 57 % du temps passé à regarder une page l'est au-dessus de la ligne de flottaison, et 74 % dans les deux premiers écrans.
C'est dans cette zone que le visiteur décide s'il continue. Si le message n'y est pas clair, il part sans voir le reste de la page.
📌 Bon à savoir : la ligne de flottaison n'a jamais de valeur fixe en pixels. Elle dépend de l'appareil, du navigateur utilisé et même de l'affichage ou non de la barre d'adresse à un instant donné.
Ce qui doit apparaître avant le scroll
Quatre éléments sont difficilement négociables dans cette zone visible sans scroller, quel que soit le type de page (accueil, service, produit, landing).
| Élément | Statut |
|---|---|
| Proposition de valeur (que faites-vous, pour qui) | Indispensable |
| Un titre clair, pas une formule vague | Indispensable |
| Un seul call to action principal | Indispensable |
| Un visuel qui illustre l'activité réelle | Indispensable |
| Un élément de réassurance (avis, certification, logo client) | En option, utile si la confiance est l'enjeu principal |
| Un sous-menu de navigation secondaire | En option, souvent à éviter |
| Une vidéo en lecture automatique | En option, à éviter si elle ralentit le chargement |
| Un formulaire complet | En option, mieux en dessous |
La page d'accueil de Shine, capturée le 3 novembre 2026 sur un écran de 1 440 × 900
Sur cette capture, la promesse dit ce que propose Shine et à quel prix. Un seul bouton est plein, « Découvrir nos offres » ; « Parler à notre équipe » n'est qu'un lien. La réassurance est placée à droite, en plus petit que le titre.
💡 Astuce Culmine
si votre premier écran tourne en carrousel, gardez la diapositive qui décrit le mieux votre activité et retirez les autres : le visiteur aura le temps de lire ce message en entier.
Les erreurs qui vident la ligne de flottaison de son utilité
Un slider qui change le message avant que le visiteur n'ait fini de lire le premier annule l'effet recherché : personne ne lit trois messages qui défilent en quelques secondes.
Page d'accueil d'une auto-école en ligne, capturée le 3 novembre 2026 sur un écran de 1 440 × 900
Sur cette capture, le haut de l'écran est pris par un carrousel de promotions, avec ses points et ses flèches ; la phrase qui dit ce que fait l'entreprise n'arrive qu'en bas du premier écran, là où une partie des visiteurs ne la verra pas.
Une image décorative sans rapport avec l'activité réelle oblige le visiteur à deviner ce que propose le site, alors que le visuel devrait répondre à la question à sa place.
Sur mobile, un menu qui occupe la moitié de l'écran repousse tout le reste hors du premier écran, avant même que le message ait eu une chance d'apparaître.
Un CTA secondaire rendu plus visible que le CTA principal (par la couleur, la taille ou la position) sème la confusion sur l'action réellement attendue.
⚠️ Attention : sur mobile, un en-tête fixe trop haut et la bannière de cookies s'additionnent au premier chargement. Ouvrez votre site sur un vrai téléphone, sans avoir accepté les cookies, et regardez ce qu'il reste du message une fois les deux affichés.
Desktop, mobile, tablette : une ligne qui bouge
Un ordinateur offre une zone souvent plus large que haute. Un smartphone fonctionne à l'inverse : plus haut que large, mais avec une interface qui grignote l'espace (barre d'adresse, encoche, barre de navigation du téléphone).
La hauteur réellement visible change donc d'un appareil à l'autre, et même d'un instant à l'autre quand la barre d'adresse se replie. Plutôt que de viser une valeur en pixels, mesurez-la chez vos propres visiteurs : les cartes de défilement calculent un « pli moyen » à partir de leurs écrans réels (voir plus bas). Une maquette validée uniquement sur grand écran ne dit rien de ce que voient vos visiteurs sur téléphone.
📌 Bon à savoir : concevoir d'abord pour mobile (mobile first) oblige à trancher sur l'essentiel, ce qui profite ensuite à la version desktop plutôt que l'inverse.
Comment vérifier ce qui se passe réellement
Trois méthodes concrètes permettent de sortir de l'intuition de conception. Le test des 5 secondes consiste à montrer la page 5 secondes à une personne extérieure, puis à lui demander ce qu'elle a retenu : s'il ne reste rien du message principal, la priorisation a échoué.
La carte de chaleur (heatmap) montre où se concentrent réellement le regard et le clic, souvent loin des zones imaginées en phase de conception. Les outils d'analyse du scroll complètent ce diagnostic en indiquant le pourcentage de visiteurs qui dépassent réellement la zone visible sans scroller. Microsoft Clarity propose ces deux vues gratuitement.
Carte de défilement de la démo publique de Microsoft Clarity, page d'accueil de Clarity sur trois jours, capturée le 3 novembre 2026
Sur cette carte, lisez le tableau à gauche : 62,8 % des visiteurs atteignent 10 % de la page, mais 19 % seulement dépassent 15 % (1). La ligne « Pli moyen » (2) marque l'endroit où s'arrête, en moyenne, le premier écran de ces visiteurs.
Avant toute mise en ligne, une checklist courte suffit souvent à éviter les erreurs les plus fréquentes :
- Le message principal est-il compréhensible en moins de 3 secondes ?
- Un seul call to action est-il clairement visible ?
- Le visuel affiché illustre-t-il l'activité réelle ?
- La version mobile a-t-elle été testée sur un vrai téléphone, pas seulement redimensionnée ?
- Le temps de chargement de cette zone a-t-il été mesuré ?
Ligne de flottaison et performance technique
Le premier écran doit aussi s'afficher vite. Le délai se mesure avec le LCP (Largest Contentful Paint), l'un des Core Web Vitals de Google : le temps d'affichage du plus gros élément visible dans la zone de départ.
Une image trop lourde ou une police qui tarde à charger retardent justement l'affichage du message censé convaincre en premier. L'arbitrage entre impact visuel et poids du fichier se décide dès la phase de conception graphique, pas après coup.
📌 Bon à savoir : Google recommande un LCP inférieur à 2,5 secondes. Cette donnée se mesure gratuitement avec PageSpeed Insights, en indiquant simplement l'adresse de la page.
Vous n'avez pas fait le diagnostic ? [Il est en haut de l'article](#diagnostic), deux minutes.
L'essentiel à retenir
Travailler la ligne de flottaison revient à hiérarchiser : décider ce qui doit être vu en premier, et placer le reste plus bas. Pour savoir si ce choix fonctionne, un test des 5 secondes ou une carte de défilement en apprennent davantage que l'intuition.
Alexis, fondateur de Culmine
Je conçois et refonds des sites au quotidien, et le premier écran reste le moment où se joue presque tout : c'est souvent là que je retire un slider ou que je recentre un message devenu trop diffus. Alexis accompagne la conception de sites pensés pour être lus, pas seulement visités. Quelques exemples concrets sont réunis sur cette page de réalisations.
Questions fréquentes
Qu'est-ce que la ligne de flottaison en création de site web ?
La ligne de flottaison désigne la limite inférieure de la zone visible à l’écran avant que le visiteur ne scrolle. Elle varie selon l’appareil et la résolution, c’est pourquoi elle doit être conçue avec une marge plutôt qu’une mesure fixe en pixels.
Quelle est l'erreur la plus fréquente concernant la ligne de flottaison ?
L’erreur la plus courante est d’utiliser un slider ou carrousel qui fait défiler plusieurs messages, ce qui dilue l’attention au lieu de la concentrer sur un message unique et clair.
Quelle différence entre ligne de flottaison et hero section ?
La ligne de flottaison est un concept d’espace, la limite de ce qui est visible sans scroller. La hero section est un bloc de conception, souvent placé dans cette zone, mais les deux notions ne se confondent pas : une page sans hero section a quand même une ligne de flottaison.
Faut-il absolument mettre un bouton d'action avant le scroll ?
Oui dans la majorité des cas : un visiteur convaincu dès le premier écran doit pouvoir agir immédiatement sans chercher le bouton plus bas dans la page, ce qui limite les abandons.
Comment vérifier concrètement ce qui apparaît avant le scroll sur mon site ?
La première étape consiste à ouvrir son site sur différents appareils, ordinateur et smartphone, sans être connecté, puis à observer ce qui est réellement visible. Un test des 5 secondes auprès d’une personne extérieure complète utilement cette observation.
Le terme "above the fold" désigne-t-il la même chose ?
Oui, c’est l’expression anglaise d’origine, empruntée à la presse papier où le pli du journal limitait ce qui était visible en kiosque. Elle désigne exactement la même notion que la ligne de flottaison appliquée au web.
Pour aller plus loin
Conseils
22 minImaginez une restauratrice de Porto-Vecchio qui, un samedi matin, cherche un plombier d’urgence. Elle saisit « plombier Porto-Vecchio » sur…
Conseils
16 minVous avez travaillé toute la saison, vos produits ont été goûtés, appréciés, achetés sur place.
13 minUn restaurateur de Porto-Vecchio, en plein cœur de saison, tape « restaurant Porto-Vecchio » depuis son propre téléphone.
