Guida di stile per il web: un caso pratico

Mi è stato chiesto da più parti di fornire qualche esempio pratico riguardo ai passati interventi a proposito delle guide di stile web per la grafica e i contenuti.

Un esempio interessante è quello proposto dalla australiana Monash University. La loro guida di stile, che integra suggerimenti per la grafica e i contenuti, è davvero molto approfondita e ben strutturata.

Si comincia con un’introduzione rivolta all’audience della guida: web designer, sviluppatori e autori di contenuti dei siti dell’università. Non si tratta quindi di regole generiche che si possono trovare in qualunque buon libro sulla scrittura e design per il web (se interessati potete leggere su Fucinaweb le recensioni degli ottimi Web Word Wizardry, Hot Text – Web Writing That Works e Web Style Guide – Second Edition), bensì di indicazioni specifiche a un sito o a un network di siti.

Altro aspetto affrontato con intelligenza dalla guida è una breve descrizione degli utilizzatori del sito, cioè il pubblico a cui si rivolge. Notate come non vengano sprecate parole inutili: frasi brevi, buon uso degli elenchi puntati, link a risorse. La stessa guida è un ottimo esempio di come scrivere per il web.

Si passa poi ad affrontare il concetto di qualità dei contenuti e del design del sito, cioè cosa non può mancare ai contenuti e come funziona il processo editoriale e di revisione. Visto che alla Monash University offrono corsi che riguardano questi concetti hanno pensato bene di rimandarvi come approfondimento. Da notare anche la bella idea di separare, dedicandoci in una sezione dedicata, tutto quello che riguarda il loro sistema di Content Management (qui troverete informazioni sul software su cui si basa e sui motivi che li hanno portati ad estenderne le funzionalità).

Dopo questi contenuti introduttivi, ma fondamentali, si passa nel vivo della guida. La sezione branding and visual identity prende in rassegna le diverse sezioni del sito, e per ognuna illustra le scelte che sono state compiute per quanto riguarda i colori delle diverse componenti, le modalità con cui riferirsi a altre realtà presenti nell’universo dell’università, il tipo di immagini da usare (con esempi) e regole sul loro impiego.

In navigation e site structure si parla un po’ di information architecture, indicando le diverse tipologie di scheme con cui organizzare le informazioni, che nel caso dell’università sono:

  • alfabetico
  • cronologico
  • geografico
  • per argomento
  • per compito
  • per audience
  • guidato da metafora

Forse questa è l’unica sezione che si sarebbe potuto affrontare con un po’ più di profondità, magari illustrandola con esempi e includendo suggerimento su come organizzare le voci di menù e come etichettarle. Bene invece che alla ricerca e ai metadati sia dedicata un’opportuna voce di menù, vista la sua importanza.

Ai contenuti sono dedicate diverse sezioni e sottosezioni, di cui la principale è content, text and images.

Un’ultima sezione che vale la pena soffermarsi a commentare è quella che riguarda i template web, a cui accennavo in uno scorso intervento. In questa sezione sono presentati i diversi template disponibili per il sito e ne viene suggerito l’uso per le diverse esigenze, con esempi di casi già online. Un’opportuna tabella, davvero un’ottima idea, evidenzia inoltre l’impiego dei fogli di stile sui diversi elementi della pagina. 

Quella dell’università di Monash è una guida di stile davvero completa. Probabilmente per i progetti “di tutti i giorni” è uno sforzo considerevole da affrontare, ma se vi date uno standard di progettazione vedrete che riuscirete a creare un documento di questo tipo, personalizzandolo per il cliente, senza necessariamente passare notti insonni.

Un altro interessante esempio di guida di stile, anche in questo caso di un’università, è la Penn Web Style Guide.

Guida di stile per il web: i contenuti

In uno scorso intervento abbiamo visto come, nel corso di un progetto web, sia possibile (anzi, auspicabile) definire una serie di suggerimenti sottoforma di guida di stile. La guida di stile ben si presta in due ambiti: il design grafico del sito, di cui ci siamo occupati, e i contenuti, intesi come l’insieme dei documenti, immagini, link che popolano il sito.

Una guida di stile per i contenuti di un sito dovrebbe rispondere ad alcune domande riguardo:

  • la “lunghezza” dei testi: 400,1000 o 10.000 battute? Suddivise per pagine?
  • stessa cosa per le frasi
  • la composizione del testo: titolo, abstract, sommario, occhiello, corpo principale. Quante tipologie di contenuto ci sono e come vengono suddivise? Il sommario cosa dovrebbe contenere? Quanto è lungo?
  • le tipologie di enfasi, grassetto e italico, sottolineature, ammesse e come impiegarle
  • indicazioni su come comportarsi con acronimi e sigle
  • regole per citare fonti e link a siti esterni (con nome del link o del sito?, quali parti della frase rimandare al link? usare o no “clicca qui”?)
  • come intervallare i contenuti multimediali nella pagina: una o più immagini?, con didascalia?, in quale posizione?

Tutto questo corredato, possibilmente, con degli esempi, così da non lasciare spazio a fraintendimenti.

C’è poi chi vorrebbe farcire le guide di stile con un vocabolario minimo delle parole da usare o da non usare. Evitatelo: oltre a essere una gara persa in partenza, ricorda molto quello che succede con le ontologie e le folksonomies.

Limitate inoltre le regole alle principali, perché una guida di stile prolissa viene presto dimenticata nel cassetto.

Guida di stile per il web: il design grafico

Realizzare progetti web di una certa complessità – della durata di almeno un mese, e che siano seguiti da una fase di manutenzione dei contenuti più o menu lunga – richiede molto organizzazione, ma anche qualche standard.

Solitamente quando mi trovo coinvolto in questo tipo di progetti consiglio di stendere una serie di linee guida da seguire nello sviluppo del processo. Questa serie di linee guida le ho sempre chiamate guide di stile, anche se solitamente questo termine viene impiegato soprattutto per indicare le linee guida relative ai contenuti.

Sono principalmente due le fasi di un progetto web in cui è applicabile il concetto di guida di stile:

  • nella costruzione del layout della pagina e dei diversi elementi
  • nella organizzazione e stesura dei contenuti

Esploriamo qui il primo punto, lasciando il secondo a un successivo intervento.

Una guida di stile per la grafica di un sito dovrebbe essere un documento che si pone due obiettivi: servire come riferimento durante il processo di costruzione del layout delle pagine del sito, ma dovrebbe anche essere consegnato al cliente che si occupa di caricare in contenuti insieme alla guida di stile per i contenuti.

In questo modo chi si trova a dover realizzare nuove pagine nel corso della manutenzione del sito può, se gli è concessa questa possibilità, verificare se le nuove immagini, icone, foto, spalle, box che si appresta a costruire sono in linea con lo “spirito” del sito.

Ecco cosa dovrebbe contenere, sottoforma di testo e immagini, una guida di stile per il design grafico:

  • una rappresentazione dei diversi tipi di template del sito, motivando quando andrebbe usato uno e quando l’altro. Qui varebbe la pena sottolineare eventuali particolarità da prendere in considerazione quando la grafica verrà portata in Html e completata da codice lato server. Questo è utile perché chi si trova a lavorare con in template potrebbe sottovalutare l’impatto di lievi “personalizzazioni” alla grafica
  • l’elenco di tutte le icone usate nella grafica, con la spiegazione del loro utilizzo
  • qualche linea guida per la produzione di nuove immagini e loghi per i contenuti (dimensioni, posizione, in che formato salvarle, ecc.)
  • indicazioni sulla tipografica
  • indicazioni sui tipi di font e stile ai caratteri ammessi (sottolineato, colorato, ecc.)
  • suggerimenti sui diversi tipi di intestazione e link ammessi nel sito, con spiegazione, dovessero essere più d’uno, del loro impiego

Andrebbe quindi presentato un documento che contenga la grafica da usarsi all’interno del sito, arricchito però da qualche linea guida che permetta di capire da come partire da questa grafica per realizzare il codice.

Questo documento aiuta a non ritrovarsi nella frequente situazione per cui, dopo pochi mesi dalla messa online del sito, il designer grafico che l’ha creato vorrebbe non riconoscerne la paternità per colpa dei contenuti non in linea con quanto da lui progettato.