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.

Costruire comunità online

Imparare come pianificare, progettare, gestire, manutenere una comunità online grazie alla FAO, la Food and Agriculture Organization? Sì, possibile.

La FAO, grazie al progetto Imark, ha messo online un intero corso gratuito chiamato Building Electronic Communities and Networks in aiuto di quanti desiderano approfondire i concetti di comunità online, le professionalità richieste, i passi da seguire. L’occhio di riguardo è rivolto al mondo dell’agricultura, essendo FAO impegnata da anni in questi contesti, ma il ricchissimo materiale del corso aiuta chiunque sia alle prese con un progetto che necessiti dell’integrazione di una comunità, sia esso un weblog, una mailing list, un forum e quant’altro.

Il corso è strutturato e pensato davvero bene, e impiega al giusto modo la tecnologia web, Javascript e Flash per facilitare l’apprendimento. Ogni lezione è poi scaricabili e stampabile in formato PDF, così da formare un vero e proprio manuale di riferimento per chi si vuole interessare di questo mondo. E non vengono lesinati neppure link a risorse in rete di approfondimento.

Una risorsa davvero preziosa.

Migrare un sito alla nuova versione

Uno degli aspetti solitamente trascurati quando ci si trova a riprogettare un sito web dinamico è la stesura di un “piano” di migrazione, cioè la definizione di una serie di linee guida che portino la nuova versione del sito in sostituzione della precedente.

Solitamente si pensa che sia sufficiente sovrascrivere la vecchia versione, il motore CMS, le parti di codice, i template, il tutto senza tanti complimenti.

Seguire questo modo di procedere ha in realtà diversi aspetti negativi.

Per prima cosa, in caso di problemi, così facendo è molto difficile poter tornare alla versione precedente del sito, soprattutto se il sito ha un buon bacino di pubblico.

E’ bene accertarsi se il sito sia installato su più server bilanciati e compiere l’operazione prima su una delle macchine, testare il sito con una piccola percentuale di utenza, e poi ripetere la stessa operazione sugli altri server.

Ma la migrazione di un sito va pensata già in fase di progetto. Spesso ci si dimentica che una buona percentuale del traffico di un sito proviene dai motori di ricerca, e nel convertire contenuti e parte di codice alla nuova versione non vengono mantenuti gli stessi URL della versione precedente. Vi accorgerete presto di questa dimenticanza quando, analizzando il traffico del sito, noterete un crollo degli accessi. In un precedente intervento abbiamo visto come sia possibile evitare che questo succeda, presentando gli accorgimenti usati durante la migrazione di Fucinaweb.

In base al traffico e all’importanza del sito, la messa online potrebbe essere suddivisa in più passi incrementali. In questo fanno scuola i grandi, Google per primo. Nel rilasciare la nuova versione di Blogger, gli ingegneri di Google si sono preoccupati di limitare i traumi per chi gestisce il proprio weblog con la nuova piattaforma. Per prima cosa, ancora ad Agosto, hanno annunciato il rilascio del nuovo servizio, limitando gli inviti e integrando il login di Google Accounts (quella della registrazione, abbiamo visto qualche mese fa, è una delle operazioni più delicate da integrare). Nel corso delle settimane l’integrazione tra il vecchio servizio e il nuovo è via via aumentata, così come le nuove funzionalità: la beta è stata aggiornata, sono state migrate alcune importanti funzioni della vecchia versione, è stata migliorata la funzione di login, e via via, fino ad arrivare a Novembre, dove la migrazione è in stato avazato e non ancora conlusa.

Non dico che per i nostri progetti web dobbiamo prevedere mesi e mesi di migrazione, ma ricordate di non ragionare mai come se il sito dinamico attuale vada in completa sostituzione del precedente, come nello sovrascrivere un file. La procedura di aggiornamento va studiata caso per caso, e visto che partecipa ad aumentare i tempi di rilascio, va attentamente pianificata.