La performance d'un site internet se juge selon plusieurs éléments : ses paramétrages techniques, son design, son expérience utilisateur et sa capacité à convertir son trafic. À ce sujet, il existe un outil très utile pour améliorer le marketing d'une page : il s'agit de la ligne de flottaison.
Définition de la ligne de flottaison
En web design, la ligne de flottaison d'un site internet est une ligne invisible qui s'épare la partie visible de la page de la partie invisible. Cette ligne est mobile puisqu'elle change dès lors que l'internaute fait défiler la page internet. Stratégique, la ligne de flottaison détermine où placer les éléments les plus importants.
Bien qu'utilisée en marketing digital, la ligne de flottaison puise ses origines dans le secteur de l'imprimerie : les journaux pliés en deux pour pouvoir être mieux présentés dans les kiosques disposent d'un plie qui délimite une partie visible d'une partie invisible. Appelé « above the fold » (« au-dessus de la pliure »), ce pli est extrêmement important pour les ventes des journaux, car toutes les informations qui se trouvent au-dessus de lui doivent attirer l'attention des passants.
Le guide pour comprendre les langages HTML et CSS.
Découvrez comment utiliser les langages HTML et CSS pour gérer votre site web efficacement.
- Balises HTML à connaître
- Mettre à jour un fichier CSS
- Les écueils à éviter
- Ressources pédagogiques
Télécharger
Tous les champs sont obligatoires.
Merci d'avoir soumis le formulaire
Cliquez sur le lien pour accéder au contenu en tout temps
Quelle est l'importance de la ligne de flottaison ?
La ligne de flottaison remplit exactement les mêmes fonctions que le plie en imprimerie puisque les informations sensées attiser l'attention de l'internaute doivent être placées au-dessus d'elle, sur la partie visible de la page. La différence avec le plie est que la ligne de flottaison est mobile : en effet son placement change dès lors que l'internaute fait défiler son écran en scrollant.
Mais la ligne de flottaison est aussi très importante pour l'ergonomie du site puisqu'elle permet d'optimiser le placement des éléments de la page et d'optimiser l'expérience utilisateur. Cela peut avoir un impact sur les ventes dans le cadre de l'e-commerce, que ce soit sur le site marchant ou dans le cadre d'affichage de bannières publicitaires.
La ligne de flottaison détermine aussi les zones de la page qui sont les plus consultées comme le montre le graphique de Hotjar, un outil d'analyse du comportement des internautes.
La bonne pratique jusqu'ici était de placer les éléments les plus importants au-dessus de la ligne de flottaison. Cependant, les différentes tailles d'écran disponible aujourd'hui, les smartphones et les tendances de web design comme les sites one page compliquent l'identification de la ligne et les règles à appliquer.
Comment trouver la ligne de flottaison ?
Il n'est donc pas si simple de trouver l'emplacement exact de la ligne de flottaison et il n'existe plus vraiment de règles qui permettent de le définir. D'autant plus que certains sites internet l'ont complètement éliminé, comme l'a fait Asos sur la page d'accueil de son site marchant.
De plus, les progrès en responsive design permettent désormais d'adapter parfaitement l'affichage d'une page sur n'importe quel type d'écran. À ce sujet, les tailles d'écran à prendre en compte sont :
- De 480 à 720 px pour les téléphones mobiles ;
- De 768 à 900 px pour les tablettes en mode portrait ;
- De 900 à 1024 px pour les tablettes en mode paysage ;
- De 1024 à 1200 px pour un ordinateur fixe ou portable.
Un site internet dont le web design est correctement paramétré maintiendra la qualité de son ergonomie, et donc la qualité de son expérience utilisateur.
Pour ne pas se tromper, il est alors préférable de se référer au bon sens et de placer les éléments les plus importants comme les phrases d'accroche et les appels à l'action le plus haut possible sur la page.
Quels éléments faire figurer au-dessus de la ligne ?
Bien que la ligne de flottaison soit difficilement identifiable en raison des différentes tailles d'écran, elle n'en reste pas moins importante pour l'optimisation du marketing.
De ce fait, un certain nombre d'éléments marketing doivent être placés au-dessus d'elle pour capter l'attention de l'internaute, de la même façon que la « above the fold » capte l'attention du passant dans la rue.
De ce fait, les éléments stratégiques à placer au-dessus de la ligne de flottaison sont :
- Une problématique.
- Un avantage concurrentiel.
- Un exemple qui prouve l'avantage.
- Le bénéfice du produit ou du service.
- Un témoignage client.
- Un appel à l'action.
- Une phrase d'accroche.
L'exemple de Le Creuset, entreprise française d'ustensiles de cuisine montre que le site à choisi de placer une phrase d'accroche, un bénéfice et un appel à l'action au-dessus de la ligne de flottaison.
Cet article vient de présenter ce qu'est la ligne de flottaison et son importance pour un site internet. Noter que le web design et les technologies ne cessent d'évoluer. Nouvelles tendances en matière de présentation et de fonctionnalités, nouvelles tailles d'écran et de résolution, il est aujourd'hui compliqué d'appliquer les règles « historiques » de la ligne de flottaison.
Face à la concurrence de plus en plus accrue, capter l'attention de l'internaute est une priorité. Il est alors utile de considérer l'expérience utilisateur d'un site et de prêter une attention particulière quant aux attentes des personnes ciblées.
Pour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil Website Grader ; ou découvrez les modèles de site web gratuits de HubSpot.
![Proposition de conception de site web : guide du débutant [+modèle]](https://www.hubspot.com/hubfs/media/propositionconceptionweb.webp)
