Share
Ammettilo: molti di noi vedono i sidebar come nient'altro che un semplice contenitore che li contiene cose, nei nostri blog e siti web. Ottiene il nostro minimo sforzo nel processo di progettazione e lo riempiamo senza pensare a quale widget dovrebbe andare dove.
Ma per un sito web ben progettato, il progettista dovrebbe prendere in considerazione una serie di fattori quando si lavora su di essi. Ad esempio, considera il numero di contenitori della barra laterale, la larghezza e l'altezza delle barre laterali, l'ordine degli elementi che entrano nelle barre laterali e così via.
In questo post, studieremo l'anatomia della "barra laterale perfetta".
Per prima cosa, dobbiamo farlo definire cos'è una "barra laterale":
Una barra laterale è una sezione separata graficamente che contiene parti informative e di navigazione del sito web.
Certo, ho tradito un po 'la definizione di Wikipedia del termine "barra laterale".
Le barre laterali contengono elementi contestuali per il contenuto o l'intero sito Web, ad esempio menu di navigazione, moduli di ricerca o widget di sottoscrizioni. Possono anche contenere elementi non contestuali come pubblicità o "quotazioni giornaliere". Sono quasi sempre più ristretti rispetto alla sezione dei contenuti per sottolineare che il contenuto è più importante della barra laterale. Il loro scopo principale è aiutare il visitatore a capire e navigare meglio nel sito web.
Come sistema di gestione dei contenuti, la piattaforma di WordPress considera le barre laterali come "aree widget" in cui gli sviluppatori del tema WordPress dovrebbero consentire ai widget di WordPress di essere visualizzati nei loro temi.
Sebbene non siano tecnicamente barre "laterali", le aree del widget che appartengono al "footer" del tema potrebbero anche essere considerate come "barre laterali" poiché, beh, sono anche aree widget.
Per il gusto di nominare le cose correttamente, dovrebbero essere chiamate "aree dei widget dei piedi", ma in questo articolo, ne parleremo anche noi.
Come avrete già intuito, non c'è una risposta giusta a questa domanda. A seconda della complessità del tuo sito web e della necessità di elementi della barra laterale, potrebbe essere da uno a quattro o nessuno.
Esempio di progettazione di sidebar a colonna singola: Twenty Twelve WordPress Theme Una singola barra laterale è probabilmente la scelta più popolare per un blog design. E poiché le pagine dei blog tendono ad essere lunghe con gli elenchi dei post o postare contenuti e elenchi di commenti, una singola barra laterale può contenere da 5 a 10 elementi della barra laterale. Non dimenticare, però: se la barra laterale supera l'altezza dell'area di contenuto principale, sarà sicuramente brutta.
La barra laterale può essere sul lato sinistro dell'area di contenuto principale o sul lato destro. Non c'è alcuna differenza significativa tra i due, ma dal momento che le persone leggono da sinistra a destra, le barre laterali a sinistra possono attirare più clic riducendo al contempo l'importanza del contenuto principale, riducendo così la durata della visita di ciascuna pagina. (Il contrario vale per le lingue RTL come l'arabo o l'ebraico.)
Esempio di progettazione di sidebar a colonna singola: diciassette temi WordPress Due barre laterali potrebbero essere utili per i siti Web o le riviste aziendali, poiché dovrebbero mostrare più elementi di navigazione e informazioni rispetto ai blog. Lo svantaggio di avere più di una barra laterale è che hai bisogno di più spazio per loro e questo significa che devi restringere la tua area di contenuto principale. Sebbene tu possa ancora godere di due barre laterali con un approccio reattivo: su schermi più stretti di un laptop standard (1366 pixel di larghezza), puoi prendere una delle barre laterali sotto l'altra.
Inoltre, puoi progettare una delle barre laterali molto stretta per contenere anche alcune icone o collegamenti di una sola parola; ma, se lo progettate male, l'irregolarità potrebbe disturbare i vostri visitatori.
Esempio di progettazione di barre laterali a quattro colonne: SmashingMagazine.com Questo è ovvio: tu dovere utilizzare tecniche di progettazione reattive per questo. A meno che tu non voglia infastidire i tuoi visitatori con schermi inferiori a 1600 pixel, devi ridurre o spostare le barre laterali per gli schermi stretti.
Il design attuale di Smashing Magazine è uno dei migliori esempi di design WordPress a quattro colonne con un approccio reattivo. Mentre lo schermo si restringe; la barra laterale più a sinistra che contiene la navigazione principale diventa la navigazione in alto, quindi la seconda barra laterale sinistra si trova sotto la prima in alto, quindi la barra laterale principale a destra scompare completamente mentre la seconda barra laterale sinistra torna al suo posto originale e infine la seconda barra laterale a sinistra si unisce alla barra laterale più a sinistra in alto come la navigazione principale (che viene attivata con un pulsante).
Esempio di design "Sidebarless": Beyn.org Il minimalismo potrebbe essere la risposta giusta per qualsiasi tipo di sito web. Se ci sei, potresti voler riconsiderare quali elementi della barra laterale vuoi mostrare e quali eliminare dal tuo progetto.
Quindi, puoi visualizzare quegli elementi nella parte inferiore delle tue pagine. Puoi anche provare a visualizzarli in alto, ma ciò potrebbe rischiare che l'area del contenuto principale si trovi al di sotto della "piega": devi considerare anche l'altezza degli schermi dei visitatori.
Il tema sopra è un mio tema, progettato per il mio blog, Beyn. Ho sempre usato / temi codificati con una sola barra laterale per Beyn ma con questo nuovo tema, ho voluto provare un design "sidebarless" e ha funzionato magnificamente: in fondo a ogni pagina, ho solo tre widget: un "annuncio" elenco, un elenco di pulsanti di sottoscrizione email / feed / social e un widget "ultimi commenti".
Il vantaggio di un design "sidebarless" è il tuo contenuto principale che attira l'attenzione maggiore possibile.
Questa è la fine per la prima parte di questa serie. Tratteremo argomenti come le due dimensioni della barra laterale, l'ordine degli elementi e altri aspetti da considerare (come colori, immagini e dimensioni dei caratteri) nella parte successiva.
Accentsconagua