Quels éléments placer au-dessus de la ligne de flottaison (above the fold) ?

La réponse courte

Au-dessus de la ligne de flottaison, placez :

1. Titre avec proposition de valeur
2. Sous-titre explicatif
3. CTA principal visible
4. Image/Visuel hero
5. Éléments de confiance (logos clients, note)

Qu’est-ce que “above the fold” ?

La zone visible sans scroller. Elle varie selon l’appareil :

Appareil	Hauteur above the fold
Desktop 1920x1080	~600-700px
Laptop 1366x768	~500-600px
Tablette	~700-800px
Mobile	~500-600px

Priorité des éléments

Hiérarchie recommandée

┌─────────────────────────────────────────────────────┐
│  [Logo]                    [Nav] [CTA secondaire]   │
├─────────────────────────────────────────────────────┤
│                                                     │
│  TITRE PRINCIPAL                    [Image Hero]    │
│  Proposition de valeur unique                       │
│                                                     │
│  Sous-titre explicatif (1-2 lignes)                │
│                                                     │
│  [    CTA PRINCIPAL    ]                           │
│                                                     │
│  ✓ Garantie  ✓ Livraison  ✓ Avis 4.8/5            │
│                                                     │
│  [Logo 1] [Logo 2] [Logo 3] [Logo 4] [Logo 5]      │
│                                                     │
└─────────────────────────────────────────────────────┘

Poids de chaque élément

Élément	Impact conversion	Priorité
Titre clair	⭐⭐⭐⭐⭐	Obligatoire
CTA visible	⭐⭐⭐⭐⭐	Obligatoire
Image pertinente	⭐⭐⭐⭐	Très important
Social proof	⭐⭐⭐⭐	Très important
Sous-titre	⭐⭐⭐	Important
Navigation	⭐⭐	Selon contexte

Ce que chaque élément doit accomplir

1. Titre principal

✅ "Créez votre site web en 5 minutes"
   → Bénéfice clair, temps défini

❌ "Bienvenue sur notre plateforme"
   → Aucune information utile

2. Sous-titre

Complète le titre avec :

• Comment ça marche
• Pour qui c’est fait
• Différenciateur clé

Titre: "Doublez vos conversions"
Sous-titre: "Notre IA analyse votre site et vous donne
            des recommandations personnalisées en 2 minutes"

3. CTA principal

Caractéristique	Recommandation
Taille	Grand, impossible à manquer
Couleur	Contraste fort avec le fond
Texte	Action + Bénéfice
Position	Centre ou côté droit

✅ "Commencer gratuitement"
✅ "Essayer 14 jours gratuit"
❌ "Soumettre"
❌ "En savoir plus"

4. Image/Visuel hero

Type	Quand l’utiliser
Screenshot produit	SaaS, apps
Photo humaine	Services, B2C
Illustration	Tech, startup
Vidéo	Produit complexe

Important : L’image doit supporter le message, pas le distraire.

5. Éléments de confiance

Choisir 2-3 parmi :

• Note clients (★★★★★ 4.8/5)
• Nombre de clients (“Utilisé par 10,000+ entreprises”)
• Logos clients reconnus
• Certifications/badges
• Garantie

Ce qu’il ne faut PAS mettre above the fold

À éviter	Pourquoi
Slider/Carousel	Distrait, ralentit
Trop de texte	Surcharge cognitive
Multiples CTA	Confus
Pop-up immédiat	Frustrant
Vidéo autoplay avec son	Agressif

Exemples par type de site

E-commerce

┌─────────────────────────────────────────────────────┐
│  [Logo] [Recherche______] [Compte] [Panier(3)]     │
├─────────────────────────────────────────────────────┤
│                                                     │
│  SOLDES D'HIVER              [Photo produit phare] │
│  -50% sur tout le site                             │
│                                                     │
│  [  VOIR LES OFFRES  ]                             │
│                                                     │
│  ⭐⭐⭐⭐⭐ 4.8/5 • Livraison gratuite dès 50€      │
│                                                     │
└─────────────────────────────────────────────────────┘

SaaS

┌─────────────────────────────────────────────────────┐
│  [Logo]    Produit  Prix  Ressources   [Connexion] │
├─────────────────────────────────────────────────────┤
│                                                     │
│  Automatisez votre            [Screenshot app]     │
│  comptabilité                                       │
│                                                     │
│  Gagnez 10h/semaine avec                           │
│  notre IA comptable                                │
│                                                     │
│  [Email________] [Essai gratuit]                   │
│                                                     │
│  Utilisé par Google, Airbnb, Stripe                │
│                                                     │
└─────────────────────────────────────────────────────┘

Service local

┌─────────────────────────────────────────────────────┐
│  [Logo] Plombier Paris      [01 23 45 67 89]       │
├─────────────────────────────────────────────────────┤
│                                                     │
│  Dépannage plomberie         [Photo technicien]    │
│  24h/24 à Paris                                    │
│                                                     │
│  Intervention en 30 min                            │
│  Devis gratuit                                     │
│                                                     │
│  [  APPELER MAINTENANT  ]                          │
│                                                     │
│  ⭐⭐⭐⭐⭐ 4.9/5 sur Google (320 avis)              │
│                                                     │
└─────────────────────────────────────────────────────┘

Test de votre above the fold

Le test des 5 secondes

Montrez votre page 5 secondes à quelqu’un, puis demandez :

1. De quoi parle ce site ?
2. Que propose-t-il ?
3. Quelle action dois-je faire ?

Si les réponses ne sont pas claires → optimiser.

Checklist

• Le titre communique le bénéfice principal
• Le CTA est visible sans scroller
• Je comprends l’offre en 5 secondes
• L’image renforce le message
• Il y a au moins un élément de confiance
• Pas de distraction inutile