Grafica per siti Web - L'importanza della grafica in un sito

 

Un articolo di Gianfranco Viasetti sulle migliori tecniche di Web design

 

La grafica per siti web - cose da fare e cose da evitare

 

La grafica di un sito è importante quanto il testo per ottenere un buon rapporto visitatori/contatti. Ma la grafica, quando si parla di siti web, non va intesa come la intendono le agenzie di pubblicità. State lontano dai "creativi" delle agenzie pubblicitarie se volete un sito che funzioni.

  

Esempio di un buon layot grafico

  

La grafica in un sito web è importante, è però altrettanto importante evitare l'errore dei moltissimi Web designer che pensano solo a cercare di stupire gli utenti con la grafica. Bisogna progettare il sito in modo tale che le esigenze grafiche non influenzino negativamente il posizionamento o l'usabilità del sito. Un sito web non è una brochure o uno spot televisivo.

 

Questo noi lo diciamo e lo scriviamo su questo sito da almeno 10 anni, ma non siamo i soli a dirlo. Gerry McGovern, uno dei maggiori esperti mondiali di usabilità web, in un articolo scritto oggi (30/05/2010) sul suo sito, dal titolo "THE REASON WHY AD AGENCY WEBSITES ARE TRULY AWFUL", dice testualmente:

 

"Advertising agencies don't get the Web because the web is the place people go to do things. In 2004, I wrote an article advising companies to never, ever let an advertising agency near their website. Back then, ad agency websites were a total joke. If you wanted to find out the very worst way to design websites all you had to do was look to Ogilvy or Saatchi & Saatchi. So, have ad agencies changed? In 2010, have they gotten any better? No. If anything, they're getting worse. And there's a reason. Quality web management requires a set of skills that are almost diametrically opposed to the skills classical advertisers have [...]". Chi volesse leggere l'articolo completo lo trova qui.

  

In poche parole McGovern avverte di stare lontani dalle agenzie di pubblicità, se vogliamo un sito che incontri le preferenze dei visitatori. I "creativi" delle agenzie di pubblicità non hanno ancora imparato cosa vogliono gli utenti di un sito. Continuano a creare siti come se fossero brochure o spot televisivi.

 

La prima regola da seguire per non penalizzare il posizionamento è separare i contenuti testuali dalla loro formattazione e dal layout grafico delle pagine, ossia ricorrere a fogli stile (CSS - Cascading Style Sheets). Questo è attualmente il procedimento seguito dai migliori web designer, anche da quelli che non si preoccupano del posizionamento, in quanto presenta innumerevoli vantaggi rispetto al classico layout che fa uso di tabelle per formattare ed incolonnare testo e grafica. Quest’ultimo viene ormai usato solo dai web master troppo pigri per  imparare una nuova metodologia di lavoro.

 

Vantaggi dei fogli stile CSS rispetto al layout a tabelle

 

Ma quali sono i vantaggi dell'impiego di un foglio stile per la formattazione delle pagine di un sito? Vediamone subito uno. Supponiamo di avere un sito di 200 pagine o più (come il nostro) e di aver deciso di spostare il menu di navigazione da sinistra a destra (perché abbiamo fatto un sondaggio tra i nostri utenti e la maggioranza ci ha detto che lo preferirebbe sul lato destro).

 

Come spostare il menu di navigazione da sinistra a destra

Layout a tabelle

Se il sito fosse stato progettato alla "vecchia" maniera, con una o più tabelle saremmo costretti ad invertire le dimensioni delle colonne, a tagliare il testo e le immagini contenute nella prima colonna per spostarle nella seconda, spostare poi nella prima colonna ciò che si trova nella seconda, con il rischio di perdere qualche informazione e con un impiego rilevante di tempo. Fatto questo su una pagina dovremmo ripeterlo per tutte le 200 e passa pagine. Quanto tempo ci vuole? Non oso neppure pensarci.

 

Layout fornito da un foglio CSS

Se il layout viene "preso" da un foglio CSS è sufficiente cambiare 2 numeri in tale file per vedere come per magia il menu spostarsi da sinistra a destra immediatamente in tutte le pagine del sito. Tempo richiesto: 1 minuto.

 

Nella foto seguente vedi come si presentano le pagine di questo sito con il menu a sinistra, nella foto successiva come si presentano dopo aver cambiato 2 valori nel foglio stile.

 

 

layout pagina web con menu a sinistra

Layout con menù di navigazione a sinistra

  

Layout sito web con menu a destra

Layout con menù di navigazione spostato sul lato destro: tempo richiesto 1 min.

 

Rapida sostituzione di un font in tutte le pagine di un sito web

Un altro vantaggio di un sito realizzato con i fogli CSS è la possibilità di cambiare in un attimo il font utizzato per i titoli, i sottotitoli, il corpo del testo, i menù, il piè di pagina. Possiamo cambiare non solo il tipo di carattere, ma anche le sue dimensioni, il colore o gli attributi semplicemente cambiando alcuni valori nel foglio stile. Ed le variazioni appariranno immediatamente su tutte le pagine del sito. Con un layout classico a tabelle saremmo costretti ad effettuare queste variazioni pagina per pagina.

 

Tempi rapidi per il caricamento delle pagine del sito

Il foglio stile CSS viene caricato con la prima pagina che viene aperta dal visitatore e rimane nella memoria cache del suo PC. Ciò significa che le pagine successive del sito vengono aperte molto rapidamente perché l'immagine più pesante (di solito la testata delle pagine) e tutte le informazioni relative alla formattazione dei caratteri non devono più venir caricate in seguito.

 

Rapidità nella sostituzione di immagini o colori di sfondo

L'adozione di un foglio CSS da inoltre al web designer la possibilità di sostituire rapidamente la testata, il piè di pagina ed il colore o la texture dello sfondo di tutte le pagine del sito cambiando semplicemente alcune informazioni nel foglio stile.

 

Ottimizzazione migliore per i motori di ricerca

Grazie alla realizzazione del sito con l'ausilio di fogli stile avremo anche la possibilità di ottimizzare meglio i testi delle pagine web per i motori di ricerca. Come è noto infatti i motori danno in genere maggior importanza al testo che appare all'inizio di una pagina, ma non sempre il testo più importante per i motori lo è anche per i visitatori e quindi può capitare che il testo che vogliamo far apparire all'inizio non sia utile per il posizionamento. Grazie al foglio stile possiamo far visualizzare per ultimo del testo che nel codice HTML viene invece prima e che quindi i motori considerano, anche se di poco, più importante.

 

I fogli stile CSS sono da diversi anni consigliati anche dal W3C

Il consorzio internazionale W3C, il più noto organismo che "detta" le regole secondo le quali dovrebbe venir realizzato un sito web per essere accessibile a tutti, da 10 anni consiglia di utilizzare per il layout i fogli CSS anziché le tabelle, ma solo da 5 o 6 anni ciò è diventato davvero possibile. In precedenza il CSS era poco supportato da alcuni diffusi browser e quindi era alquanto problematico e complicato implementare diverse istruzioni. Ora questo problema non c'è più e pertanto non esistono più scusanti per chi continua a progettare siti con layout densi di tabelle annidate.

 

La larghezza delle pagine web - meglio strette o larghe?

Alcuni potenziali clienti che stanno pensando di rivolgersi a noi per la realizzazione del loro sito, quando guardano i siti che abbiamo creato negli ultimi 3 o 4 anni, ( www.viasetti.it/realizzazione_siti_web/ultimi_siti_realizzati.htm ) mi chiedono: "come mai sono tutti cosi stretti, non è possibile avere le pagine più larghe?". "Certo che è possibile" - rispondo - "ma è sconsigliabile".

 

Perché è sconsigliabile avere pagine "larghe"?

Esistono due modalità per definire la larghezza delle pagine web: il layout "liquido" (o elastico) ed il layout a larghezza fissa.

 

Con il layout "elastico" la larghezza delle pagine si adatta automaticamente alla dimensione della finestra o del video dell'utente. Diversi anni fa quasi tutti i siti adottavano questa soluzione, oggi è caduta in disuso e i più noti web designer internazionali usano quasi sempre un layout a larghezza fissa, difficilmente superione a 780 pixel (come è possibile vedere su www.csszengarden.com - il noto sito di riferimento per i designer di tutto il mondo). C'è ancora chi pensa che siccome il monitor è orizzontale anche le pagine web dovrebbero esserlo, ma sono sempre di meno.

 

I motivi per preferire una pagina "stretta" sono essenzialmente due:

 

  1. Gli esperti di scrittura creativa da sempre affermano che un testo più largo di 60/70 caratteri si legge con maggior difficoltà sia sul video che su carta. Distrae e affatica il lettore rendendolo più desideroso di interrompere la lettura. Ciò è stato confermato anche da vari sondaggi (tra cui il nostro) effettuati in tutto il mondo su decine di migliaia di utenti internet. Inoltre avere uno spazio bianco o comunque senza parole ai lati del testo rende la lettura più rilassante.
  2. Un layout a larghezza fissa consente al Web designer o al grafico di decidere dove esattamente visualizzare le informazioni e le immagini correlate sulla pagina, il numero delle righe di un paragrafo o di una frase, ecc.. La posizione delle informazioni e delle immagini su una pagina con layout elastico sfugge spesso al controllo in quanto dipende essenzialmente da quanto è larga la finestra sul video del visitatore.

Come è cambiata negli anni la tecnica del Web design di qualità

Se chiedevate 6 o 7 anni fa ad un Web designer di realizzare un sito con la tecnica dei fogli CSS vi avrebbe quasi certamente risposto che non era possibile perché, attenendosi alle regole del W3C e dello standard CSS, sarebbe uscito un sito "brutto", impresentabile, banale, squadrato, noioso da vedersi, privo di attrattiva per qualsiasi visitatore. In parte era vero, a causa del mancato supporto di alcuni diffusi browser ai CSS, in parte si trattava invece della mancanza di volontà ad imparare a programmare in modo diverso da come si era abituati.

 

Se lo chiedete oggi e vi sentite rispondere con le stesse argomentazioni, cambiate professionista. Da alcuni anni i CSS sono supportati molto bene dai browser; la qualità grafica e flessibilità nella formattazione di un sito che rispetta lo standard W3C e basato su CSS è normalmente superiore a quella possibile con siti che non utilizzano i CSS e che non rispettano gli standard. Se avete dubbi in proposito vi invito a visitare www.csszengarden.com, una raccolta di centinaia di siti monopagina realizzati dai migliori Web designer internazionali allo scopo di dimostrare cosa è possibile fare con i CSS se sono nelle mani giuste.

 

Tutti i siti che trovate in questa raccolta si basano sulla stessa pagina HTML, alla quale il regolamento non consentiva di cambiare nemmeno una virgola. Ciò che cambia è solo il foglio CSS. Rimarrete stupefatti di come può cambiare il layout grafico di un sito cambiando solo alcune informazioni nel foglio stile.

 

La prossima volta che qualcuno (esperto o meno di siti web) vi dirà che per fare un "bel sito" bisogna usare Flash invitatelo a visitare csszengarden!

 

Alcuni cenni su Zen Garden e sul suo ideatore Dave Shea

 

Dave Shea, il Web designer ideatore e curatore di csszengarden.com

 

Dave Shea (nella foto), nel Maggio del 2003 ha avuto l'idea di creare un sito che sin dall'inizio si è rivelato un fenomeno internazionale e che ha cambiato la percezione del Web design di qualità. CSS ZEN GARDEN è il risultato della collaborazione di centinaia di talenti della grafica e del Web design provenienti da tutto il mondo. Zen Garden è stato creato con l'intento (perfettamente riuscito) di dimostrare cosa è possibile fare a livello visuale con il design basato esclusivamente sullo standard CSS.

Come funziona Zen Garden

Viene chiesto ai designer che intendono collaborare di realizzare una pagina web graficamente originale utilizzando unicamente un foglio CSS e immagini. Il vincolo è che tutti i progetti devono utlizzare il file HTML di base creato da Dave Shea, identico in tutti i design e non modificabile. Inoltre il tutto deve essere compatibile con lo standard W3C.

 

Detto così sembra un progetto pazzesco, un'utopia. Eppure i risultati ottenuti dalle centinaia di Web designer che hanno raccolto la sfida hanno dimostrato che i fogli stile CSS sono strumenti di design estremamente potenti, se vengono messi nelle mani di chi li sa usare. Css Zen Garden è da anni fonte di ispirazione per migliaia e migliaia di Web designer. Anche noi ci siamo ispirati a questo sito per trovare idee utili alla realizzazione di alcuni lavori.

 

Grazie a questo fortunato progetto Dave Shea ha ricevuto molti premi, tra cui il "Best of Show". Del suo lavoro si è parlato su libri e riviste in tutto il mondo. Shea è titolare dell'agenzia di Web design Bright Creative e tiene una pubblicazione su www.mezzoblue.com

Dave Shea è anche membro del WaSP (Web Standards Project), un team di designer che promuovono nel mondo il Web design basato su tecnologie multipiattaforma.

 

Un'idea della sua enorme popolarità potete farvela cercando Dave Shea in Google: vi sono oltre 1.500.000 siti che parlano di lui.

 

L'importanza della scelta dei colori per la grafica di un sito

Il colore genera emozioni e sensazioni diverse nei visitatori ed è uno degli strumenti che il Web designer ha a disposizione per catturare l'attenzione.

 

Il colore è una parte significativa della comunicazione visiva e un bravo designer sa quali sono i colori più appropiati al messaggio che intende comunicare. Il colore, se utilizzato sapientemente, può essere altrettanto persuavivo del testo e delle immagini. Se dobbiamo creare un sito per un'azienda che noleggia impianti luce per concerti all'aperto il colore più appropriato per lo sfondo sarà probabilmente il nero. Vedi ad esempio www.musicartservice.com, un sito da noi realizzato alcuni anni fa. Dubito che il rosa o l'arancio sarebbero stati adeguati.

 

L'ideale sarebbe scegliere sempre colori che abbiano attinenza con l'argomento trattato. Come sfondo laterale di un sito che tratta di impianti fotovoltaici abbiamo scelto l'arancione ( http://www.fotovoltaicopiantoni.it ).

 

Associazioni psicologiche dei colore

Nella scelta dei colori dovremmo tener conto non solo dell'argomento trattato dal sito ma anche delle associazioni psicologiche normalmente attribuite ai colori.

Vediamo le più comuni:

 

Le associazioni psicologiche dei colori possono variare da paese a paese. Ad esempio negli Stati Uniti si associa spesso il verde al dollaro, ai soldi, in Europa no. Negli USA l'arancione viene associato ai prodotti economici in quanto vi è la consuetudine di utilizzarlo nelle confezioni di articolo a basso costo.

Gli uomini preferiscono il blu al rosso, le donne viceversa.

 

Il colore andrebbe quindi scelto anche in base al target di utenza a cui si rivolge prevalentemente il sito.

 

Per approfondire la conoscenza sull'influenza dei colori potete consultare il sito www.colorcom.com

 

 

Prossimamente analizzeremo altri aspetti della grafica di un sito, quali la scelta dei font grafici e no, la loro dimensione, il loro colore ed i colori per i titoli.

 

 

 

 

Se non hai trovato in questa pagina ciò che cercavi segnalaci il problema cliccando qui. I tuoi commenti e suggerimenti sono sempre benvenuti.

 

TEL. 335.64.56.855 - 030.258.43.15

 

©2005-2010 Gianfranco Viasetti - All rights reserved. E' vietato duplicare questo articolo, anche in parte e con qualsiasi mezzo. 

 

 

 

Torna ad inizio pagina