Les rédacteurs en chef de journaux l'avaient compris bien avant l'existence du web. L'article qui mérite d'être lu va au-dessus du pli du papier. Tout ce qui se trouve en dessous doit lutter contre la décision de tourner la page. Sur un site web, le même principe s'applique à la première zone visible avant que le visiteur ne défile.
Le « above the fold » (au-dessus de la ligne de flottaison) désigne la partie d'une page web visible dans la fenêtre du navigateur quand la page se charge, avant que le visiteur ne défile. C'est la seule partie de la page que chaque visiteur voit. Tout ce qui se trouve en dessous doit mériter le défilement. Le terme vient de la presse : un journal plié en deux sur un présentoir n'affiche que la moitié haute de la une. Cette moitié haute devait attirer l'attention. La zone above the fold d'un site fonctionne de la même façon.
Ce qui se trouve above the fold varie selon l'appareil, la taille d'écran et le navigateur de chaque visiteur. Un grand écran de bureau montre bien plus de contenu above the fold qu'un téléphone tenu en mode portrait. Concevoir pour cette zone, c'est penser à tous ces cas, pas seulement à ce que vous voyez sur votre propre écran.
Pourquoi le contenu above the fold est-il important ?
Les études sur le comportement de lecture montrent de façon constante que les visiteurs passent plus de temps sur le contenu situé en haut d'une page. Plus un contenu est bas, moins il y a de visiteurs qui l'atteignent. Ce n'est pas un manque d'attention. C'est une réaction rationnelle face à un temps limité. Les visiteurs jugent vite si une page vaut la peine d'être lue, et ce jugement se fait dans la première section visible.
Le above the fold répond à la première question du visiteur : suis-je au bon endroit ? Si le titre, l'image et les premières lignes de texte rendent la réponse claire, les visiteurs défilent. S'ils sont perdus ou hésitants, la plupart ne laissent pas sa chance au reste de la page.
Que mettre above the fold ?
La zone above the fold offre peu d'espace et beaucoup d'enjeux. Chaque élément qui y figure doit mériter sa place en servant le visiteur ou l'objectif de la page.
Un titre clair qui dit de quoi parle la page ou ce que le visiteur y gagne. Une phrase d'appui ou un sous-titre qui ajoute du contexte ou de la précision. Un visuel qui renforce le message au lieu de simplement décorer. Un appel à l'action qui donne au visiteur une étape suivante claire s'il est déjà convaincu.
La navigation a sa place above the fold. Les visiteurs s'attendent à trouver en haut de la page un moyen d'explorer le reste du site, et un menu enfoui ou caché crée tout de suite de la friction. L'article sur la navigation d'un site web explique comment concevoir des menus qui fonctionnent bien sur tous les appareils.
Ce qui n'a pas sa place above the fold, c'est tout ce qui occupe de l'espace sans aider le visiteur à comprendre ou à décider. De grandes images décoratives sans valeur informative, des bandeaux rotatifs qui retardent le chargement ou des blocs de texte d'introduction que le visiteur doit parcourir avant d'arriver à l'essentiel gaspillent tous la place la plus précieuse de la page.
En quoi le above the fold diffère-t-il sur mobile ?
Sur mobile, la zone above the fold est nettement plus petite que sur ordinateur. Un écran de téléphone en mode portrait affiche environ 600 à 800 pixels de hauteur. Un écran de bureau peut en afficher 900 à 1200. Un même design peut laisser voir deux ou trois sections above the fold sur ordinateur, mais seulement un titre et une image sur mobile.
La conséquence pratique est que les visiteurs mobiles décident de rester ou de défiler avec beaucoup moins d'informations que les visiteurs sur ordinateur au premier coup d'œil. Ce qui compte le plus doit tenir dans une fenêtre plus petite. Les sections « hero » avec de grandes images de fond et peu de texte posent souvent problème : elles sont saisissantes sur ordinateur, mais remplissent tout l'écran mobile avec très peu de contenu avant que le visiteur doive défiler.
Tester le above the fold sur un vrai téléphone compte, car les aperçus du navigateur et les simulations sur ordinateur ne représentent pas fidèlement ce que voient les visiteurs mobiles. Pour une liste complète de points à vérifier sur mobile, l'article sur comment rendre un site web adapté au mobile détaille ce qu'il faut contrôler avant la mise en ligne.
Le above the fold influe-t-il sur la vitesse de la page ?
Directement. La zone above the fold est la première chose que le navigateur affiche : toute ressource qui retarde son affichage nuit au temps de chargement perçu, même si le reste de la page se charge vite.
De grandes images hero, des polices web à charger avant l'affichage du texte et des scripts qui s'exécutent avant le rendu de la page repoussent tous le contenu above the fold. Du point de vue du visiteur, la page se charge lentement même si le temps de chargement technique est correct. Une zone above the fold vide ou partiellement chargée pendant que le reste de la page rattrape son retard est l'une des causes les plus courantes de taux de rebond élevé sur des pages pourtant bien conçues.
Optimiser l'image hero, donner la priorité au chargement des ressources above the fold et différer les scripts non essentiels sont les corrections les plus efficaces. L'article sur la vitesse d'un site web couvre l'aspect technique des performances de chargement et ce qui les affecte le plus.
Le above the fold influe-t-il sur le SEO ?
Le contenu above the fold est un signal que les moteurs de recherche utilisent pour évaluer la qualité d'une page. Les pages qui chargent beaucoup de publicité ou du contenu de faible qualité above the fold, en repoussant le contenu principal vers le bas, sont pénalisées. Il s'agissait d'une mise à jour d'algorithme précise, visant les sites qui enfouissaient le contenu utile sous de gros blocs de publicité.
Au-delà de cette pénalité précise, le above the fold influe sur le SEO de façon indirecte, par les signaux de comportement. Les visiteurs qui arrivent sur une page et repartent aussitôt parce que la zone above the fold ne leur a donné aucune raison de rester génèrent un taux de rebond élevé et un faible temps passé sur la page. Avec le temps, ces signaux indiquent aux moteurs de recherche que la page n'a pas répondu à l'intention derrière la recherche.
Un bon design above the fold favorise aussi une meilleure structure de titres. Un titre clair visible above the fold, soutenu par une structure de page logique en dessous, aide les visiteurs comme les moteurs de recherche à comprendre la page rapidement. L'article sur le web design explique comment les choix de mise en page, comme la hiérarchie des titres, façonnent l'expérience du visiteur. Pour la vue d'ensemble sur le classement dans les recherches, l'article sur le SEO détaille les facteurs techniques et de contenu qui comptent le plus.
Comment WEMASY gère le design above the fold
Les modèles du créateur de site web WEMASY sont conçus en pensant à la zone above the fold. Les sections hero sont optimisées pour un chargement rapide, et l'éditeur visuel vous permet de voir l'affichage de chaque section à différentes tailles d'écran avant de publier. L'aperçu mobile montre exactement ce que les visiteurs voient sur un téléphone avant de défiler : vous ajustez le contenu et la mise en page sans deviner.
Découvrez ce qui est inclus dans le créateur de site web WEMASY ou consultez les offres sur la page des tarifs.
Questions fréquentes
Le above the fold reste-t-il pertinent avec les habitudes de défilement actuelles ?
Oui. Les visiteurs défilent plus volontiers qu'il y a dix ans, mais la zone above the fold garde un poids disproportionné. Les visiteurs passent plus de temps sur le contenu du haut de la page, quel que soit leur degré de défilement. C'est dans la zone above the fold que se prend la décision de rester ou de partir. La rendre claire, rapide et convaincante est aussi important aujourd'hui que jamais. Avec le créateur de site web de WEMASY, vous pouvez mettre cela en place directement sur votre site.
Quelle hauteur une section hero doit-elle avoir ?
Une section hero doit révéler assez de contenu above the fold pour faire comprendre le but de la page, sans occuper toute la zone visible. Sur ordinateur, un hero qui remplit toute la hauteur de l'écran avec seulement un titre et une image peut être saisissant, mais il retarde aussi l'accès du visiteur au contenu réel. Une meilleure approche est un hero assez haut pour faire une forte première impression tout en laissant entrevoir du contenu en dessous, ce qui signale aux visiteurs qu'il y a plus à voir s'ils défilent.
Qu'est-ce qu'un appel à l'action above the fold ?
Un appel à l'action above the fold est un bouton ou un lien placé dans la première section visible d'une page, qui permet aux visiteurs déjà convaincus d'agir tout de suite, sans défiler. Exemples courants : « Commencer », « Réserver un appel » ou « Voir les tarifs ». Tous les visiteurs de la zone above the fold ne sont pas prêts à agir, c'est pourquoi le reste de la page existe, mais proposer tôt une action claire réduit la friction pour ceux qui le sont.
Chaque page a-t-elle besoin d'une section above the fold solide ?
Oui, mais le sens de « solide » varie selon le type de page. Sur une page d'accueil, la zone above the fold doit établir qui vous êtes et ce que vous proposez. Sur un article de blog, elle doit confirmer au lecteur qu'il est sur le bon article et lui donner une raison de continuer. Sur une page produit, elle doit montrer clairement le produit et rendre le prix accessible. Le principe est le même pour tous les types de pages : la première zone visible doit répondre à la question la plus immédiate du visiteur.
Comment tester ce qui apparaît above the fold sur différents appareils ?
Le plus fiable est de vérifier vos pages sur de vrais appareils. Utilisez un écran de bureau, une tablette et un téléphone tenu en portrait comme en paysage. Les outils de développement du navigateur ont un mode de simulation d'appareil qui donne une approximation raisonnable, mais ne tient pas compte des barres d'outils du navigateur, des barres d'adresse et des zones de notification qui réduisent la hauteur d'écran visible sur les vrais téléphones. Ce qui paraît correct dans un aperçu du navigateur a souvent une limite de pli sensiblement différente sur un vrai appareil.