Logo cube rouge dore JEFF-WEB
Logo cube rouge dore JEFF-WEB

Above the fold

Above the fold

Glossaire Web — Design / UX

Above the fold

L’expression “above the fold” (au-dessus de la ligne de flottaison) désigne la partie d’une page web visible à l’écran sans avoir besoin de scroller. C’est la zone critique où se joue l’attention du visiteur dans les premières secondes : titre principal, message clé, image d’ambiance, appel à l’action. Ce qui est above the fold détermine si le visiteur reste ou s’en va.

D’où vient l’expression “above the fold” ?

L’expression vient du monde de la presse écrite. Les journaux étaient pliés en deux sur les présentoirs ; seule la moitié supérieure (above the fold) était visible pour les passants. Les éditeurs y plaçaient les gros titres et les accroches les plus percutantes pour déclencher l’achat. Le principe a été repris pour le web : la partie visible au premier coup d’œil est la plus précieuse de la page.

Pourquoi c’est si important ?

Plusieurs études ont montré que les visiteurs d’un site web prennent une décision en moins de 10 secondes : rester et explorer, ou partir. Cette décision se base quasi exclusivement sur ce qui est visible above the fold.

  • 57% du temps que les visiteurs passent sur une page est consacré au contenu above the fold (étude Nielsen Norman Group).
  • 80% des visiteurs ne scrollent pas au-delà du premier écran sur les pages informationnelles.
  • La première impression se forme en 50 millisecondes — soit avant même d’avoir lu un mot.

Que mettre above the fold ?

  • Titre principal (H1) — la proposition de valeur principale en une phrase claire. “Agence web à Rouen spécialiste WordPress et SEO local” est mieux que “Bienvenue sur notre site”.
  • Sous-titre explicatif — précise et détaille le titre en 1-2 lignes.
  • Visuel impactant — photo de l’équipe, réalisation emblématique, illustration métier. Il doit renforcer le message, pas distraire.
  • Call-to-action principal — le bouton de conversion le plus important doit être visible sans scroller.
  • Éléments de réassurance — chiffre clé (“150 projets livrés”), label, certification, avis Google (note/nombre).
  • Coordonnées de contact — numéro de téléphone cliquable, idéalement dans le header fixe.

Les dimensions “above the fold” selon les appareils

La zone above the fold varie énormément selon l’appareil utilisé. Il n’existe pas UNE ligne de flottaison mais plusieurs :

  • Smartphone (iPhone standard) — environ 375×667 pixels visibles, soit une zone très restreinte. Priorité absolue à l’essentiel.
  • Tablette — 768×1024 pixels en portrait, plus d’espace mais toujours limité.
  • Laptop 13-14″ — 1280×800 pixels. Zone plus généreuse, on peut inclure plusieurs blocs d’information.
  • Desktop large — 1920×1080 pixels ou plus. Attention à ne pas créer de vide : sur les grands écrans, une zone above the fold vide fait amateur.

“Above the fold” a-t-il encore du sens en 2024 ?

Avec l’arrivée du scroll infini, du mobile et des habitudes des utilisateurs, certains designers ont décrété la mort du concept “above the fold”. C’est une erreur. Les études récentes confirment que la première zone visible reste critique pour l’engagement et la conversion.

Ce qui a changé : les utilisateurs scrollent davantage qu’avant. Mais ils ne scrollent que s’ils sont convaincus par ce qu’ils voient en premier. Un mauvais above the fold = pas de scroll = pas de conversion.

Chez Jeff-Web, nous accordons une attention particulière à la conception du hero (zone above the fold) de chaque page. C’est le 10 secondes durant lesquelles votre visiteur décide de rester ou de partir. Chaque élément doit y être réfléchi : titre, sous-titre, image, CTA. Rien n’est laissé au hasard parce que rien n’est plus important.
🔗 Voir aussi : UX🔗 Voir aussi : Call-to-Action (CTA)🔗 Voir aussi : Hero section🔗 Voir aussi : Landing page🔗 Voir aussi : Taux de conversion🔗 Voir aussi : UI

Besoin d’un site web au design professionnel ?

Demander un devis gratuitDécouvrir nos offres