02Le mag conversion
Anatomie de pageLigne de flottaison : que mettre en haut d’une landing page ?
Le premier écran ne doit pas tout dire : il doit dire l’essentiel, dans le bon ordre. Que mettre au-dessus de la ligne de flottaison d’une landing page ? Cinq éléments, une promesse, une précision, une preuve, une action et une réassurance, à ajuster selon l’appareil et la source du trafic. Gabarits et exemples avant / après inclus.
Par Julien Jimenez- 10 min de lecture
« Il faut que tout soit visible sans défiler. » La consigne tombe souvent en réunion, juste avant qu’on empile dans le premier écran un carrousel, trois boutons, un formulaire et une vidéo. Résultat : un haut de page saturé où rien ne ressort. La question utile n’est pas « combien d’éléments peut-on y faire tenir ? », mais « que mettre au-dessus de la ligne de flottaison pour que le visiteur décide de rester, puis d’agir ? ».
Ce guide y répond avec la méthode que Julien Jimenez applique en audit de landing page : cinq éléments indispensables, un ordre qui dépend du contexte, des gabarits pour mobile et ordinateur, et les erreurs qu’il retrouve le plus souvent. Les exemples sont des cas types, construits pour l’illustration.
La ligne de flottaison existe-t-elle encore en 2026 ?
L’expression vient de la presse : la moitié supérieure du journal plié, celle qui se voit en kiosque. Sur le web, il n’existe pas une ligne de flottaison, mais des centaines. Sa position dépend de la hauteur de l’écran, du zoom, de la barre d’adresse du navigateur mobile, d’un bandeau de consentement encore affiché. La même page ne montre pas le même premier écran sur un ordinateur portable et sur un petit téléphone.
Les visiteurs défilent, bien sûr, à condition que le haut de page leur en donne une raison. La ligne de flottaison n’est donc plus une limite en pixels : c’est un moment, celui de la première décision. Rester ou repartir.
Le premier écran comme contrat avec le visiteur
Le visiteur arrive avec une attente, née d’une requête, d’une annonce ou d’un e-mail. Le premier écran doit la confirmer en quelques secondes : vous êtes au bon endroit, voici ce que vous allez obtenir, voici comment. Quand ce contrat est clair, défiler revient à lire la suite. Quand il ne l’est pas, défiler revient à chercher, et le bouton retour n’est jamais loin.
Le test du premier coup d’œil le vérifie : montrez le premier écran quelques secondes à une personne qui ne connaît pas l’offre, cachez-le, puis demandez-lui ce que propose la page, à qui, et ce qu’elle ferait ensuite. Si elle hésite sur l’une des trois réponses, le contrat est à réécrire.
Que mettre au-dessus de la ligne de flottaison : les cinq éléments indispensables
Un premier écran efficace répond, dans l’ordre, aux cinq questions que se pose un visiteur qui découvre une offre. Chaque élément a une forme habituelle, qui peut varier selon la page.
| Élément | Question du visiteur | Forme habituelle |
|---|---|---|
| 1. La promesse | Qu’est-ce que j’obtiens ? | Le titre principal, en une phrase |
| 2. La précision | Pour qui, et comment ? | Un sous-titre d’une ou deux lignes |
| 3. La preuve | Pourquoi vous croire ? | Recommandation nommée, référence vérifiable, aperçu du livrable |
| 4. L’action | Que faire maintenant ? | Un bouton principal au libellé explicite |
| 5. La réassurance | Que se passe-t-il après ? | Une ligne sous le bouton : délai, engagement, confidentialité |
Le visuel n’est pas un sixième élément obligatoire. Il devient utile quand il montre le produit, le résultat ou le livrable : une capture d’interface, un extrait de rapport, un avant / après. Une photo d’ambiance, elle, occupe la place la plus précieuse de la page sans rien prouver. Quant à la navigation, elle se réduit au minimum : le logo, un lien d’information, éventuellement le bouton.
Écrire une promesse précise : exemples avant / après
La promesse est l’élément qui pèse le plus lourd, et le plus souvent raté. Quatre règles suffisent à la redresser : dire le résultat plutôt que l’activité, employer les mots du visiteur (ceux de ses recherches, de ses e-mails, de ses appels), être précis sur le public et le bénéfice, et s’en tenir à une seule idée. Trois cas types le montrent.
« Votre partenaire comptable de confiance »
« Votre comptabilité de TPE tenue chaque mois, et un expert attitré pour vos questions »
« La plateforme tout-en-un qui révolutionne votre organisation »
« Planifiez les tournées de vos techniciens et prévenez vos clients de l’heure de passage »
« Boostez vos compétences »
« Construisez votre tableau de bord commercial sur votre propre fichier client, en quatre ateliers »
Dans chaque cas, la version « après » se vérifie : le visiteur peut constater s’il obtient ce qui est annoncé. C’est ce qui la rend crédible. Pour l’écrire, rédigez une dizaine de variantes, puis gardez celle qu’un client satisfait pourrait répéter à un collègue sans la reformuler.
Où placer la preuve et l’appel à l’action
Une promesse sans preuve reste une affirmation. La preuve se place donc là où le doute apparaît : juste après la promesse. Dans le premier écran, une preuve courte suffit : une recommandation nommée avec la fonction de son auteur, une référence vérifiable, un aperçu du livrable, un engagement de méthode. Les preuves détaillées suivent plus bas. Une règle ne souffre aucune exception : jamais de faux avis, jamais d’étoiles sans source.
L’appel à l’action, lui, doit être visible sans défiler, sur mobile comme sur ordinateur. Son libellé décrit ce qui se passe après le clic : « Réserver mon diagnostic de 30 minutes » plutôt que « Envoyer » ou « En savoir plus ». Il est unique dans son poids visuel ; une action secondaire reste possible sous forme de simple lien, par exemple « Voir comment ça marche ». Juste en dessous, la ligne de réassurance répond à la dernière inquiétude : délai de réponse, absence d’engagement, confidentialité des informations transmises.
Adapter le premier écran à l’appareil et à la source du trafic
Mobile et ordinateur : deux premiers écrans différents
Le message reste le même ; la mise en page change. Sur ordinateur, la mise en page en deux colonnes fonctionne bien : le texte et l’action à gauche, le visuel et la preuve à droite. Sur mobile, tout passe en une colonne, et l’espace disponible fond. Voici les deux gabarits de départ que Julien Jimenez propose en atelier.
Gabarit ordinateur
- En-tête réduit : logo, un lien d’information, bouton discret.
- Colonne gauche : promesse, précision, bouton principal, réassurance.
- Colonne droite : visuel du produit ou du livrable, avec une preuve courte en surimpression ou juste dessous.
Gabarit mobile
- En-tête de faible hauteur : logo et menu.
- Promesse sur deux à quatre lignes, dans une taille lisible sans zoom.
- Précision sur une ou deux lignes.
- Bouton pleine largeur, d’au moins 44 pixels de haut, puis réassurance.
- Preuve courte immédiatement sous le bouton ; visuel réduit ou déplacé plus bas.
Une barre d’action collante peut aider sur une page longue, si elle ne masque ni le contenu ni le bandeau de consentement.
Adapter le haut de page à la source du trafic
Chaque source de trafic arrive avec un niveau de contexte différent. Le premier écran s’ajuste à ce que le visiteur sait déjà.
| Source | Ce que sait le visiteur | Priorité du premier écran |
|---|---|---|
| Recherche organique | Sa propre requête, et un extrait de résultat | Un h1 qui reprend la requête, une preuve visible |
| Annonce payante | Le texte exact de l’annonce | Les mêmes mots, la même offre, sans détour |
| E-mail ou newsletter | Votre marque et le message reçu | Aller droit à l’action annoncée dans l’e-mail |
| Réseau social | Peu de chose, il était curieux | Davantage de contexte, un visuel parlant |
Les erreurs de premier écran les plus fréquentes
D’un audit à l’autre, les mêmes erreurs reviennent, avec un point commun : elles obligent le visiteur à travailler pour comprendre l’offre.
- Le titre de bienvenue. « Bienvenue sur notre site » occupe la meilleure place pour ne rien dire.
- Le carrousel. Trois promesses qui défilent n’en font aucune : le visiteur ne lit que la première, au mieux.
- Les boutons concurrents. « Devis », « Brochure », « Rappel » au même poids visuel repoussent la décision.
- Le jargon interne. « Solutions 360° », « écosystème digital » : des mots d’entreprise, pas de visiteur.
- Le formulaire complet sur mobile. Il pousse la promesse hors de l’écran avant même qu’elle soit lue.
- La vidéo lourde en lecture automatique. Elle retarde l’affichage et dégrade le LCP.
- La preuve invisible. Des logos illisibles, des avis sans source, ou rien du tout.
- Le décalage avec la source. L’annonce promet une chose, la page en annonce une autre.
Check-list du haut de page
Avant de publier une landing page, ou pour auditer celle qui existe, passez le premier écran au crible de ces onze points.
- Le titre dit ce que le visiteur obtient, avec ses mots à lui.
- Le sous-titre précise pour qui et comment.
- Le premier écran reprend la promesse de la requête, de l’annonce ou de l’e-mail d’origine.
- Une preuve réelle, nommée ou vérifiable, est visible sans défiler.
- Un seul bouton principal, dont le libellé décrit l’étape suivante.
- Une ligne de réassurance figure juste sous le bouton.
- Le visuel montre le produit, le résultat ou le livrable.
- Le premier écran s’affiche vite sur mobile (LCP inférieur ou égal à 2,5 secondes au 75e centile).
- Rien ne bouge pendant le chargement (CLS inférieur ou égal à 0,1).
- Aucun carrousel, aucune vidéo lourde en lecture automatique.
- Le test du premier coup d’œil est réussi avec une personne extérieure au projet.
Questions fréquentes
Q.01Faut-il mettre un formulaire au-dessus de la ligne de flottaison ?
Sur ordinateur, un formulaire court, de deux ou trois champs, peut tenir dans le premier écran à côté de la promesse. Sur mobile, il repousse souvent la promesse hors de l’écran : mieux vaut un bouton qui mène au formulaire, placé juste en dessous ou sur une étape dédiée. Dans tous les cas, la promesse passe avant les champs.
Q.02Une vidéo dans le premier écran est-elle une bonne idée ?
Oui, quand elle montre le produit en action et qu’elle ne se lance pas d’office avec un fichier lourd. Affichez une image d’aperçu légère, chargez la vidéo au clic et gardez la promesse en texte : beaucoup de visiteurs ne lancent jamais la vidéo, ils doivent comprendre l’offre sans elle.
Q.03Le premier écran doit-il être identique sur mobile et sur ordinateur ?
Le message, oui ; la mise en page, non. La promesse, la précision, l’action et la réassurance restent les mêmes, mais leur disposition change : colonne unique sur mobile, bouton pleine largeur, visuel réduit ou déplacé. Vérifiez chaque version séparément, sur un appareil réel.
Q.04Quelle longueur donner au titre principal ?
Il n’existe pas de longueur idéale universelle. Un bon titre se lit d’un coup d’œil, souvent sur deux ou trois lignes sur mobile, et ne porte qu’une idée. S’il en faut davantage pour être compris, une partie de l’information appartient probablement au sous-titre.
Conclusion : ce qu’il faut retenir sur la ligne de flottaison
Que mettre au-dessus de la ligne de flottaison ? Moins qu’on ne le croit, mais dans un ordre précis : une promesse, une précision, une preuve, une action et une réassurance. Le reste de la page développe, détaille, rassure ; le premier écran, lui, engage. Écrivez-le depuis la source du trafic, vérifiez-le sur un vrai téléphone, puis observez ce que font les visiteurs. Si le haut de page est juste, ils défilent pour en savoir plus, et non pour chercher ce que vous proposez.
Julien Jimenez est un expert SEO français indépendant. Il pratique le référencement naturel depuis 2009, en autodidacte, sur ses propres sites et des dizaines de sites de test. Spécialiste de Google Discover et du netlinking, il accompagne aujourd’hui la conversion du trafic : audit et conception de landing pages, cohérence entre la source et la page, plans de mesure. Il intervient partout en France et dans l’espace francophone, à distance ou sur site, sans jamais promettre de taux de conversion.
