Struttura di una pagina web
Design di un sito web
Grafica web
Immagini come icone
Il problema principale del web design rimane comunque quello di fornire degli indicatori di percorso che consentano una buona navigazione.
Spesso un'immagine è più immediata delle parole: è normale perciò, anche nella progettazione di pagine Web, il ricorso a icone che simboleggiano concetti e funzioni di vario genere.
Tuttavia la scelta dell'immagine più appropriata non è sempre immediata: ciò è dovuto al fatto che esse rappresentano in genere oggetti quotidiani, non tutti ugualmente familiari a chiunque.
Altro vantaggio delle icone è che aiutano gli ospiti internazionali, che non conoscono la lingua usata nel nostro sito.
Per fare degli esempi, le frecce avanti e indietro sono sensi comuni della navigazione da pagina a pagina.
L'icona di una matita o di una penna può collegarsi al concetto di una cartolina o di un messaggio da scrivere, un'icona di un foglio o di una stampante può richiamare il concetto del download o della stampa, e così via.
L'uso delle immagini deve essere studiato ad hoc, per far si che non influiscano a rallentare il caricamento della pagina, ma contribuiscano ad armonizzarsi con il contenuto delle pagine stesse.
Anche i video non devono essere troppo "invasivi" nella pagina web, sia che risiedano sul sito, sia che siano posti in un IFRAME che richiama il video su YouTube, permettendo di vederlo in quella pagina. Alcune aziende adottano una grafica "a tutta pagina" per suscitare forti emozioni nel visitatore, e può risultare una strategia utile per certi settori di attività o di vendita che richiedono un tipo di marketing emozionale. Consigliamo comunque di porre questo tipo di pagine come secondarie, su richiesta dell'utente, quando cioè, chi naviga il sito, clicca su un'anteprima per vedere la pagina dove risiede il video o lo slideshow a tutta pagina.
Strategie per realizzare la struttura di una pagina web
- Usare il logo e il nome del sito in tutte le pagine del sito in una posizione strategica, e collegarli tramite link alla homepage del sito stesso.
- Nel progettare il sito web di un'azienda, fare in modo che la grafica usata sia coerente con l'immagine coordinata dell'azienda stessa; quando questa operazione non è possibile cercare almeno che il sito sia caratterizzato da una certa coerenza grafica.
- I simboli e le funzioni usati devono essere riconoscibili e identificabili in tutto il sito e non devono cambiare da una pagina all'altra.
- Quando il sito diventa molto grande e comunque quando presenta un numero di pagine superiore alle 100, è bene usare una funzione di ricerca.
- Usare font standard oppure web fonts, perché non è detto che il computer dell' utente possieda tutti i font.
La soluzione per la migliore usabilità è indicare nel codice html i font in ordine di preferenza, da quello che si vorrebbe a quello che si è "disposti ad accettare".
Diversi tipi di font standard, raggruppati per famiglie:
- Times New Roman, Times, Georgia, Serif
- Courier New, Courier, Mono
- Verdana, Arial, Helvetica, Geneva, Sans-serif
Dagli studi sulla leggibilità dei font risulta che sul monitor essa è diversa dalla leggibilità sulla carta.
Mentre sulla carta i caratteri più leggibili sono quelli con le grazie (Serif), sul monitor la lettura è più agevolata dai caratteri Sans serif. In modo particolare i caratteri in assoluto più leggibili sono il Verdana e il Trebuchet.
Se proprio è necesario usare un font particolare, può essere utile trasformare il testo in immagine: in questo modo si può essere sicuri che tutti lo visualizzeranno così come è stato progettato.
Ovviamente le immagini "pesano" di più in termini di caricamento della pagina, per cui è meglio limitare l'uso di questo stratagemma solo ai titoli, ai bottoni, o per qualche scritta di rilievo.
Data la carenza di uniformità di supporto sui tipi di font (.eot, .otf, .ttf. ecc.) da parte dei browsers, grazie ai Fonts online abbiamo oggi un modo per caricare il font usato nel nostro sito, nei vari formati, direttamente dalla rete.In particolare Google, dopo aver messo a disposizione online i più importanti framework javascript, ci aiuta nell'utilizzo dei fonts tramite Google Web Fonts.
Dimensioni di testo e immagini
- La dimensione minima di un carattere leggibile del testo va scelta prendendo in considerazione la sua visualizzazione.
Non tutti usano un pc con Windows, quindi non tutti i font appaiono ai visitatori con la stessa dimensione.
L'aspetto di un font Verdana di dimensione 10 su PC è uguale all'aspetto di un font Verdana ma di dimensione 12 su Macintosh. Questo dipende dal fatto che un PC definisce la risoluzione a 96 punti per pollice, mentre tutti gli altri sistemi operativi usano la risoluzione standard a 72 punti per pollice. - Non sottovalutare l'importanza che assumono, nell'ambito della schermata i titoli, sottotitoli e trafiletti.
Ogni testo che abbia importanza o rilievo deve far capire a colpo d'occhio il senso di tutta la sezione a cui fa riferimento. - Se è necessario inserire delle immagini molto grandi è utile creare dei bottoni o delle icone, che possono essere resi sotto forma di miniatura dell'immagine stessa, e che richiamano lo zoom dell'immagine.
- Impostare sempre immagini con risoluzione a 72 dpi, in modo tale da permettere a tutti i tipi di computer di poter visualizzare correttamente le immagini.
- Nel ridimensionare un'immagine, è bene ricordare che nel passaggio da un'alta risoluzione a una bassa risoluzione non c'è sostanziale perdita di qualità, ma da una più bassa a una più alta risoluzione il rischio è di perdere qualità dell'immagine.
- Qualsiasi sia la soluzione adottata definire sempre le dimensioni dell'immagine nel codice, in questo modo si facilita il browser a strutturare la pagina accelerando il caricamento.
- Non si deve dimenticare di usare l'ALT TEXT, cioè il testo alternativo: specifica un testo alternativo da visualizzare al posto dell'immagine nei browser che non supportano la modalità grafica oppure sono configurati per lo scaricamento manuale delle immagini.
Per gli utenti non vedenti che utilizzano sintetizzatori vocali con browser in modalità testo, questo testo viene riprodotto ad alto volume. In alcuni browser, questo testo appare anche quando il puntatore si trova sopra l'immagine.
Questa funzione è inoltre comoda perché alcuni motori di ricerca usano questo strumento per catalogare le pagine, usando questo testo come le parole chiave.