Ligne de flottaison : guide ultime pour une conception web réussie

Mis à jour le 9 août 2026 par Nicolas Finet, CEO de Sortlist. La ligne de flottaison n’est plus une coupe fixe en pixels: entre 2025 et 2026, les bonnes pratiques se sont recentrées sur la première vue utile, la hiérarchie du message et les tests sur mobile. Si vous travaillez déjà la structure d’une page, reliez ce sujet à notre guide sur la structure d’une page web, la landing page et l’UX writing.

L’essentiel à retenir en 2026

3 points clés :

• Le fold est un repère, pas une règle figée : il faut le lire comme une première vue utile à tester sur plusieurs tailles d’écran, surtout mobile.
• La hiérarchie compte plus que le pixel : promesse, preuve et appel à l’action restent le trio le plus robuste pour faire comprendre une page vite.
• Le pilotage doit rester concret : combinez responsive design, scroll maps et lecture des Core Web Vitals pour éviter les décisions à l’intuition.

Ce qui a changé depuis 2024

Depuis la version initiale, le sujet a quitté la logique des seuils fixes pour se rapprocher d’un vrai pilotage de la première vue. Dans la pratique, la bonne question n’est plus « où se situe la ligne ? » mais « que comprend un visiteur en moins d’un écran ? ».

• Le fold est devenu dépendant du contexte : la combinaison taille d’écran, barre de navigateur et en-tête fixe fait varier la zone réellement visible.
• Pilot'in a recentré le débat en novembre 2025 : son article du 28 novembre 2025 décrit la ligne de flottaison comme une ligne virtuelle entre la partie visible au chargement et celle qui demande du scroll.
• Codeur a durci la recommandation en mai 2026 : le 27 mai 2026, la consigne mise en avant reste simple: garder l’image choc, la punchline et le call-to-action le plus haut possible.
• Les outils de lecture ont pris plus de poids : scroll maps, session replays et tests responsive remplacent avantageusement les anciennes règles de 700 px ou 860 px qui ne disent rien du vrai comportement utilisateur.

Comparatif rapide

Approche	Quand l’utiliser	Ce que la première vue doit contenir	Risque principal
Hero compact orienté conversion	Vous avez une offre claire et un trafic qui doit agir vite.	Une promesse lisible, une preuve courte et un CTA visible sans effort.	Si la preuve manque, le message paraît creux.
Scrollytelling éditorial	Vous devez expliquer un sujet complexe ou rassurer avant le clic.	Une accroche courte, un visuel qui pose le décor et un lien de suite.	Si la première vue veut tout dire, elle perd le lecteur.
Page service B2B	Vous vendez une prestation qui demande du contexte.	Problème, bénéfice et différenciation en très peu de lignes.	Sans proposition de valeur visible, le scroll ne part pas.
Page e-commerce	Vous avez un produit ou un catalogue à vendre.	Produit, prix, réassurance et point de sortie clair.	Un prix caché dégrade la confiance dès la première vue.
Landing page campagne	Vous recevez du trafic payant ou social avec une intention forte.	CTA, preuve sociale et friction minimale.	Un hero trop bavard fait baisser la conversion.

Alternative selon votre contexte

Votre contexte	Option la plus cohérente	Pourquoi
Vous n’avez que 2 messages à faire passer	Hero très compact	La lecture reste nette et la décision est plus simple.
Votre offre demande une explication	Hero + preuve + section d’argumentation	Vous gardez la première vue simple sans sacrifier le fond.
Votre trafic est surtout mobile	Conception mobile-first	Vous adaptez le fold à la hauteur utile réellement disponible.
Votre objectif est la conversion rapide	Landing page courte	Vous réduisez les distractions et vous mettez l’action principale au centre.

Avis de la communauté

Les retours les plus utiles chez les équipes UX et conversion convergent vers la même lecture: la première vue doit expliquer, rassurer et orienter. Le vrai débat n’est plus de savoir si tout doit vivre au-dessus du fold, mais ce qui mérite vraiment d’y rester.

Pilot'in, 28 novembre 2025, et Codeur, 27 mai 2026

Chiffres clés à retenir

• 15 août 2024 : date de la version Sortlist d’origine, utile comme point de comparaison pour mesurer l’évolution des recommandations.
• 28 novembre 2025 : Pilot'in reformule la ligne de flottaison comme une ligne virtuelle, ce qui confirme l’abandon progressif des repères trop rigides.
• 27 mai 2026 : Codeur insiste sur une règle très opérationnelle: image choc, punchline et call-to-action doivent remonter le plus haut possible.
• 3 éléments : le trio le plus stable pour une hero section efficace reste promesse, preuve et action.

Mini-outil: simulateur de fold

Testez si votre première vue tient encore en une hauteur d’écran utile. Le calcul ci-dessous estime l’espace réellement disponible après la barre du navigateur et l’en-tête du site.

Hauteur totale de l’écran (px)

Barre navigateur / UI (px)

En-tête fixe (px)

Hauteur du hero (px)

Calculer la zone visible

—

À lire aussi sur Sortlist

• Structure d’une page web : utile si vous devez remettre à plat l’ordre des blocs avant de parler du fold.
• Landing page : pour travailler une page de conversion avec une hiérarchie plus directe.
• Core Web Vitals : pour relier la perception visuelle à la vitesse de chargement.
• UX writing : pour écrire une promesse plus courte et plus lisible au-dessus de la ligne de flottaison.

Questions fréquentes

La ligne de flottaison a-t-elle encore un sens en 2026 ?

Oui, mais comme repère de hiérarchie visuelle, pas comme frontière fixe en pixels. Le bon réflexe consiste à vérifier ce qui est compris dès la première vue sur mobile et desktop.

Faut-il toujours mettre le CTA au-dessus du fold ?

Pas systématiquement. Sur une offre simple ou transactionnelle, le CTA gagne à être visible très tôt; sur une offre complexe, il peut venir après une promesse claire et une preuve courte.

Comment mesurer la ligne de flottaison correctement ?

Testez plusieurs hauteurs d’écran, vérifiez le rendu mobile d’abord et combinez les retours avec des scroll maps ou des session replays. Le bon seuil dépend autant du contenu que de l’appareil.

Quelle règle simple appliquer à une hero section ?

Gardez au plus haut la promesse, une preuve concrète et l’action principale. C’est la formule la plus stable pour une page d’accueil ou une landing page.

Si vous devez revoir l’architecture de vos pages, la hiérarchie de vos messages ou la conversion de vos landing pages, déposez votre brief sur Sortlist.

Sources externes utilisées

• Sortlist, Ligne de flottaison : guide ultime pour une conception web réussie, 15 août 2024.
• Pilot'in, L’importance de la ligne de flottaison de votre site, 28 novembre 2025.
• Codeur, Comment gérer la ligne de flottaison d'un site web ?, 27 mai 2026.
• Pexels, Pexels Website Open on a Laptop Screen, consultation le 9 août 2026.

---

Lors de la création d’un site internet, plusieurs éléments sont pris en compte comme le design, la responsivité, l’interface et l’expérience utilisateur. L’ensemble de ces éléments contribue à rendre le site plus performant. Cependant, il existe une notion associée au domaine du webdesign que l’on a tendance à négliger : la ligne de flottaison.

Présente dans la plupart des pages web, celle-ci désigne la limite entre le contenu visible sur un écran et celui situé en dessous. Pour y voir plus clair, découvrez dans cet article son rôle dans la conception visuelle, son emplacement dans un site internet, les outils à utiliser pour la gérer efficacement et quelques exemples de bonnes pratiques à suivre.

Qu’est-ce que la ligne de flottaison ?

La ligne de flottaison (above the fold en anglais) correspond à la ligne de démarcation entre la partie immédiatement visible d’une page web et celle qui se trouve en bas. Il s’agit d’une ligne invisible qui permet donc séparer le contenu supérieur de la page affichée du reste.

Pour accéder à l’affichage situé en dessous de la ligne de flottaison web, le visiteur doit utiliser la barre de défilement du navigateur. Ce qui signifie qu’elle est mobile et que son emplacement change à chaque scrolling.

« Above the fold » est une expression empruntée aux journaux papier, où les informations les plus importantes étaient placées dans la partie supérieure du journal, visible lorsque celui-ci était plié. Ces informations servaient alors à attirer le public cible.

Dans un site web, la zone située en haut de la ligne de flottaison joue un rôle crucial, car c’est la première chose que voit un internaute lorsqu’il charge la page web. En optimisant la conception visuelle de cette partie au-dessus de la pliure, les éléments attirent immédiatement l’attention des visiteurs et les encouragent à explorer davantage la page.

Pourquoi la ligne de flottaison est-elle importante ?

La ligne de flottaison tient une place importante dans une page web pour plusieurs raisons. Tout d’abord, elle permet de concevoir une bonne expérience utilisateur en offrant aux visiteurs une première impression de la page web sans nécessité de défilement. De plus, avec une optimisation du placement des éléments clés, les internautes peuvent bénéficier d’une navigation intuitive et d’une interaction immédiate. La ligne de flottaison assure ainsi une excellente ergonomie du site.

Cette ligne imaginaire oriente également rapidement les utilisateurs vers le contenu principal du site. Au moment de concevoir un site e-commerce par exemple, il faut déterminer l’endroit exact où sera fixée la ligne de flottaison afin de mieux susciter l’intérêt de la clientèle.

En outre, une gestion appropriée de la ligne de flottaison garantit que le texte commence à un emplacement visuellement accessible. Ce qui facilite la lisibilité et la compréhension du contenu. Dans le cas contraire, il peut y avoir des répercussions négatives, telles que :

• Une perte d’attention
• Un faible engagement initial
• Un taux de rebond élevé
• Un faible taux de conversion
• Un mauvais classement SEO du site internet
• Une expérience incohérente sur mobile.

À cet effet, il s’avère indispensable de considérer les principes de conception web et d’optimiser la partie au-dessus de la pliure pour favoriser l’interaction positive des utilisateurs.

Comment déterminer la ligne de flottaison ?

Avec le développement de nouvelles gammes d’appareils, les utilisateurs ont aujourd’hui le choix entre différentes résolutions et ne voient plus le contenu de la même manière. En fonction du périphérique utilisé (smartphone, tablette ou ordinateur), la ligne de flottaison d’une page internet ne sera pas alors la même. Mais ce n’est pas tout, car il faudra également prendre en compte le type de navigateur utilisé pour déterminer l’emplacement de cette ligne.

Pour trouver la bonne ligne de flottaison, voici quelques pistes :

• Écran de 1024 x 768 px : à environ 700 pixels
• Écran de 1280 x 1024 px : à environ 860 pixels

Pour les appareils mobiles (téléphones et tablettes), il faut savoir que leurs tailles d’écran peuvent aller de 480 à 1024 pixels. La ligne de flottaison variera donc suivant la définition du dispositif employé.

Exemples de bonnes pratiques

La ligne de flottaison reste un concept important dans la création d’un site internet. Nous allons voir à travers ces deux exemples les approches adoptées par les webdesigners pour concevoir leurs pages web.

Dans ce premier cas, on retrouve un ancien site du store de la marque Apple affiché en 1280 pixels. Suite au chargement de la page, l’utilisateur peut tout de suite découvrir ce qui est important, comme les nouveautés, les meilleures ventes et les accessoires à succès. Et comme il s’agit d’un site e-commerce, les prix sont déjà affichés au-dessous des images.

Sachez que les visiteurs prennent leur décision en 0,5 seconde et selon le contenu qui s’affiche au-dessus de la ligne de flottaison. S’il ne trouve pas ce qu’il cherche, il risque de quitter aussitôt le site. D’ailleurs, seuls 23 % des internautes scrollent les pages des sites internet lors de leur première visite. Les 77 % ne toucheront pas à la barre de défilement.

Dans ce deuxième exemple, nous avons choisi le site web de l’entreprise d’ustensiles de cuisine Le Creuset. Sur la page d’accueil, le visiteur aperçoit d’emblée la phrase d’accroche et l’appel à l’action situés au-dessus de la ligne de flottaison. Ces éléments y sont placés pour attirer son attention et augmenter le taux de conversion.

Vous l’aurez compris, tout ce que vous souhaitez mettre en avant doit s’afficher dans la partie visible de la page. Et ce, sur n’importe quel appareil. Autrement, cela risque d’avoir un impact sur la notoriété de votre site internet.

Outils et ressources pour la gestion de la ligne de flottaison

Pour gérer efficacement la ligne de flottaison d’une page web, il existe différents types d’outils en ligne que vous pouvez utiliser, parmi lesquels Google Search Console. Avec cet outil, vous obtenez un certain nombre d’informations en termes d’exploration et d’indexation de la page web par Google.

D’un autre côté, vous pouvez utiliser des logiciels de heatmap pour découvrir jusqu’où les utilisateurs font défiler une page, ou pour identifier les zones de la page sur lesquelles ces derniers cliquent le plus fréquemment. Cela peut vous aider à identifier les zones de la page où les internautes interagissent le plus, et en conséquence, à optimiser la disposition des éléments importants.

Les outils d’eye-tracking constituent une autre ressource pour gérer la ligne de flottaison. Ceux-ci analysent les mouvements et la trajectoire des yeux de la personne lors de sa visite du site. Cela révèle les parties spécifiques en haut de la ligne de flottaison qui captent immédiatement l’attention et celles qui sont souvent ignorées.

Conseils pour une ligne de flottaison responsive

Assurer une ligne de flottaison adaptative et fluide sur différents appareils s’avère essentiel pour offrir une expérience utilisateur optimale. Voici quelques conseils pour garantir cette adaptation :

• Conception réactive : approche de responsive design pour adapter automatiquement le site web à n’importe quelle taille d’écran et garantir que la ligne de flottaison est bien positionnée.
• Prioriser les éléments clés : identifier les informations les plus importantes à afficher sur l’espace visible sur chaque appareil telles que les titres, les appels à l’action et d’autres informations cruciales.
• Tester sur différents dispositifs : utiliser une variété d’appareils pour détecter d’éventuels problèmes d’adaptation et les corriger.
• Penser mobile-first : adopter une approche mobile-first en commençant par la conception pour les écrans mobiles.

Par ailleurs, il est important de s’assurer que le site web se charge rapidement, en particulier sur des connexions mobiles. En effet, les utilisateurs mobiles sont sensibles à la vitesse de chargement. Une ligne de flottaison rapide contribue de ce fait à une meilleure expérience.

Enfin, n’hésitez pas à réviser régulièrement la ligne de flottaison pour être sûr qu’elle reste conforme aux meilleures pratiques et aux attentes des utilisateurs.

Conclusion

En conclusion, la ligne de flottaison est un concept essentiel du web design. Son adaptation sur différents appareils, associée à une disposition efficace des éléments de la zone visible, constitue une stratégie cruciale pour offrir une expérience utilisateur immersive dès les premiers instants de la navigation. Sa gestion alimentée par l’analyse des comportements utilisateurs et l’application de techniques de conception responsive s’avère ainsi indispensable pour maximiser l’impact visuel et fonctionnel des sites web.