Header

Le indicazioni presenti in questa sezione sono rivolte a tutte le pubbliche amministrazioni (centrali e locali) e gli enti e le società a loro afferenti (ad esempio società partecipate, consorzi, comunità); vanno applicate nella progettazione dei siti istituzionali e tematici.

Contenuti

SI DEVE

La testata deve contenere le seguenti funzionalità:

  • denominazione dell'amministrazione / ente / società / sito tematico (link in formato testuale che punta alla home page)
  • barra di accesso al livello gerarchico superiore dell'amministrazione (o all'amministrazione afferente nel caso di un sito tematico)
  • stemma / logo dell'amministrazione / ente / società / sito tematico
  • accesso al menu di navigazione
SI PUÒ

La testata può inoltre contenere una o più delle seguenti funzionalità:

  • campo di ricerca
  • accesso diretto ai servizi (al form di login)
  • link ai social network
  • selezione lingue

Componenti

La struttura della testata è suddivisa in 3 aree funzionali.

struttura header

1. Area appartenenza

Contiene l'indicazione dell'amministrazione di appartenenza e, se necessario, l'accesso ai servizi. Il colore della barra superiore è sempre #303030.

Testo: bold-600 (16px su desktop) in colore bianco.

2. Area navigazione e intestazione

Contiene l'accesso al menu di navigazione, lo stemma e la denominazione in formato testuale dell'amministrazione / ente; eventualmente: il campo di ricerca e le selezioni dei social network e delle lingue. L'area di navigazione può essere estesa dalla presenza del menu orizzontale.

Testo del titolo: bold-700 (32px su desktop).

SI PUÒ Il colore di fondo dell'area navigazione e intestazione è personalizzabile (tenendo presente i requisiti di accessibilità nell'utilizzo dei colori).
SI DEVE L'icona burger deve sempre essere accompagnata nella versione desktop (laddove presente) dall'etichetta "MENU".

icona burger

SI DOVREBBE Lo stemma dovrebbe, preferibilmente, essere utilizzato nella versione al tratto, se presentato su sfondo diverso dal bianco.

esempio di logo

SI DEVE Le etichette per la selezione delle lingue seguono la definizione ISO-639-2 (3 lettere).

selezione delle lingue

SI DEVE Le icone per l'accesso alle pagine social sono posizionate a destra della testata, sopra il campo di ricerca. Quando il numero delle icone social supera le 3 è possibile aggiungere un'icona generica che dà accesso alle restanti.

icone social

3. Area personalizzata

Lo spazio a disposizione per la personalizzazione è a discrezione dell'amministrazione.

SI DOVREBBE Per garantire una rapporto equilibrato fra le diverse aree funzionali della testata si consiglia di utilizzare per l'Area personalizzata altezze multiple dell'Area di appartenenza (di circa 3, 5 o 7 volte).

Griglia

L'allineamento dei componenti della testata è basato su una griglia a 12 colonne e sui conseguenti adattamenti nelle versioni responsive secondo quanto specificato nella sezione griglie.

Esempio desktop

esempio testata desktop

Esempio mobile

esempio testata mobile

Applicazioni

Esempio desktop

esempio testata desktop

Esempio desktop con aggiunta del menu di navigazione orizzontale

esempio testata desktop con menu orizzontale

Esempio testata minimizzata

esempio di testata minimizzata

Esempio mobile

esempio di testata su mobile

Esempio mobile con campo ricerca aperto

esempio testata su mobile con campo di ricerca aperto

Esempio mobile minimizzato

esempio su mobile minimizzato

l'ultima modifica di questa pagina risale a 15 giorni fa

torna all’inizio del contenuto
torna all'inizio del contenuto