Costruzione di un sito web

La mappa - Definire la struttura del sito
Il primo passo della realizzazione di un sito web consiste nella definizione della struttura gerarchica del sito, e quindi nella creazione di una mappa (si consiglia scritta) che ne descriva le caratteristiche. Ora, l'elemento necessario in un sito web è la cosiddetta "home page", ossia quella pagina che accolga il visitatore, che sia in grado di descrivere le funzioni del sito, e che permetta l'accesso alle varie sezioni. L'importanza dell'home page è centrale in un sito web, e vedremo come studiare al meglio la collocazione dei contenuti. Per quanto riguarda il resto degli elementi, logicamente essi dipendono interamente dal tipo di sito che volete realizzare. Limitiamoci però a dire che si consiglia di creare gerarchie semplici in cui ogni livello della scala non possieda troppi elementi, per ragioni di pura accessibilità. Uno schema di mappa è rappresentato in figura.

Ma a cosa serve la mappa?
La mappatura della struttura del sito permette di poter collocare e selezionare contenuti, menu, immagini al fine di ottenere un layout professionale. Essa rende quindi l'idea completa della struttura del nostro sito, e ci permetterà di definire le varie aree del layout. E' usanza di molti siti web dedicare alla mappa del sito una propria pagina, da cui sia possibile accedere alle varie sezioni del sito. Ora, non è logicamente necessario creare una struttura ad albero grafica, dal momento che è sicuramente elegante ed accessibile un elenco listato di links.
La scelta dei colori e dei fonts
Importante prima di definire una bozza del nostro layout, è puntualizzare la necessità di un'accessibilità dal punto di vista dei colori.
Ora, essendo l'obiettivo un'armonia visiva, dovremo optare per scale sfumate di colori, e quindi un passaggio da un blu ad un azzurro e infine ad una tonalità meno intensa, e/o per l'utilizzo di tonalità complementari, che si compensino a vicenda, non creando squilibrio visivo. Inutile dire che le tonalità cromatiche scelte devono assolutamente essere coerenti con la tipologia del sito che intendiamo realizzare, quindi nel caso di un sito web di uno studio legale difficilmente si utilizzeranno tonalità come il rosa brillante. Concetto sicuramente banale, ma da tenere in considerazione nella scelta dei colori. Ciò nonostante vari fattori, quali il gusto personale e il desiderio di originalità, giustamente concorrono a determinare il set grafico del sito e su ciò non discuteremo. Negli esempi sottostanti, si evidenziano alcuni abbinamenti sicuramente efficaci:

Abbinamenti di colori efficaci

Abbinamenti di colori efficaci

Per quanto riguarda i testi, l'unica cosa che puntualizziamo è che la scelta del carattere deve essere in relazione alla facilità di lettura. Evitare quindi caratteri strani o sconosciuti e scritture troppo piccole. I caratteri più usati sono Arial, Verdana, Trebuchet.
Preparare una bozza del layout
Una volta comprese le funzionalità del nostro sito, e a conoscenza delle norme di base di accessibilità, lo passo successivo è l'elaborazione di una bozza cartacea o computerizzata. Se disponete di un editor grafico quali ad esempio Photoshop o Fireworks o altri, provate a realizzare una bozza in uno spazio di 1024*768px pari alla dimensione standard della maggior parte dei video. Altrimenti, non fatevi scrupoli ad utilizzare la carta.
Per poter elaborare la bozza di layout è necessario considerare le parti principali che lo compongono:

In base alla quantità dei contenuti del nostro sito definiamo la struttura più adatta e funzionale. Ecco degli esempi di layout a una o più colonne.
Importante nella realizzazione è che il menu sia facilmente visibile, essendo l'elemento principale che consente ai nostri utenti l'accesso e la navigazione al sito.

Preparare una bozza del layout

Analizziamo ora nel dettaglio le caratteristiche di ogni settore della pagina.
HEADER

Si tratta come già detto della fascia superiore del sito. Come in documento, essa contiene il logo oppure un titolo significativo. Molto diffusa e funzionale la pratica di inserire eventuali banners pubblicitari di dimensioni variabili, pur mantenendo comunque la priorità del logo dal punto di vista visivo. In poche parole, gli sponsor non devono risultare più coinvolgenti nei confronti dello sguardo dell'utente rispetto al logo.
FOOTER
Costituisce la fascia inferiore di un sito, e sostanzialmente raccoglie informazioni di carattere secondario, come statistiche, copyright, indirizzi e-mail, autore, ecc.
Non si consiglia l'impiego di banners in questa fascia in quanto le rendite sarebbero sicuramente basse.
CORPO CENTRALE o BODY

Esso contiene le informazioni specifiche della pagina.
COLONNE LATERALI

Sicuramente opzionali, ma consigliate vivamente. Gli elementi che possono contenere sono menu, moduli di ricerca o login o di iscrizione a newsletter, banner pubblicitari (dimensioni 120*240px), links, ecc.
MENU

Esso può essere incluso in una fascia orizzontale sotto all'header, oppure in una banda laterale al BODY. Tuttavia è necessario porre tale elemento in posizione strategica, consentendo esso l'accesso a tutte le sezioni del sito.
Realizzare un layout a due colonne in XHTML e CSS
Con questa lezione vedremo come creare un layout a due colonne, semplice ed elegante impaginando i contenuti del nostro sito!
L'impaginazione avverrà principalmente in due colonne, ognuna delle quali conterrà a sua volta dei box. Ogni box rappresenterà una sezione del nostro sito!
Passiamo alla stesura del codice Css:
<style>
body {
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0%;
}

/* proprietà delle due colonne principali*/
.colonna {
width: 46%;
float: left;
margin: 1%;
border: 1px solid #ccc;
}

/* proprietà dei box interni alle colonne */
.interna {
width: 94%;
float: left;
margin: 1%;
border: 1px solid #ccc;
}

.interna h1 {
background-color: #FF9900;
color: #0000FF;
font-size: 20px;
}

</style>
Ogni colonna occuperà il 46% dello schermo, sarà allineata al margine sinistro ed avrà un margine pari all'1% dello schermo. Al contrario, i box interni alle colonne occuperanno il 94% dell'elemento in cui sono contenuti (la colonna principale nel nostro caso), si allineeranno a sinistra (nella colonna) e avranno un margine pari all'1%. Abbiamo anche voluto creare uno stile per i titoli h1 presenti all'interno dei box, ma questo è solo un dettaglio grafico!
Questo layout è anche chiamato layout fluido; si adatterà infatti ad ogni risoluzione in quanto è stato creato con valori in percentuale! Se preferite usare i valori in px (layout fissi) fate pure, ma sappiate che la struttura che avete creato sarà ben visibile solo alla risoluzione alla quale state progettando!
Passiamo ora all'(X)HTML necessario per creare la struttura vera e propria delle colonne e dei relativi box interni:
<!-- inizio prima colonna -->
<div class="colonna">
<div class="interna">
<h1>Sezione 1 </h1>
<p>Contenuto della sezione 1 </p>
</div>
<div class="interna">
<h1>Sezione 2 </h1>
<p>Contenuto della sezione 2 </p>
</div>
<div class="interna">
<h1>Sezione 3 </h1>
<p>Contenuto della sezione 3 </p>
</div>
</div>

<!-- inizio seconda colonna -->
<div class="colonna">
<div class="interna">
<h1>Sezione 4 </h1>
<p>Contenuto della sezione 4 </p>
</div>
<div class="interna">
<h1>Sezione 5 </h1>
<p>Contenuto della sezione 5 </p>
</div>
<div class="interna">
<h1>Sezione 6 </h1>
<p>Contenuto della sezione 6 </p>
</div>
</div>
Ora che avete capito come funziona, potete anche provare a creare un layout a tre colonne!
Le priorità visuali
A questo punto abbiamo definito il layout del nostro sito, ossia abbiamo distinto le sezioni principali (header, footer, colonne, body, menu).
Ora è necessario collocare i vari elementi correttamente, ossia in base alla loro importanza.
A tale proposito si sono svolti diversi studi atti a determinare l'ordine istintivo di visualizzazione degli elementi della pagina da parte dell'occhio umano.
Lo schema qui sotto riporta in ordine discensivo (dal primo visualizzato all'ultimo) le zone del documento.

Le priorità visuali
A fronte di ciò, dovremo decidere le priorità dei contenuti, e quindi posizionarli di conseguenza. Un banner importante occuperà la zona 1 o 2, il menu la zona 3, e via così.
Se compiuta correttamente, questa procedura produrrà ottimi risultati.
Le caratteristiche del logo
Nel caso in cui il nostro sito sia l'immagine sul web di un'azienda di per sè esistente, il problema della creazione di un logo non sussiste, nel senso che si predilige utilizzare il marchio della società. Se tuttavia il nostro sito non ha un appoggio su una realtà aziendale o sociale, dobbiamo procedere con la creazione di un logo efficace.
Il logo diventerà il simbolo che contraddistingue il vostro sito web. Esso non dovrebbe essere modificato nel tempo in maniera radicale, in quanto è punto di riferimento per gli utenti.
Ecco alcune caratteristiche che deve possedere:

La collocazione del menu
Nelle precedenti lezioni si è evidenziata l'importanza del menu in un sito web. Esso infatti è l'elemento di primario accesso alle varie sezioni e zone.
E' quindi importante studiarne la collocazione, di modo da renderlo quanto più visibile ed accessibile possibile.
Basandoci sulla teoria delle priorità visuali precedentemente illustrata, è facilmente intuibile che il menu debba essere collocato in una fascia inferiore all'header, o in una banda laterale in posizione visibile. Ecco quindi due esempi:

Collocazione del menu
Si consiglia inoltre la creazione di "sub-menu di navigazione", ossia quei collegamenti posti all'inizio dei contenuti del body, che permettano all'utente di tornare facilmente alle sezioni primarie. Ad esempio: "Home > Nome sezione 1 > Nome sottosezione 1" se posto all'inizio dei contenuti del body, permette il ritorno alla sezione madre, e infine alla home page.
Si tratta di elementi sicuramente non essenziali, ma che tuttavia garantiscono un'alta navigabilità del sito.
A tale proposito, ecco un esempio:

Collocazione del menu
Realizzare collegamenti accessibili
Ora, lo stesso problema si ha per quanto riguarda i links, ossia i collegamenti ipertestuali. Il nostro obiettivo sarà quindi quello di rendere i link quanto più visibili e descrittivi delle aree a cui rimandano.
Di ogni links si definiscono:

Assegnare una descrizione ai links
Prendiamo in esame l'attributo "title" di un link, che permette di assegnare un titolo, o meglio una descrizione ai nostri links che si attiverà in automatico al verificarsi dell'evento OnMouseOver, ossia al passaggio del cursore del mouse sopra al link. Prendiamo ad esempio un collegamento al sito Pippo.com:
<a href="http://www.pippo.com">Pippo.com</a>
Il link è normalissimo, e il TAG "a" ha come unico attributo "href" che setta l'URL a cui deve rimandare.
Proviamo ora ad aggiungere l'attributo "title":
<a href="http://www.pippo.com" title="Visita il sito Pippo.com">Pippo.com</a>
Il risultato sarà che al passaggio del mouse sopra al link, apparirà "Visita il sito Pippo.com".
Nelle descrizioni dei links, è sconsigliato inserire cose del tipo "Clicca qui per accedere a..." poichè si va a ledere quelle che sono le funzioni principali dell'attributo "title". Esso infatti dovrebbe contenere informazioni di descrizione, che invoglino l'utente ad cliccare, non istruzioni su cosa fare.
NB: non è prudente essere con la lunghezza delle descrizioni dei links, poichè diventerebbero inaccessibili.
Finestra di apertura del link

HTML permette di definire dove caricare la pagina corrispondente all'URL del link tramite la definizione dell'attributo TARGET.
Se definito a "_blank" esso indicherà al browser di aprire il documento in una nuova finestra. Altrimenti, se non impostato, l'URL sarà caricato nella medesima finestra.
Nel caso in cui si utilizzi una struttura a frames, è possibile impostare in quale frame aprire il link, tuttavia non ci occuperemo di tale problema, dal momento che i frames sono altamente sconsigliati nel design di un sito web.
Vige anche qui la regola di evitare gli eccessi, e quindi troppe links che aprono nuove finestre sono poco consigliati.
Links interni alla pagina: i vantaggi in termini di accessibilità

Innanzitutto, è meglio chiarire come si fa un link interno. Supponiamo di avere un testo suddiviso in sezioni. Ogni sezione avrà il suo titolo, ad esempio la sezione due potrà avere come titolo "Sezione numero 2". Quindi scriveremo:
<a name="sezione2">Sezione numero 2</a>
E il link:
<a href="#_sezione2">Vai alla sezione 2</a>
L'importanza dei links interni sta nel fatto che consentono una navigazione molto veloce all'interno di una pagina. Consentono di raggiungere punti diversi del documento senza "scrollare" tutto il documento. Sicuramente un passo avanti in termini di accessibilità.
Utilizzo delle chiavi di accesso rapido (Accesskey)

Per accesskey si intende un carattere che se digitato in una determinata sequenza (poi vedremo quale) comporta l'apertura di un collegamento. Un esempio lampante dell'utilizzo delle accesskey è il menu del nostro browser internet. Se premete alt durante la navigazione, otterrete un effetto di questo tipo:
File | Modifica | ...
Si noti come la prima lettera di ogni voce viene sottolineata. Questo perchè? Cosa indica? Ebbene, la lettera sottolineata è il carattere che se premuto in una determinata sequenza, attiverà il menu corrispondente. Quindi digitando ALT + F avremo accesso al menu "File" del nostro browser.
Questa tecnica è applicabile anche alle pagine web e in particolare ai tag <a> , <fieldset> <input> , ecc.. Vediamo un esempio:
<a href="http://www.pippo.com" accesskey="p" />Sito di Pippo</a>
Si può notare che il collegamento di esempio ha come accesskey il carattere "p". Digitando quindi la sequenza ALT + p + [Invio] avremo "accesso" al link e quindi si aprirà la pagina http://www.pippo.com. La combinazione quindi per l'utilizzo delle accesskey è ALT + chiave + [Invio]. Si consiglia di settare come "chiave" sempre la prima lettera del link... oltre ad essere un fattore estetico e di rapporto logico, aiuta l'utente nella memorizzazione.
Le accesskey non sono di natura visibili dall'utente del nostro sito, poichè non vengono presentate in nessun modo, nè al passaggio del mouse sul link nè in altri eventi, quindi spetta a noi renderle visibili.
Le soluzioni per fare questo possono essere mille e originali. Ad esempio potremmo creare una legenda sopra il menu con le accesskey e la combinazione per attivarle, oppure potremmo sottilineare la prima lettera del link. Ad esempio il link a pippo.com potrebbe essere questo: " Pippo.com". Potremmo porle in un DIV invisibile, con display="none", che al click su un link del tipo "Visualizza le accesskeys" compare.
Formati delle immagini - Quale scegliere
Inutile dire che le immagini svolgano un ruolo centrale nella grafica del sito web. Al di là delle immagini che compongono l'ossatura del layout, in questa lezione vedremo alcuni accorgimenti riguardo le immagini del contenuto del sito.
E' buona cosa definire innanzitutto le tipologie di immagini possibili nel web.
Formato GIF Statica

Esso consente una gamma di 256 colori. Permette di dare trasparenza allo sfondo dell'immagine. Non consente di realizzare animazioni o banners.
Formato GIF Animata

Esso consente una gamma di 256 colori. Non permette di dare trasparenza allo sfondo dell'immagine. Consente di realizzare animazioni o banners.
FORMATO JPG o JPEG
La gamma dei colori arriva a 16,7 milioni. Non consente animazioni o trasparenze, quindi l'impiego primario è nel campo fotografico.
FORMATO PNG

Colori da 256 a 16,7 milioni. Permesse le trasparenza, tuttavia non la creazione di fotogrammi animati. Ottima la risoluzione e molteplici le possibilità di impiego.
Ora, essendo a conoscenza dei tipi di formati disponibili, a voi la scelta. Tuttavia mi permetto di consigliare il formato PNG per le immagini statiche, mentre il formato GIF animato per la realizzazione dei banners.
Accessibilità
E' ormai ben compreso il concetto per cui un sito web deve essere in sè armonico e coerente, evitando elementi che eccedano dalla grafica e dallo status del layout.
In questo senso quindi, si sconsiglia vivamente l'utilizzo smodato di immagini nelle pagine, e l'impiego di tonalità troppo brillanti, che potrebbero essere lesive nei confronti dell'attenzione del lettore.
Realizzare mappe immagine con Fireworks
Molti siti offrono delle immagini interattive in cui porzioni delle stesse sono link a pagine differenti. Si tratta di immagini GIF particolari.
In questo tutorial analizzeremo il metodo per creare una semplice mappa con FireWorks 8 di Macromedia, ma lo stesso procedimento potrebbe essere adottato con Adobe Photoshop.
Apriamo un nuovo documento, ad esempio 300*300 pixel, e creiamo una semplice mappa come in figura.

Immagini mappate
Ora dal pannello strumenti di sinistra clicchiamo su "Strumento punto attivo rettangolare" presente nel gruppo "Web" e creiamo un riquadro sopra il primo rettangolo azzurro. Quindi compiliamo il menu "Proprietà" in basso inserendo i seguenti dati:

Ripetiamo lo stesso procedimento per i rettangoli rimanenti ed esportiamo l'immagine.
Pensandoci bene, è possibile anche animare la nostra mappa lavorando sulla barra "Fotogrammi e cronologia", inserendo diversi fotogrammi, magari con link diversi.
Dimensionamento dei font - Una scelta accessibile
In questo tutorial vedremo un piccolo trucco per combinare i fonts di una pagina web con i CSS in modo più accessibile possibile.
I CSS permettono di assegnare una grandezza specifica in pixel ai fonts. Ad esempio scrivendo:
body {
font-size:12px;
}
il font della nostra pagina sarà di 12 px.
Dove sta lo svantaggio?

Lo svantaggio dell'assegnazione di una grandezza specifica dei fonts sta nel fatto che i CSS bloccheranno il font, ossia non sarà ingrandibile dall'utente. Questi infatti, sebbene provi a impostare dal menu del browser la dimensione del carattere da medio a grande o che sia, non riuscirà a modificare la grandezza del font, poichè fissa ad una regola CSS. Sicuramente un problema dal punto di vista dell'accessibilità del nostro sito.
Come porvi rimedio?
Vi sono due soluzioni principali:
1) Inserire un sistema manuale per il ridimensionamento dei caratteri
2) Utilizzare una diversa codifica dei fonts.
Il primo punto è spiegato in maniera completa nell'articolo segnalato. Riguardo al secondo, ecco alcune informazioni.
L'attributo font-size dei CSS oltre alle dimensioni in px offre diverse opzioni:

Essi definiscono una grandezza determinata ma modificabile, quindi l'utente potrà cambiarla dal menu del browser. Indicativamente x-small corrisponde a 10px.
Validare il sito secondo gli standard del W3C
L'ultima operazione dal svolgere nella creazione del nostro layout sarà validare il sito secondo le direttive del World Wide Web Consortium (http://www.w3.org) per renderlo visualizzabile correttamente tramite tutti i browsers.
Ecco alcuni links utili:

Segnalo inoltre http://www.browsercam.com che permette di avere le anteprime gratuite della visualizzazione del nostro sito con diversi browsers.


LE 7 CHIAVI PER IL SUCCESSO DI UN SITO WEB
Se la realizzazione di siti internet aziendali consistesse solo nel creare pagine web "graficamente belle" potresti rivolgerti a tanti altri. Siamo in milioni a creare siti web.
La realizzazione di siti web è un argomento troppo articolato per poter essere condensato in una pagina. Ci vuole spazio per descrivere in cosa consiste la realizzazione di un sito internet che funziona. Ho cercato di sintetizzare ma ne sono uscite comunque una trentina di pagine, che troverai seguendo i link a lato. Chi ha fretta può leggere solo questa, ma potrebbe farsi una visione incompleta dei problemi inerenti la creazione di siti internet aziendali e finire preda di chi propone siti "professionali" completi a 50 € o di chi ne chiede 20.000 per siti internet che nessuno trova.
Ecco le 7 chiavi principali per il successo di un sito web
1) Evitare la grafica "da favola"
Molti Web Designer realizzano siti internet con una grafica da favola, pagine con effetti speciali, suoni, musica, animazioni, di solito create in Flash, il noto programma per creare siti internet animati. Pagine che però vengono viste in genere soltanto da chi le ha ha VOLUTE.
2) l'indicizzazione dei siti web in Google
Google è diventato sinonimo di motore di ricerca, oggi non si dice più "cerca in un motore", si dice "cerca in Google". Un sito web commerciale ha senso solo se gli utenti lo trovano nelle prime 2 o 3 pagine di Google.
3) L'importanza dell'ottimizzazione del testo
Realizzare siti internet con una grafica accattivante ma semplice ed una comunicazione efficace. Per posizionare un sito web ai vertici dei motori non servono trucchi, servono testi ottimizzati. Google non ha mai nascosto di preferire pagine che contengono esattamente le informazioni che l'utente cerca. Molti trucchi, cari a certi webmaster nostrani, ora non funzionano più.
4) L'importanza delle "keywords" corrette
Con "keywords" si intendono i termini che gli utenti potenziali del nostro sito web digiteranno nei motori di ricerca. E' importante individuare i termini esatti che digiteranno gli utenti per trovare chi fa la nostra attività, o non avremo visitatori.
5) L'importanza della stampa
A chi non è capitato di stampare pagine di un sito web e scoprire che alcune informazioni importanti erano state tagliate? Sembra incredibile, ma molti webmaster non ci pensano proprio. Le pagine di questo sito web sono stampabili correttamente.
6) L'importanza della struttura del sito
La struttura dei siti internet deve essere chiara e intuibile da navigare. Le pagine devono aprirsi in pochi secondi. I link devono essere coerenti. I visitatori non sono disposti a perdere tempo per cercare le informazioni sul tuo sito. Se non le trovano rapidamente vanno a cercarle altrove.
7) L'importanza del monitoraggio del sito
I siti internet vanno monitorati, non basta inserire un contatore, devi sapere quali pagine vengono viste di più e quanto i visitatori si soffermano. Solo così conoscerai l'interesse che gli utenti hanno per le tue pagine e potrai "correggere il tiro". Attirare visitatori, se siamo ai primi posti è facile, trattenerli è più difficile.


Come realizzare un sito web accessibile e vincente
Vediamo innanzitutto quali sono i titoli di questi dodici rotoli che ci svelano le caratteristiche vincenti di un sito web:
1) Deve trovarsi nei primi 20 posti di Google, con keyword significative.
2) Deve avere pagine veloci da caricare, stampabili e prive di fronzoli.
3) Deve avere una struttura intuitiva da navigare e richiedere pochi clic.
4) Deve motivare i visitatori a ritornare periodicamente sul sito.
5) Deve motivare i visitatori a compiere delle azioni (contattarci, ecc..).
6) Deve avere pagine con contenuti tali da spingere altri siti a linkarle.
7) Deve rispettare le norme di accessibilità e di compatibilità del W3C.
8) Deve evitare di prendere in giro i visitatori con titoli fuorvianti.
9) Deve dire CHI SIAMO e fornire tutti i recapiti e referenze verificabili.
10) Deve disporre di un software per il monitoraggio degli accessi.
11) Il sito deve essere tenuto costantemente aggiornato.
12) Il sito deve piacere agli utenti. Chiediamo loro cosa vogliono.
Come si realizza un sito di questo genere?
1)Come ottenere i primi posti nei motori: pensare ai contenuti.
Affinché un sito venga posizionato nelle prime pagine di Google e di altri importanti motori di ricerca deve avere innanzitutto pagine con un contenuto testuale fortemente tematizzato sull'argomento trattato in ogni pagina. È altresì necessario evitare l'uso di quelle tecniche di programmazione che, diluendo le keyword contenute delle pagine, le rendono meno importanti ai motori di ricerca. Tra le tecniche da evitare ci sono le animazioni in FLASH, la programmazione in Java, PHP, ASP ed i frame. Anche il Javascript dovrebbe venir utilizzato solo quando non è possibile farne a meno. Per i pulsanti ad esempio possiamo benissimo farne a meno, ben pochi sentiranno la mancanza di pulsanti animati.
Il fattore vincente rimane comunque sempre l'individuazione delle corrette parole chiave (keyword) da inserire nel testo di ogni pagina. Nel testo, non nel meta tag "keywords"; lì servono a ben poco. E servono a poco anche trucchi quali inserire parole o frasi nascoste agli occhi dei visitatori, anzi, prima o poi i motori se ne accorgono e penalizzano i siti che fanno uso di questa tecnica.
Naturalmente in poche righe è impossibile spiegare tutto ciò che è necessario fare per creare un sito web che venga posizionato ai primi posti nei motori. Le variabili in gioco sono molte, tra cui il numero dei competitor che utilizzano le stesse keyword e le conoscenze nel settore Search Engine Optimization di chi ha realizzato i siti degli stessi. Per quanto riguarda quest'ultimo aspetto però, finché il 90% dei web designer nostrani rimarrà convinto che se un sito è "bello graficamente" i motori lo indicizzeranno bene, avremo buone chance.
I suggerimenti qui forniti consentono di partire con il piede giusto. Per ottenere il massimo è però indispensabile, almeno inizialmente, ricorrere alla consulenza degli specialisti dei motori di ricerca (SEO), persone che, facendo da anni questo lavoro, hanno l'esperienza ed il know-how necessario per fornire indicazioni "su misura". Il nostro lavoro è anche questo, se lo desideri, se vuoi saperne di più, su come realizzare siti con caratteristiche che ne favoriscano un buon posizionamento, puoi contattarci. I costi del nostro servizio di consulenza SEO li trovi alla pagina prezzi delle prestazioni.
Per scoprire come trovare le keyword più adatte alle varie pagine puoi invece leggere l'articolo dedicato alle keyword ed alle keyphrase.
2) Creare pagine veloci da caricare: gli utenti hanno sempre fretta.
Creare pagine veloci da caricare è una delle cose più semplici e alla portata di tutti ed è anche una delle regole per creare siti "usabili" da chiunque. Sorprende quindi particolarmente vedere quanti siti web non rispettano questa regola, dando forse per scontato che tutti i visitatori abbiano l'ADSL.
Per creare pagine veloci da caricare basta rispettare queste semplici norme:
Lo spazio riservato alle immagini non dovrebbe superare il 30% dello spazio occupato dalla pagina che le contiene, ammesso che la pagina sia stampabile su un foglio A4; nel caso sia più lunga (come questa) ridurre in proporzione la percentuale. Le fotografie devono essere salvate in formato JPG compresso a circa il 60%. Quasi tutti i programmi di elaborazione fotografica consentono di scegliere la percentuale di compressione desiderata.
Io personalmente utilizzo Adobe Photoshop CS2, ma anche programmi decisamente meno costosi e professionali hanno questa opzione, come ad esempio Photoshop Elements, che potete trovare incluso in diversi scanner o fotocamere digitali.
Evitare l'abuso di GIF animate, a meno che abbiano poche animazioni. Evitare anche i filmati in FLASH che, oltre a rendere problematico un buon posizionamento nei motori, richiedono talvolta lunghi ed inutili tempi di attesa, con la conseguenza di annoiare i visitatori e di spingerli ad andare a cercare altrove le informazioni. I pulsanti che si muovono o cambiano colore quando passiamo con il mouse sono carini da vedersi ma talvolta allungano i tempi di caricamento e riducono l'accessibilità e l'usabilità del sito: chiediamoci se davvero ne abbiamo bisogno, o meglio, se i nostri utenti ne hanno bisogno. Se riesce a farne a meno Google forse anche noi possiamo rinunciarvi.
Le pagine dovrebbero inoltre essere stampabili facilmente. Se provate a stampare alcune pagine di siti web scelti a caso vi accorgerete di quanto sia alta la percentuale dei siti che non consentono la stampa corretta dei loro contenuti. A meno che si ricorra ad accorgimenti come il copia/incolla in Word o di altro genere (accorgimenti che il 90% degli utenti non usa o non conosce) molte pagine vengono tagliate sul lato destro o in basso (le pagine con frame superiori e inferiori ad esempio) rendendo impossibile la stampa corretta.
Immaginate il titolare di un'azienda che ha incaricato la segretaria di cercare in internet chi vende un certo prodotto e di portargli poi le pagine stampate. Pensate che sarà felice di trovarsi dei testi troncati? Potrebbe rivolgersi ad un vostro concorrente solo per questo motivo. Se non vengono stampati i pulsanti di navigazione è una cosa, se vengano troncate le righe è un'altra cosa.
Creare pagine che utilizzano fogli stile CSS rende il caricamento delle pagine successive alla prima molto veloce, in quanto il layout di tutte le pagine del sito è spesso comune e gestito da un unico foglio stile, il quale, una volta aperto rimane memorizzato nella cache del disco del visitatore. Per saperne di più su come creare fogli stile CSS vedi l'articolo sui fogli stile CSS.
3) Creare una struttura facile ed intuitiva da navigare.
Una struttura intuitiva da navigare aumenta l'accessibilità e l'usabilità del sito. Le statistiche ci dicono che mediamente un visitatore visita solo 2 o 3 pagine del sito su cui è approdato. Questo sito ad esempio è composto da oltre 200 pagine, eppure la media attuale delle pagine visitate da ogni utente è di tre. Teniamo bene in mente questo dato quando progettiamo la struttura di un sito. Non sprechiamo nessuna opportunità. Facciamo in modo, se possibile, che già dalla home page il visitatore individui subito il link che porta alla pagina che gli interessa. Se lo costringiamo a passare su pagine "intermedie" rischiamo che esca dal sito prima di aver raggiunto la pagina che gli interessava (o che a noi interessava fargli vedere).
E' quindi da preferire una struttura che si sviluppi il più possibile orizzontalmente anziché verticalmente, anche se mi rendo conto che talvolta è difficile, specialmente con siti di grandi dimensioni. In ogni caso cerchiamo di favorire al massimo il visitatore facendogli trovare sempre sulla home page un collegamento alla mappa del sito, in modo che possa rapidamente raggiungere qualsiasi pagina o sezione dello stesso.
4) Fidelizzare i visitatori, una delle prime regole del web marketing
Credo siamo tutti concordi che è importante fare in modo che i visitatori ritornino spesso sul nostro sito. Ma come fidelizzare i visitatori? Come incentivarli e motivarli a ritornare sul nostro sito? Esistono vari modi: ad esempio potremmo scrivere un articolo interessante e avvisare i lettori che la settimana seguente troveranno il seguito. Oppure potremo riservare una pagina o una sezione del sito ai "suggerimenti del mese" oppure alle "promozioni del mese". L'importante è mantenere le promesse che facciamo ai visitatori, altrimenti si sentiranno presi in giro e difficilmente torneranno sul nostro sito.
5) Motivare i visitatori a compiere *subito* delle azioni.
Dobbiamo fare il possibile affinché il visitatore interessato ai nostri prodotti o servizi agisca subito. Il miglior modo per farlo è offrire un omaggio o uno sconto se ordina o ci contatta oggi stesso. Se ad esempio vendessimo fotocamere digitali potremmo proporre in omaggio una borsa o una scheda di memoria supplementare se l'ordine viene effettuato prima di mezzanotte. Se l'obiettivo fosse motivare il visitatore ad iscriversi ad una mailing list potremmo offrire un interessante manuale in omaggio a chi lo farà entro due giorni. Se gli diamo tre mesi di tempo per pensarci si dimenticherà di noi. L'importante è operare sempre con la massima serietà. Se abbiamo assicurato il visitatore che il suo indirizzo e-mail non verrà comunicato a nessuno dobbiamo mantenere la promessa.
6) Contenuti di qualità e possibilmente aggiornati ed esclusivi.
Se le pagine del sito avranno contenuti di elevata qualità, se conterranno informazioni interessanti, aggiornate e difficilmente reperibili altrove è probabile che prima o poi altri siti inseriscano un link al nostro. Ricordiamoci che più link in entrata avremo più il valore del sito aumenterà. Quasi tutti i motori di ricerca indicizzano meglio i siti che vengono linkati da altri. Per creare pagine con contenuti di qualità è una buona idea richiedere la consulenza di un Copywriter che conosca anche come lavorano i motori di ricerca. Questi nuovi professionisti del web vengono in genere definiti "SEO-Copywriter". Ci costerà un po' ma i risultati saranno spesso sorprendenti. Se vuoi approfondire questo argomento leggi l'articolo sul potere dei link.
7) Prestare cura alla compatibilità e all'accessibilità delle pagine.
Non intendo dire che un sito web debba essere visualizzato allo stesso modo con qualsiasi browser esistente sul mercato; vi sono decine di browser, alcuni dei quali utilizzati da meno dell'1% degli utenti. Rendere un sito perfettamente compatibile con tutti è una missione quasi impossibile. Bisogna però renderlo compatibile con almeno i tre browser che da soli detengono il 97% del mercato: Internet Explorer, Netscape e Firefox. Per ottenere questo risultato bisogna evitare l'utilizzo di istruzioni HTML, Javascript o altro che vengono interpretate differentemente dai suddetti browser. Se possibile il sito dovrebbe rispettare le norme ed i suggerimenti emanati dal consorzio internazionale W3C. Un sito che osserva queste norme sarà accessibile anche ai non vedenti, in caso contrario gli screen-scanner utilizzati da questi ultimi potrebbero andare in tilt. Ricordo che, a proposito dell'accessibilità dei siti web, anche il Governo Italiano ha emanato disposizioni alla Pubblica Amministrazione affinché facciano realizzare siti che siano rispondenti alle norme del W3C per l'accessibilità e l'usabilità.
Se vuoi verificare che una certa pagina web rispetti le regole di accessibilità e usabilità puoi andare sul sito del consorzio W3C e digitare nell'apposito box l'indirizzo della pagina in questione. Dopo pochi secondi apparirà una finestra che ti comunicherà se la pagina ha passato o meno il test di validazione
8) Evitare di prendere in giro gli utenti con titoli fuorvianti.
Gli utenti non amano essere presi in giro; cercare di attirarli sulle pagine del nostro sito utilizzando titoli di richiamo che non rispecchiano il contenuto reale delle pagine è facile, ma non paga. Avremo tanti visitatori, ma una volta giunti sul sito capiranno che l'argomento trattato non è quello che abbiamo fatto loro credere e usciranno immediatamente dal sito. Facciamo un esempio: se cercando in un motore di ricerca "suonerie gratis per cellulari" ai primi posti appare una pagina che ha come titolo * clicca qui per scaricare suonerie gratis per il nokia * l'utente entrerà nel sito. Se però appena aperta la pagina capisce che le suonerie le deve pagare, oppure che si parla di altro, uscirà subito e difficilmente tornerà sul nostro sito (leggi l'articolo "come scrivere i titoli").
Forse ti starai chiedendo come può trovarsi ai primi posti, cercando "suonerie gratis per cellulari", una pagina che parla d'altro. Esistono vari modi per cercare di manipolare i risultati dei motori, spesso non funzionano, ma qualche volta il motore non si accorge subito del trucco e quindi, per un certo periodo di tempo, la manipolazione funziona.
9) Dobbiamo dire chiaramente CHI SIAMO e come trovarci.
Gli acquisti di beni o servizi in Internet ispirano diffidenza a molti utenti. Spesso si chiedono i soldi anticipatamente, magari tramite carta di credito (anche per alcuni dei servizi proposti su questo sito lo facciamo). Il cliente ha tutti i diritti di sapere esattamente chi siamo e dove siamo, di avere il nostro indirizzo, i nostri recapiti telefonici, il nostro numero di P.IVA (tra l'altro è obbligatorio esporlo sul sito, come puoi leggere alla pagina Partita IVA sul sito web).
Voi vi fidereste a dare i vostri soldi a qualcuno che vi fornisce solo un numero di cellulare e un indirizzo e-mail? Io no.
Le referenze.
Chiediamo inoltre ai nostri clienti acquisiti l'autorizzazione a citarli nella pagina delle referenze. Se abbiamo delle testimonianze di utenti soddisfatti riportiamole sul sito, sempre previa autorizzazione ovviamente. Facciamo il possibile affinché il potenziale cliente sappia tutto di noi, o quasi. Solo così potremo dissipare la sua naturale diffidenza.
10) Perché e come monitorare gli accessi degli utenti al sito web.
Avere sulla home page del sito un contatore delle visite serve a ben poco. Conta le visite e non i visitatori ed inoltre conta solo le visite che avvengono sulla pagina in cui lo abbiamo inserito.
Per sapere come sta andando un sito abbiamo bisogno di sapere ben altro. Abbiamo bisogno di conoscere il numero dei visitatori unici e delle visite su ognuna delle pagine che compongono il sito, di sapere quali sono le pagine più viste e quanto tempo i visitatori si soffermano su di esse. Abbiamo bisogno di sapere da quali stati e città provengono i visitatori, da quali pagine sono entrati e quante (e quali) pagine visitano prima di abbandonare il sito. Abbiamo bisogno di sapere come ci hanno trovati (link su altri siti o motori di ricerca), con quali motori e con quali parole o frasi.
Solo conoscendo questi dati avremo la possibilità di correggere il tiro, di effettuare un "fine tuning" per adeguare continuamente il nostro sito alle esigenze dei visitatori e del nostro target. Una pagina potrebbe essere visitata da molte persone perché è posizionata bene nei motori, ma se mediamente i visitatori si soffermano sulla pagina soltanto 10 secondi è chiaro che abbiamo sbagliato qualcosa.
Molte persone danno una grande importanza al numero di visitatori unici; secondo me aver avuto 10.000 visitatori unici significa solo che 10.000 persone sono entrate nel nostro sito e se ne sono andate.
Esistono svariati programmi per il monitoraggio di un sito; di solito le statistiche vengono messe a disposizione, a pagamento, dal provider che ospita il sito. Esistono anche programmi gratuiti per il monitoraggio dei visitatori ma difficilmente sono adatti per un uso professionale; di solito i programmi gratuiti consentono anche ai visitatori e ai concorrenti di verificare i nostri dati. E' grazie a questi programmi gratuiti che ho scoperto che alcuni miei competitor hanno un centesimo delle visite che dichiarano (vedi articolo sui webmaster e sui competitor).
11) Il sito deve essere tenuto costantemente aggiornato.
E' capitato sicuramente a tutti di cercare un'informazione e di capitare su un sito che non viene aggiornato da anni. Se sto cercando la biografia di Lincoln mi può star bene, ma se cerco informazioni su prodotti soggetti ad una veloce obsolescenza mi sta meno bene. Quando vediamo un sito aggiornato a 5 anni fa (e ce ne sono molti) spesso ci chiediamo se l'azienda in questione esista ancora.
Esistono siti aziendali che riportano addirittura il telefono errato solo perché avendo il sito in Flash ed avendo rotto i rapporti con chi lo ha realizzato si sono sentiti dire che per cambiare il numero (in assenza dei file sorgenti) era necessario rifare l'intero sito.
A questo proposito suggerisco a chiunque intenda farsi realizzare un sito in Flash (che da sempre sconsiglio) di richiedere a chi lo realizzerà di fornire anche i file .FLA e non solo i .SWF. In caso contrario per qualsiasi piccola modifica sarà necessario rivolgersi a chi lo ha realizzato. In altre parole non potremo permetterci di litigare con il fornitore, salvo accettare di rifare il sito.
Un sito aggiornato è utile anche per mantenere le posizioni acquisite nei motori di ricerca: a parità di altre condizioni infatti i motori danno la precedenza a siti che vengono aggiornati frequentemente.
12) Il sito deve piacere agli utenti, non al cliente o a chi lo crea.
Questa regola è il contenuto del dodicesimo rotolo ma avrebbe dovuto essere al primo posto. La maggior parte dei siti web vengono realizzati in modo da piacere ai clienti che li hanno commissionati ignorando di fatto ciò che gli utenti preferiscono. Non voglio dare interamente la colpa ai clienti di questo: diciamo che al 50% la colpa è dei webmaster o comunque di chi propone la realizzazione del sito. Un webmaster serio dovrebbe avere il coraggio di dire al cliente che fa una certa richiesta che la stessa è incompatibile con le preferenze della maggior parte degli utenti. Il problema è che, facendolo, rischia di perdere il cliente, e allora preferisce assecondarlo.
Ma come si fa a sapere ciò che piace agli utenti? Facciamo un esempio banale ma significativo: come faccio a sapere se la maggioranza degli utenti Internet preferisce pagine con sfondo scuro e caratteri chiari o viceversa?
Chiediamolo a loro. Nel Novembre del 2004 ho effettuato un sondaggio: ho chiesto ai visitatori di questo sito di dirmi la loro opinione; in cambio avrei fatto loro omaggio di un modello per scrivere su formato uso bollo con Word. Hanno risposto al sondaggio oltre 300 visitatori e circa l'80% ha risposto di preferire lo sfondo chiaro ed i caratteri scuri. I risultati delle prime 100 risposte al sondaggio li trovate su questa pagina. Il sondaggio attualmente in corso lo trovate alla pagina questionario.
Negli ultimi 8 anni abbiamo effettuato decine e decine di sondaggi su vari argomenti e questo sito è stato realizzato tenendo conto delle preferenze espresse dalla maggioranza degli utenti. Ed è soprattutto grazie a ciò, oltre che all'interpretazione dei dati statistici degli accessi, che questo sito viene ora visto da 1.600 utenti al giorno, che si soffermano mediamente su di esso oltre 7 minuti. E questa è un'ulteriore conferma dell'interesse dimostrato per i suoi contenuti.
Se qualcuno è convinto che un sito in Flash, con effetti speciali degni di Guerre Stellari, piaccia di più di un sito statico in HTML e non ha la possibilità di effettuare sondaggi può fare una cosa alternativa: realizzare due versioni del sito, una in Flash e una in HTML e monitorare gli accessi con un qualsiasi programma di statistiche. Avrà grosse sorprese.
Un sito deve essere User Friendly.
Mi rendo conto che un sito in Flash ben fatto può soddisfare l'ego di chi lo ha fatto e anche quello del cliente che lo ha pagato; a chi non piace vedere il proprio logo aziendale che danza sullo schermo al suono di una musichetta dolce e, dopo 5 minuti, si ferma nella posizione in cui avrebbe dovuto trovarsi sin dall'inizio?
Ma lasciamo da parte per una volta il nostro ego e pensiamo a quello dei visitatori, ai quali, vedere il nostro logo che gira per 5 minuti non gliene importa proprio niente. Loro vogliono informazioni. Quando vogliono vedere i cartoni animati vanno al cinema, o li guardano in TV.
Chi volesse leggere, a proposito dell'usabilità dei siti web, il parere di una persona sicuramente molto più autorevole del sottoscritto, veda gli articoli pubblicati da Jakob Nielsen. Jakob Nielsen è stato definito dal New York Times "The Guru of Web Page Usability" ed è titolare della Nielsen Norman Group, una società che si occupa di consulenza per l'usabilità dei siti web e che ha tra i clienti aziende del calibro di Google, IBM, Hewlett-Packard, Dell, Intel, Sony, Visa, Microsoft, American Express, General Motor, Pfizer, Roche, BBC, Reuters, Financial Times, Forbes, US Navy, Credit Suisse Group, ecc..