{"id":12435,"date":"2019-08-20T10:30:19","date_gmt":"2019-08-20T08:30:19","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=12435"},"modified":"2025-08-20T17:23:34","modified_gmt":"2025-08-20T15:23:34","slug":"web-design-utiliser-sidebar","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/web-design-utiliser-sidebar\/","title":{"rendered":"Web design : 3 conseils pour utiliser une sidebar"},"content":{"rendered":"

Les sidebar ont bien chang\u00e9. Alors qu’elles \u00e9taient auparavant pr\u00e9sentes sur tous les sites, elles semblent aujourd’hui avoir presque disparu du paysage du web.<\/p>\n

Elles sont pourtant toujours bien l\u00e0\u2026 mais elles ont chang\u00e9. Apprenez comment les r\u00e9utiliser !<\/p>\n

1. Oubliez les publicit\u00e9s<\/h2>\n

Si vous vous rappelez des temps anciens d’internet, vous vous souvenez certainement que les sidebars (les colonnes lat\u00e9rales) servaient \u00e0 la fois pour int\u00e9grer des menus, des informations\u2026 et des publicit\u00e9s. Il fut m\u00eame un temps o\u00f9 celles-ci clignotaient, pour mieux attirer l’attention (et aussi une p\u00e9riode o\u00f9 elles se succ\u00e9daient dans des \u00e9changes de liens qui faisaient alors office d’aides au r\u00e9f\u00e9rencement).<\/p>\n

Disons-le tout de suite : ce type de contenu ne fait pas uniquement mal aux yeux. Il est aussi inutile.<\/p>\n

Si votre colonne ne contient que des publicit\u00e9s et des liens marchands, vous pouvez \u00eatre \u00e0 peu pr\u00e8s certain qu’elle ne sera pas remarqu\u00e9e. L’internaute n’y accordera qu’un bref coup d’\u0153il la premi\u00e8re fois qu’il se rendra sur votre site, puis la jugera, sans appel, et ne la regardera plus jamais.<\/p>\n

Cela veut-il dire que vous ne devez pas du tout ins\u00e9rer de publicit\u00e9 dans votre sidebar ? Pas exactement : apr\u00e8s tout, m\u00eame Facebook en pr\u00e9sente. Mais en nombre r\u00e9duit. Et en les int\u00e9grant dans d’autres \u00e9l\u00e9ments…<\/p>\n

2. Fournissez un contenu informatif<\/h2>\n

Les \u00e9l\u00e9ments suppl\u00e9mentaires pr\u00e9sent\u00e9s dans les sidebar de Facebook (et des autres sites qui en utilisent) doivent contenir des choses utiles pour les internautes. Il ne s’agit plus de d\u00e9rouler le menu (qui sera en haut de page) ni de lister tout ce que vous faites.<\/p>\n

La question, c’est de vous demander : de quoi l’internaute a besoin. Qu’est-ce qui lui ferait gagner du temps dans la navigation sur mon site, de quel type de contenu pourrait-il avoir envie pour compl\u00e9ter ce qu’il est en train de lire dans la colonne centrale ?<\/p>\n

En r\u00e9pondant \u00e0 ces questions, vous aurez d\u00e9j\u00e0 de quoi compl\u00e9ter votre sidebar. On voit ainsi des sites de type informatifs qui ajoutent des colonnes avec les articles les plus r\u00e9cents, des sites commerciaux qui int\u00e8grent leurs catalogues dans la sidebar\u2026<\/p>\n

\"Sidebar<\/a>
Sidebar de Codeur Mag<\/figcaption><\/figure>\n

En vous rendant utile, vous pourrez int\u00e9grer des liens, soit vers d’autres pages de votre site (et donc am\u00e9liorer votre r\u00e9f\u00e9rencement<\/a>) soit vers l’ext\u00e9rieur si vous avez envie de mon\u00e9tiser votre page avec de la publicit\u00e9.<\/p>\n

D’autant que la sidebar n’a pas forc\u00e9ment vocation \u00e0 \u00eatre pr\u00e9sente sur toutes les pages\u2026<\/p>\n

3. Choisissez o\u00f9 et comment vous int\u00e9grez votre sidebar<\/h2>\n

Un site est fait d’un ensemble de pages. Et m\u00eame si une certaine unit\u00e9 est indispensable entre toutes celles-ci, elles ne doivent pas pour autant \u00eatre rigoureusement identiques.<\/p>\n

Vous savez d\u00e9j\u00e0 que la landing page<\/a>, notamment, a tout int\u00e9r\u00eat \u00e0 \u00eatre diff\u00e9rente. Il en sera de m\u00eame pour la page d’accueil, qui doit donner un aper\u00e7u de ce que vous faites, de votre actualit\u00e9\u2026 mais qui pourrait vite \u00eatre top encombr\u00e9e avec une sidebar.<\/p>\n

Par contre, d\u00e8s que vous p\u00e9n\u00e9trez plus avant dans le site, les sidebars sont plus utiles :<\/p>\n