{"id":35231,"date":"2025-03-18T10:56:00","date_gmt":"2025-03-18T09:56:00","guid":{"rendered":"https:\/\/www.codeur.com\/blog\/?p=35231"},"modified":"2025-09-12T16:36:59","modified_gmt":"2025-09-12T14:36:59","slug":"ux-ligne-flottaison","status":"publish","type":"post","link":"https:\/\/www.codeur.com\/blog\/ux-ligne-flottaison\/","title":{"rendered":"Comment g\u00e9rer la ligne de flottaison\u00a0d’un site web ?"},"content":{"rendered":"

La gestion de la ligne de flottaison est une partie importante dans la conception de site web<\/a>.<\/p>\n

Quels \u00e9l\u00e9ments placer au dessus de la ligne de flottaison ? Quel impact sur le r\u00e9f\u00e9rencement naturel ? Quid de la diff\u00e9rence entre mobile et desktop ?<\/p>\n

Concept souvent n\u00e9glig\u00e9, la ligne de flottaison requiert toujours la consid\u00e9ration des cr\u00e9ateurs de sites web pour offir une bonne exp\u00e9rience utilisateur.<\/p>\n

Qu\u2019est-ce que la ligne de flottaison ?<\/h2>\n

Le concept de la ligne de flottaison, \u00ab Above the fold \u00bb en anglais, remonte \u00e0 des si\u00e8cles, aux d\u00e9buts de l’imprimerie. \u00ab Above the fold \u00bb signifie \u00ab au-dessus du pli \u00bb. Les journaux, en raison de la fa\u00e7on dont ils \u00e9taient imprim\u00e9s sur de grandes feuilles de papier, \u00e9taient pli\u00e9s une fois qu’ils arrivaient dans les kiosques \u00e0 journaux. De ce fait, seule la moiti\u00e9 sup\u00e9rieure du papier est visible pour le passant.<\/p>\n

L’industrie de la presse s’est vite rendu compte que pour capter l’attention des lecteurs, elle doit pr\u00e9senter des titres, du contenu et des images qui attirent l’attention dans la moiti\u00e9 sup\u00e9rieure de la page. Ce principe de base reste le m\u00eame pour le contenu num\u00e9rique.<\/p>\n

Bien s\u00fbr, les sites Web n’ont pas de pli physique comme les journaux. Ici, le \u00ab pli \u00bb se rapporte \u00e0 la barre de d\u00e9filement. Tout ce qui n’est pas visible imm\u00e9diatement, et qui n\u00e9cessite de scroller, est donc consid\u00e9r\u00e9 sous le pli, sous la ligne de flottaison.<\/p>\n

Malheureusement, le concept de ligne de flottaison n’est pas aussi simple que sa version papier. En effet, comment conna\u00eetre o\u00f9 se trouve la ligne de flottaison quand, de nos jours, aucun \u00e9cran n\u2019est identique \u00e0 un autre ?<\/p>\n

Depuis l\u2019av\u00e8nement des tablettes et autres smartphones, chaque site se pr\u00e9sente de fa\u00e7on tr\u00e8s diff\u00e9rente selon l’internaute. Sans parler des probl\u00e8mes de r\u00e9solution d’\u00e9cran, de navigateur, de type d’\u00e9cran (OLED, Retina, etc).<\/p>\n

Les smartphones, qui repr\u00e9sentent d\u00e9sormais une tr\u00e8s grande part du trafic web, se pr\u00e9sentent sous diff\u00e9rentes formes et tailles, de m\u00eame que leurs \u00e9crans, et leur r\u00e9solution. Contrairement \u00e0 un journal papier, la ligne de flottaison est un concept beaucoup moins pr\u00e9visible.<\/p>\n

Voici l’exemple d’une ligne de flottaison mal g\u00e9r\u00e9e, avec un contenu coup\u00e9.
\n\"Ligne<\/p>\n

Comment g\u00e9rer la ligne de flottaison ?<\/h2>\n

S’il est vrai qu’il n’y a pas de r\u00e8gles strictes pour ce qu’il faut afficher au dessus de la ligne de flottaison, certaines pratiques constituent souvent des lignes directrices utiles.<\/p>\n

Certaines sont des id\u00e9es 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 \u2013 bureau \u2013 mobile \u2013 tablette. Un site responsive, c\u2019est aujourd\u2019hui la norme !<\/p>\n

Il est toutefois important de ne jamais prendre les \u00ab meilleures pratiques \u00bb au pied de la lettre. Pendant de nombreuses ann\u00e9es, les sites Web ont \u00e9t\u00e9 con\u00e7us comme les premi\u00e8res pages des journaux, mais cela a conduit \u00e0 une sorte de “templatisation”, o\u00f9 la majorit\u00e9 des sites se ressemblaient.<\/p>\n

Les innovations, comme les sites \u00ab\u00a0one-page\u00a0\u00bb<\/a>, ont notamment commenc\u00e9 \u00e0 s\u2019affranchir du concept, et fournissent une exp\u00e9rience beaucoup plus naturelle pour le lecteur.<\/p>\n

Si vous souhaitez rester sur un concept simple, et qui ne changera pas de sit\u00f4t, placez vos informations importantes : image choc, punchline, call-to-action<\/a>, le plus haut possible dans vos pages. Le contenu le plus important, en premier.<\/p>\n

Attention, il faut garder un \u00e9quilibre et ne pas TOUT mettre non plus, au risque de rendre votre page confuse.<\/p>\n

Exemple de gestion de la ligne de flottaison<\/h2>\n

Pour bien comprendre comment il est possible de g\u00e9rer intelligement la ligne de flottaison d’un site, analysons un exemple.<\/p>\n

Exemple de ligne de flottaison sur desktop<\/h3>\n

Par exemple, sur notre plateforme freelance Codeur.com<\/a>, les \u00e9l\u00e9ments les plus importants sont situ\u00e9s au dessus de la ligne de flottaison :<\/p>\n