guida online html5 & css3

Elementi principali di un layout web

Per elementi del layout intendiamo tutti quegli elementi costruttori dell'interfaccia, che ritroviamo su tutte le pagine del sito, e che costituiscono la UI (Interfaccia Utente).

Top bar

Posta in alto, al di sopra dell'header e della nav, visualizza informazioni utili, secondarie, veloci, di contatto: numero verde, email principale, orari, switch linguaggi, login/signup/profile, ricerca, stato carrello, social links.

Header

Ci troviamo nell'intestazione del layout. Brand/Brand + payoff, nav, search.

Sticky header

E' una header (che inizialmente può trovarsi al top o al bottom della pagina) che durante lo scroll resta "agganciato" fisso a uno dei lati della pagina, lasciando scrollare la pagina al di sotto. Utile per pagine che hanno un notevole sviluppo verticale. Quasi sempre presente nei siti onepage.

Navbar

La barra di navigazione principale, spesso utilizzata per visualizzare l'architettura e la strutturazione dei contenuti, per "orientare" la navigazione. Dovrebbe contenere un massimo di 6 links. Può prevedere un sottosistema di navigazione mediante liste a comparsa con diversi livelli di profondità, simboli, megamenù. Può altresì proporre approcci/percorsi di navigazione alternativi agli stessi contenuti. Può essere attivato mediante un toggler (hamburger) e comparire su richiesta-+.