Share
Admettez-le: la plupart d’entre nous voyons les barres latérales comme rien de plus qu’un simple conteneur des trucs, dans nos blogs et sites web. Cela demande un minimum d’effort sur le processus de conception et nous le remplissons sans nous demander quel widget devrait aller où.
Mais pour un site Web bien conçu, le concepteur doit prendre en compte un certain nombre de facteurs lorsqu'il travaille sur ceux-ci. Par exemple, considérons le nombre de conteneurs de la barre latérale, la largeur et la hauteur des barres latérales, l'ordre des éléments qui entrent dans les barres latérales, etc..
Dans cet article, nous allons étudier l'anatomie de la "barre latérale parfaite".
Tout d'abord, nous devons définir Qu'est-ce qu'une "barre latérale"?
Une barre latérale est une section séparée graphiquement qui contient des parties d'information et de navigation du site Web..
Certes, j'ai un peu abusé de la définition du terme "sidebar" dans Wikipedia..
Les barres latérales contiennent des éléments contextuels dans le contenu ou dans l’ensemble du site Web, tels que des menus de navigation, des formulaires de recherche ou des widgets d’abonnement. Ils peuvent également contenir des éléments non contextuels tels que des publicités ou des "citations quotidiennes". Ils sont presque toujours plus étroits que la section de contenu pour souligner que le contenu est plus important que la barre latérale. Leur objectif principal est d'aider le visiteur à comprendre et à mieux naviguer sur le site..
En tant que système de gestion de contenu, la plate-forme WordPress considère les barres latérales comme des "zones de widgets" dans lesquelles les développeurs de thèmes WordPress devrait autoriser l'affichage des widgets WordPress dans leurs thèmes.
Bien qu'ils ne soient pas techniquement des barres "latérales", les zones de widgets qui appartiennent au "pied de page" du thème peuvent également être considérées comme des "barres latérales", car ce sont aussi des zones de widgets..
Pour nommer les choses correctement, il faut les appeler "zones de bas de page" mais dans cet article, nous allons aussi en parler..
Comme vous l'avez peut-être déjà deviné, il n'y a pas de bonne réponse à cette question. En fonction de la complexité de votre site Web et du besoin d'éléments de la barre latérale, celui-ci peut aller de un à quatre, voire aucun..
Exemple de conception de colonne latérale à une colonne: thème WordPress Twenty Twelve Une seule barre latérale est probablement le choix le plus populaire pour la conception d'un blog. Et comme les pages de blog ont tendance à être longues avec les listes de publication ou les contenus de publication et les listes de commentaire, une seule barre latérale peut contenir 5 à 10 éléments de la barre latérale. N'oubliez pas cependant que si votre barre latérale dépasse la hauteur de la zone de contenu principale, elle aura définitivement l'air moche..
La barre latérale peut se trouver du côté gauche de la zone de contenu principale ou du côté droit. Il n'y a pas de différence significative entre les deux, mais comme les gens lisent de gauche à droite, les barres latérales de gauche peuvent attirer plus de clics tout en diminuant l'importance du contenu principal, réduisant ainsi la durée de visite de chaque page. (L’inverse est valable pour les langues RTL comme l’arabe ou l’hébreu.)
Exemple de conception de colonne latérale à une colonne: Thème Dix-sept WordPress Deux barres latérales pourraient être utiles pour les sites Web d’entreprise ou les magazines, car elles devraient afficher davantage d’éléments de navigation et d’information que les blogs. L'inconvénient d'avoir plusieurs barres latérales est que vous avez besoin de plus d'espace pour les utiliser, ce qui signifie que vous devez affiner votre zone de contenu principale. Bien que vous puissiez toujours profiter de deux barres latérales avec une approche réactive: sur des écrans plus étroits qu’un ordinateur portable standard (1366 pixels de large), vous pouvez placer l’une des barres latérales sous l’autre..
En outre, vous pouvez concevoir l'une des barres latérales très étroite pour contenir des icônes ou des liens d'un mot également; mais si vous le concevez mal, l'inégalité pourrait gêner vos visiteurs.
Exemple de conception de barre latérale de quatre colonnes: SmashingMagazine.com Celui-ci va sans dire: vous devoir utilisez des techniques de conception réactives pour cela. Sauf si vous souhaitez ennuyer vos visiteurs avec des écrans de moins de 1 600 pixels, vous devez réduire ou déplacer les barres latérales pour les écrans étroits..
Le design actuel de Smashing Magazine est l'un des meilleurs exemples de designs WordPress à quatre colonnes avec une approche réactive. Comme l'écran se rétrécit; la barre latérale la plus à gauche qui contient la navigation principale devient la navigation du haut, puis la deuxième barre latérale de gauche se place sous la première en haut, puis la barre latérale principale de droite disparaît complètement, tandis que la deuxième barre latérale gauche reprend sa place initiale, et enfin la deuxième barre latérale gauche rejoint la barre latérale la plus à gauche en haut de la navigation principale (qui est activée par un bouton).
Exemple de conception "Sidebarless": Beyn.org Le minimalisme pourrait être la bonne réponse pour tout type de site Web. Si cela vous intéresse, vous voudrez peut-être reconsidérer les éléments de la barre latérale que vous souhaitez afficher et ceux à éliminer de votre conception..
Ensuite, vous pouvez afficher ces éléments au bas de vos pages. Vous pouvez également essayer de les afficher en haut, mais cela risquerait de placer la zone de contenu principale sous le "pli". Vous devez également tenir compte de la hauteur des écrans des visiteurs..
Le thème ci-dessus est un de mes thèmes, conçu pour mon blog, Beyn. J'ai toujours utilisé / codé des thèmes avec une barre latérale unique pour Beyn, mais avec ce nouveau thème, je voulais essayer un design "sans barre latérale" et cela a fonctionné à merveille: au bas de chaque page, je n'ai que trois widgets: Un "annonces" liste, une liste de boutons d’abonnement email / feed / social et un widget "derniers commentaires".
L'avantage d'un design "sans barre latérale" est votre contenu principal attirant le plus d'attention possible.
C'est la fin de la première partie de cette série. Nous aborderons des sujets tels que les deux dimensions de la barre latérale, la commande des éléments et d’autres questions à prendre en compte (comme les couleurs, les images et les tailles de police) dans la partie suivante..
Accentsconagua