Questa è una guida per prendere confidenza con il web design in modo pratico e rapido: data la complessità della materia e le numerose discipline che la compongono non sarà una guida completa ma servirà a dare un "la" iniziale a chi vuole studiare il web design.
Ciascuna delle sezioni di questo libro andrebbe approfondita nelle opportune sedi. Qui passeremo "all'azione", spiegando il temibile passaggio dal progetto grafico all'HTML+CSS, cosa che in genere viene lasciata alla sperimentazione personale. Dare una piccola guida da cui partire e lasciare poi aperte le strade più svariate per proseguire sarà quindi la mission.
Definire la struttura di un sito
Definire la struttura di un sito, non significa necessariamente solo fissare l'albero di navigazione del sito, ma anche fare in modo che la pagina risponda sempre alle seguenti domande:
- Dove mi trovo?
- Dove sto andando?
Alla prima domanda risponderanno decisamente un buon logo ma anche un eventuale sottotitolo o tagline (come si dice in grafica) e un'opportuna presentazione grafica. Mostrare infatti la foto del micio di casa sul sito di uno scrittore di libri di giardinaggio risulta poco coerente, oltre che fuorviante. Gli utenti potrebbero pensare ad un veterinario!
Dove sto andando? Qui sta alla bravura del designer far intuire all'utente cosa troverà e dove, studiando un buon sistema di etichette (i nomi dati alle voci del menu) e una logica coerente nell'organizzazione delle informazioni, anche a seconda del tipo di pubblico (target) che visiterà il sito.
I wireframe e la loro funzione nella creazione delle pagine HTML
Il primo processo nella fase di creazione di un sito è la definizione degli "ingombri". Crearlo su carta inizialmente può aiutare a liberare la mente da alcuni schemi prefissati che ci impone l'uso del computer e ci può servire, in una fase successiva, dopo la stesura della grafica su Photoshop, per definire i singoli elementi che compongono la pagina e cominciare così a scrivere l'HTML.
Dove sono e dove vado? Il logo e il menu
Gli elementi fondamentali come il logo e il menu principale di navigazione devono essere facilmente individuabili. Ciò significa che per noi occidentali, che leggiamo da sinistra verso destra, andremo istintivamente a guardare in alto a sinistra per capire la nostra pagina di cosa tratta.
Pertanto è opportuno che il logo o il nome del sito siano sempre collocati in alto a sinistra, così come il menu, che deve rientrare comunque entro un'area minima visibile da browser (massimo 640px di altezza circa).
Perché proprio 640? Perché è l'area minima di visibilità in verticale (la cosiddetta area "above the fold") per chi ha un monitor a risoluzione 1024x768. Se chi ha una risoluzione del genere si ritrova a navigare in un sito in cui nei primi 640px siano solo visibili logo e un'immagine, senza un menu di navigazione (che magari comincia poco sotto), state sicuri che quell'utente è perso.
Non perché non sia intelligente da non scorrere la pagina (è provato che una pagina "lunga" non scoraggia l'utente che sta cercando proprio quell'informazione e vuole leggerla), ma perché ad ogni pagina nuova il menu si troverà sempre in una posizione scomoda che lo costringerà a muovere la barra su e giù in aggiunta al movimento del click sul menu stesso.
Attenzione al footer o "piè di pagina"!
In Italia il cosiddetto footer di un sito ha molta importanza, poiché la legislazione ci obbliga ad inserire, nel caso il titolare ne sia in possesso per la sua attività, la partita IVA. E ancora, se si parla di un'azienda, è necessario inserire i seguenti dati:
- la sede della società;
- l'ufficio del registro delle imprese presso il quale la società è iscritta e il numero di iscrizione;
- il capitale sociale specificando quanto effettivamente versato per le società per azioni, in accomandita per azioni e a responsabilità limitata;
- se la società è in liquidazione, specificarlo;
- se le SPA e le SRL hanno un unico socio, specificarlo segnalandone il nome.
Pertanto, dal 29 luglio 2009, tali informazioni, devono essere fornite, oltre che negli atti e nella corrispondenza, anche nel "sito internet" e chiunque omette di fornire tali informazioni è punito con la sanzione amministrativa pecuniaria da 206 a 2.065 euro.
Risoluzione del display e browser
Gli utenti non navigano tutti dal computer, tantomeno hanno tutti lo stesso monitor. Pertanto quando progettate un sito, tenete conto di questo e riflettete.
Ad oggi inoltre, con l'introduzione di tablet e smartphone, le risoluzioni e i browser in circolazione si sono moltiplicati. Basta guardare le statistiche di visita di un sito per rendersi conto della frammentazione del pubblico in tal senso.
Detto ciò, quando creiamo il wireframe per una visualizzazione desktop, pensiamolo per un'area in larghezza intorno a 1000px (960 è uno degli standard de facto e di base). Inoltre teniamo presenti, in verticalità, le informazioni riguardanti la posizione di logo e menu entro i primi 640px verticali. Questo per la versione standard del sito. Da qui in poi dovrete valutare le risoluzioni che rendano il sito "responsive", cioè adattabile e scalabile a seconda del device dal quale viene letto il sito.
I maggiori breakpoints, o risoluzioni adottate, sono i seguenti (fonte Wikipedia):
- 320 pixel per device con schermi piccoli, come cellulari, mantenuti con orientamento verticale (portrait)
- 480 pixel per device con schermi piccoli, come cellulari, mantenuti con orientamento orizzontale (landscape)
- 600 pixel piccoli tablet, come Kindle di Amazon (600x800) e Nook di Barnes&Noble (600x1024), tenuti con orientamento verticale 768 pixel tablet da 10 pollici come l'iPad (768x1024) mantenuti con orientamento verticale
- 1024 pixel computer da scrivania, laptop e netbook, e tablet come l'iPad (1024x768) mantenuti con orientamento orizzontale (vedi quanto sopra spiegato)
- 1200 pixel computer con schermi larghi, tipicamente desktop ma anche laptop
>> Leggi di più su breakpoints e Responsive Web Design
Dopodichè valutate, insieme agli obbiettivi del sito, dell'appeal grafico e delle volontà del cliente, il layout che volete dargli a seconda della risoluzione. Ad esempio sarebbe inutile riproporre nella versione portrait una slide immagini che non farebbe altro che rallentare il sito, e magari, come è consuetudine fare, spostare la seconda colonna del layout subito sotto la prima, permettendo ridimensionamento "responsive" alle immagini e ai box di testo.