Un sito Web è un insieme di pagine Web correlate.

Nella progettazione di un sito Web bisogna tenere conto della sua natura ipertestuale che permette di accedere direttamente a una delle sue parti, al contrario di un testo tradizionale che normalmente viene letto dall’inizio alla fine (in un ipertesto più che di lettura si parla di consultazione).

Le pagine possono essere multimediali cioè possono contenere elementi di natura diversa; i documenti ipertestuali e multimediali vengono chiamati anche ipermediali, ma di solito si continua ad usare il termine ipertesto.

Per costruire un sito bisogna prima di tutto definirne gli obiettivi, poi precisarne i contenuti, organizzare i contenuti in pagine e creare una struttura di navigazione tra le pagine.

I contenuti devono essere suddivisi in pagine in modo adeguato e la struttura di navigazione non deve creare disorientamento.

Per la progettazione può essere utile creare uno storyboard, cioè uno schema delle varie pagine e dei collegamenti tra queste (cioè della struttura del sito).

Molto importante è la home page; la home page è il punto di ingresso preferenziale al sito; è la prima pagina del sito che di solito contiene una panoramica dei contenuti del sito.

Per chi naviga il termine home page indica la prima pagina caricata all’avvio del browser.

Il sito deve essere chiaro e semplice da usare e deve avere una propria identità; è importante che il sito abbia uno stile di design uniforme, cioè che le pagine abbiano un’impostazione costante, sia come presenza e disposizione degli elementi nella pagina che soprattutto come forma di navigazione.

In una pagina si possono inserire elementi di tipo diverso come testo, liste, tabelle, immagini, mappe, animazioni, filmati o suoni. La progettazione della pagina richiede conoscenze di grafica e design; l’uso di elementi multimediali deve attirare ma non disturbare.

Sulle pagine si può apporre una firma contenente informazioni sul Webmaster (magari con un collegamento al suo indirizzo di posta), lo stato della pagina (per esempio “lavori in corso”), la data dell’ultima revisione, informazioni su copyright e marchi registrati e così via.

Nella creazione delle pagine bisogna tenere conto dei browser che probabilmente verranno usati per la consultazione. Se il sito deve essere reso disponibile solo in una intranet non ci sono molti problemi, poiché dovrebbe essere noto il software disponibile, ma se il sito viene pubblicato su Internet la situazione può essere molto varia e bisogna fare attenzione ai tag non standard non riconosciuti da tutti i browser, alle nuove tecnologie non supportate da tutti i browser, alla necessità di scaricare plug-in, che potrebbe infastidire e così via; inoltre molti contenuti multimediali richiedono tempi di scaricamento molto lunghi.

Progettazione del testo delle pagine

Le informazioni possono essere suddivise in pagine piccole (organizzazione a pezzi) o in pagine lunghe (organizzazione a flusso continuo).

Nell’organizzazione a pezzi le pagine vengono caricate rapidamente ed è facile la consultazione di una pagina, ma possono essere necessari molti link per arrivare a una informazione e la manutenzione dei link può essere onerosa. Nell’organizzazione a flusso continuo la manutenzione delle informazioni in un unico file è più semplice ed è facile anche stampare le informazioni, ma il tempo di caricamento è più lungo e la struttura è rigida.

Comunque la suddivisione in pagine dipende soprattutto dal contenuto; un singolo argomento deve essere mantenuto su una pagina e non spezzato su più pagine.

Nella scrittura dei testi bisogna tenere conto che ogni pagina deve essere autonoma, perché vi si potrebbe accedere direttamente; non si può fare quindi riferimento implicitamente a informazioni date in pagine precedenti.

Bisogna evitare di usare testi troppo lunghi ma facilitare la scansione del documento predisponendo un sommario, suddividendo il testo in blocchi con titoli esplicativi ed evidenziando le parole chiave. I titoli devono sempre esprimere in modo chiaro il contenuto (questo è utile anche per i motori di ricerca che devono indicizzare la pagina).

Le informazioni contenute devono essere corrette ed è necessario mantenere periodicamente aggiornate le pagine, eliminando le informazioni non più valide.

Il tipo di linguaggio, più o meno formale o tecnico, dipende dal pubblico a cui è rivolto il sito, ma naturalmente bisogna scrivere in modo chiaro, sintetico e, ovviamente, corretto.

Nel testo bisogna evitare di usare la terminologia specifica del browser (tipo fare clic qui), che potrebbe addirittura essere impropria in certe situazioni (e se l’utente usa la tastiera e non il mouse?).

Il testo deve essere disposto nella pagina in modo da evitare che la lettura richieda un eccessivo scrolling verticale, ma soprattutto lo scrolling orizzontale.

Se il sito è di interesse internazionale si può creare una versione delle pagine in Inglese e predisporre un link per passare da una versione all’altra.

Progettazione della grafica delle pagine

In una pagina, anche di solo testo, si può far uso del colore per ottenere un aspetto più attraente.

Non bisogna però dimenticare che la pagina deve essere prima di tutto leggibile; è importante il contrasto tra il colore dello sfondo e quello del testo: alcune coppie di colori danno una buona leggibilità mentre altre stancano l’occhio e rendono difficoltosa la lettura.

La regola della leggibilità vale naturalmente anche nel caso si usi una immagine di sfondo per personalizzare il sito; è bene usare immagini non troppo particolareggiate e con colori tenui.

È invece importante non modificare il colore standard dei link (blu per i link da visitare e rosso o viola per quelli già visitati) perché ciò potrebbe confondere.

Per quanto riguarda l’uso di immagini o animazioni bisogna tenere presente che se la pagina contiene molti elementi grafici i tempi di scaricamento della pagina possono essere molto lunghi e non tutti sono disposti ad aspettare; inoltre troppa grafica può distogliere l’attenzione e la presenza di animazioni incessanti innervosisce.

Se la pagina contiene molta grafica si può almeno strutturare la pagina in modo che la parte iniziale comprenda una barra di navigazione con pochi elementi grafici e del testo (informazioni o collegamenti) che l’utente possa esaminare intanto che viene scaricato il resto della grafica.

È importante prevedere del testo in sostituzione alle immagini perché l’utente può anche disabilitare la visualizzazione delle immagini per navigare più velocemente.

Per l’inserimento di immagini è importante scegliere il formato adeguato (tra GIF, JPEG e PNG).

Le immagini GIF devono essere create con la tavolozza Web safe che evita il dithering (cioè la simulazione di colori non disponibili con altri disponibili) offrendo un risultato migliore.

Se la pagina deve contenere immagini di grandi dimensioni, è meglio creare una pagina con miniature di queste immagini che facciano da collegamento alle immagini originali; in questo modo la pagina con le miniature viene scaricata più velocemente e l’utente può decidere se visualizzare le immagini originali.

Si possono usare immagini interlacciate (o progressive, secondo il formato) per fare in modo che l’immagine si formi a poco a poco sulla pagina, man mano che le informazioni sono disponibili, oppure caricare rapidamente un’immagine a bassa risoluzione e poi sostituirla con una ad alta risoluzione.

Per l’inserimento di contenuti multimediali sono disponibili molte tecnologie; è bene però farne un uso limitato, senza esagerare con gli effetti speciali.

Progettazione della struttura del sito

La presenza dei collegamenti sulle pagine determina le modalità di navigazione e quindi la struttura del sito.

Esistono diverse strutture standard usate di solito nella creazione degli ipertesti:

• a rete: ogni pagina può essere collegata liberamente ad altre pagine; in realtà non è una vera e propria struttura;
• ad albero: è la classica organizzazione gerarchica delle pagine; permette di seguire facilmente l’approfondimento desiderato e di conoscere la propria posizione; è bene evitare di creare troppi livelli;
• a stella: è in pratica un albero ad un solo livello; tutte le pagine sono raggiungibili con un solo salto; la poca profondità può portare ad una home page con un eccessivo numero di link;
• a lista lineare: ogni pagina è collegata alla precedente e alla successiva; è molto rigida ma può prevedere delle alternative, con ulteriori collegamenti più liberi;
• mista con combinazione di albero e lista: è adatta a documenti strutturati ma può disorientare nella navigazione.

Non esiste una struttura migliore in assoluto; di solito si usano strutture miste o diverse strutture in parti diverse del sito; per la scelta bisogna tenere conto del genere di informazioni presentate, della facilità nel raggiungere le informazioni, della possibilità di scelta di percorsi personalizzati e così via.

È importante che il sito adotti un valido metodo di navigazione per permettere al visitatore di capire la struttura del sito e non perdere l’orientamento.

Se il sito è particolarmente complesso si può inserire un motore di ricerca interno.

Progettazione dei collegamenti

La possibilità di navigazione dipende dai collegamenti (link) presenti nelle pagine.

Per la creazione dei collegamenti si può usare un testo che descriva lo scopo del collegamento, un’immagine o una mappa (un’immagine che porta a destinazioni diverse facendo clic in punti diversi); per le immagini che fungono da collegamenti è ancora più importante che per le altre immagini prevedere del testo sostitutivo, altrimenti si potrebbe limitare la navigazione.

Il testo dei collegamenti non deve contenere il nome del file di destinazione, che si può vedere nella barra di stato.

Per rendere semplice la navigazione bisogna inserire in ogni pagina collegamenti a tutte le sezioni del sito e alla home page.

Il collegamento alla home page è importantissimo per permettere di ritrovare il punto di partenza durante la navigazione del sito, ma anche per permettere a chi arriva ad una pagina da un sito diverso di poter individuare immediatamente la pagina principale; il collegamento alla home page può essere costituito anche da un elemento grafico come il logo dell’azienda.

Nelle pagine in cui è utile una consultazione ordinata bisogna inserire collegamenti alla pagina successiva e precedente (avanti e indietro).

Può essere utile creare una pagina con la mappa del sito, che permetta di orientarsi sull’organizzazione delle informazioni (per esempio con i titoli delle sezioni e i titoli degli articoli di ogni sezione), direttamente accessibile dalle varie pagine.

Un altro suggerimento è quello di suddividere le pagine in cartelle in modo che l’URL aiuti a capire la struttura del sito.

I collegamenti possono essere:

• collegamenti espliciti di navigazione (avanti, indietro, alla home page ecc.);
• collegamenti impliciti di navigazione (collegamenti a informazioni correlate);
• collegamenti a contenuti multimediali (visualizzati in finestre separate).

I collegamenti impliciti di navigazione possono condurre ad un punto interno alla pagina, ad una pagina interna al sito o ad una pagina di un altro sito. Se il collegamento conduce ad un sito diverso si può visualizzare la pagina di destinazione in una finestra diversa. Il design del sito dovrebbe comunque aiutare a riconoscere le pagine che appartengono allo stesso sito e quindi a capire quando un collegamento conduce a un sito diverso; questa indicazione naturalmente è fornita anche dall’URL visualizzato nella barra di stato quando ci si posiziona sul collegamento e nella barra degli indirizzi quando si visualizza la pagina.

Nel progettare le pagine web è importante considerare le caratteristiche di usabilità e accessibilità.