back to top

Sidebar (sito web): cos’è e a cosa serve

La Sidebar, letteralmente "barra laterale", è un elemento di design dei siti web e contraddistingue una o più aree all’interno di un layout a colonne. Nella configurazione tipica la sidebar è una sola e si posiziona sulla destra o sulla sinistra dell’area principale (l’area, cioè, che ospita il contenuto vero e proprio della pagina web).

La sidebar è un elemento tipico dei blog, ma non solo. Sono tantissimi i siti web che adottano questo elemento all’interno del proprio layout.

La sidebar è uno degli elementi costitutivi del layout dei siti web insieme a header e footer.

Esempi di layout con sidebar

Di seguito lo schema di un layout tipico con sidebar a destra:

Esempio di layout con sidebar a destra

Questo, invece, uno schema di layout con sidebar a sinistra:

Esempio di layout con sidebar a sinistra

Vediamo, infine, un esempio di layout con due sidebar, una posizionata a sinistra e l’altra a destra dell’area dedicata al contenuto principale:

Esempio di layout con due sidebar

Quali contenuti ospita la sidebar

All’interno della sidebard possono essere inseriti svariati contenuti, solitamente è molto utilizzata per ospitare link. I contenuti più comuni presenti all’interno delle sidebar sono:

  • banner e/o annunci pubblicitari
  • menu di navigazione (primario o secondario a seconda del layout del sito web)
  • link ai nuovi contenuti pubblicati sul sito/blog
  • link ai contenuti più visitati del sito/blog
  • link ai contenuti correlati a quello principale
  • tag cloud (blog)
  • calendario (blog)
  • feed RSS

Sidebar e navigazione mobile

Quando un sito web viene visitato attraverso uno smartphone (o comunque attraverso un dispositivo dotato di uno schermo di piccole dimensioni), solitamente la sidebar non appare più come una colonna dello schermo, ma finisce con l’impilarsi con gli altri elementi del sito.

Esempio di riposizionamento della sidebar nel design responsivo

Questo accade perché la suddivisione a colonne di uno schermo piccolo finirebbe col rendere difficie la fruizione dei contenuti, quindi – attraverso la tecnica del design responsivo – appare preferibile optare per una visualizzazione in pila (cioè le varie sezioni in cui eventualmente era divisa la pagina lungo l’asse orizzontale finiscono con l’essere presentate le une sotto le altre).

Sidebar e WordPress

Quando si parla di sidebar è difficile non parlare di WordPress. Questo CMS, infatti, considera la sidebar come un vero e proprio elemento caratterizzante non solo da un punto di vista estetico ma anche funzionale. In WordPress l’elemento sidebar, infatti, è il contenitore dei widget, cioè degli elementi simili ai plugin che aggiungono funzioni e/o contenuti specifici al sito, all’interno di box graficamente ben delimitati.

Nei siti più semplici, la sidebar corrisponde – come abbiamo visto all’inizio di questo articolo – alla barra laterale del sito/blog. In siti WordPress più complessi, invece, possono esserci anche decine di sidebar posizionate in svariati punti del layout in quanto il web-designer che utilizza WordPress per le proprie creazioni, le posizionerà dove riterrà opportuno utilizzare i widget.

Quando parliamo di WordPress, quindi, è più corretto definire le sidebar come dei semplici contenitori di widget, al di la del loro effettivo posizionamento all’interno del layout del sito.

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Placeholder: cos’è e a cosa serve?

Se sei sviluppatore o un designer dovresti sapere cos'è...

Sito web responsivo e adattivo: caratteristiche e differenze

Negli ultimi tempi il boom dei dispositivi mobili ha...

Layout (siti web) – definizione e significato

Nel web-design, con il termine layout si fa riferimento...

Header (sito web): cos’è e a cosa serve

L'header, o intestazione della pagina, è la parte superiore...

Footer (sito web): cos’è, a cosa serve e quali informazioni ospita

Il footer, anche detto pié di pagina, è la...
Pubblicità