La ligne de flottaison reste une partie importante dans la conception de site web, bien que cette notion soit devenue de plus en plus complexe au fil des années.
Bien qu’elle puisse ne pas être considérée comme aussi importante qu’auparavant, la ligne de flottaison requiert toujours la considération des sites web qui cherchent à présenter une bonne expérience utilisateur.
Qu’est-ce que la ligne de flottaison ?
Le concept de la ligne de flottaison, « Above the fold » en anglais, remonte à des siècles, aux débuts de l’imprimerie. « Above the fold » signifie « au-dessus du pli ». Les journaux, en raison de la façon dont ils étaient imprimés sur de grandes feuilles de papier, étaient pliés une fois qu’ils arrivaient dans les kiosques à journaux. De ce fait, seule la moitié supérieure du papier est visible pour le passant.
L’industrie de la presse s’est vite rendu compte que pour capter l’attention des lecteurs, elle doit présenter des titres, du contenu et des images qui attirent l’attention dans la moitié supérieure de la page. Ce principe de base reste le même pour le contenu numérique.
Bien sûr, les sites Web n’ont pas de pli physique comme les journaux. Ici, le « pli » se rapporte à la barre de défilement.
Tout ce qui n’est pas visible immédiatement, et qui nécessite de scroller, est donc considéré sous le pli. Malheureusement, la version numérique de la ligne de flottaison n’est pas aussi simple que sa version papier. En effet, comment connaître la ligne de flottaison quand de nos jours, aucun écran n’est identique à un autre ? Depuis l’avènement des tablettes et autres smartphones, chaque site se présente de façon très différente. Sans parler des problèmes de résolution d’écran et de plug-ins de navigateur.
Les smartphones, qui représentent désormais une très grande part du trafic web, se présentent sous différentes formes et tailles, de même que leurs écrans, et leur résolution. Contrairement à un journal papier, la ligne de flottaison est un concept beaucoup moins prévisible.
Alors, on fait quoi ?
S’il est vrai qu’il n’y a pas de règles strictes pour le placement au-dessus du pli, certaines pratiques constituent souvent des lignes directrices utiles. Certaines sont des idées de bon sens, comme celle de s’assurer que le contenu le plus engageant est au-dessus de la ligne de flottaison. Vous pouvez aussi choisir de designer votre site selon les tailles les plus courantes de chacun des supports – bureau – mobile – tablette. Un site responsive, c’est aujourd’hui la norme !
Il est toutefois important de ne jamais prendre les « meilleures pratiques » au pied de la lettre. Pendant de nombreuses années, les sites Web ont été conçus comme les premières pages des journaux, mais cela a conduit à une sorte de « templatisation », où la majorité des sites se ressemblaient. Les innovations, comme les sites « one-page », ont notamment commencé à s’affranchir du concept, et fournissent une expérience beaucoup plus naturelle pour le lecteur.
Certains sites Web, de fait, ont complètement éliminé le pli, concevant des pages « plein écran » uniquement, éliminant ainsi le problème. Ces modèles « Compact » sont esthétiques et s’adaptent à toutes les tailles d’écran.
Si vous souhaitez rester sur un concept simple, et qui ne changera pas de sitôt : placez vos informations, images, punchline, call-to-action, le plus haut possible dans vos pages. Le contenu le plus important, en premier. Attention, il faut garder un équilibre et ne pas TOUT mettre non plus, au risque de rendre votre page confuse.
Comment trouver la ligne de flottaison de son site web ?
Avec les progrès réalisés dans la conception de sites Web responsives, les plis pour les différentes tailles d’appareils sont presque les mêmes. Une ligne de flottaison moyenne sur laquelle tous les concepteurs web se sont mis d’accord est d’environ 1000 pixels de large et 600 pixels de haut. C’est le meilleur scénario où la résolution de l’écran est de 1024*786 pixels, avec la fenêtre du navigateur maximisée et aucune barre d’outils installée. Bien sûr en 2019, les écrans tendent à avoir des résolutions supérieures.
Il existe de nombreux outils en ligne pour vous aider comme la carte thermique. Une carte thermique recueille des données auprès des utilisateurs en temps réel sur la façon dont ils interagissent avec le site Web et affiche les résultats à l’aide de différentes couleurs comme le rouge foncé mettant en évidence la partie de la page fréquemment utilisée, le jaune pour les parties moyennement utilisées et le vert clair pour les sections les moins utilisées.
Conclusion
La ligne de flottaison ne disparaîtra jamais, mais on sait mieux que jamais s’en accommoder. Avec un site responsive, et en plaçant seulement les choses les plus importantes sur le premier écran, vous pouvez obtenir un design engageant et attrayant. Tout en oubliant un peu le concept du pli !
Si vous envisagez de faire une refonte de votre site internet, tournez vous vers un professionnel sur Codeur.com.