Sui principi del CRAP (Contrasto Ripetizione Allineamento Prossimità) che dovrebbero guidare ogni buon web designer rimando all'ottimo articolo di LineHeight. Vorrei qui soffermarmi, invece, su alcune considerazioni più pratiche, magari scontate, ma mai abbastanza ripetute.

Le immagini

La grafica per il web, a differenza di quella utilizzata per la stampa, ha a che fare con immagini per il video. Ciò significa che è sufficiente una risoluzione pari a 72 dpi e che il metodo di colore è l’RGB e non il CMYK. Un’altra forte limitazione consiste nel fatto che le pagine web possono accogliere solo immagini salvate in uno di questi 3 formati: GIF, JPEG o PNG.

Pur essendo l’ADSL molto diffusa oggigiorno, è consigliabile creare immagini con un buon rapporto qualità/peso che si aggiri tra i 20 e i 50KB per ognuna di esse. Bisogna infatti ricordarsi che più una pagina web è leggera, in termini di dimensioni, prima viene caricata dal browser e meno deve attendere l’utente per vederla.

I testi

La scelta del carattere condiziona fortemente la sua leggibilità. Anche se non è una regola assoluta, per il web è meglio utilizzare caratteri sans-serif o senza grazie (Verdana, Arial, etc.), più leggibili, anche quando le loro dimensioni sono piccole (10 pixel), rispetto ai caratteri con grazie o serif (Times, New York, etc.), diffusamente usati in tipografia.

Inoltre, occorre ricordare che non tutti i browser visualizzano i testi con l’anti-aliasing, ossia ammorbidendo e allisciando le linee dei caratteri in modo da ridurre l’effetto di scalinatura che si produce quando un segnale a bassa risoluzione viene mostrato ad alta risoluzione.
Per questo motivo, se si desidera un testo con l’anti-aliasing, è opportuno farne un’immagine. Stessa “traduzione” andrebbe fatta per gestire effetti speciali su un testo al passaggio del mouse.

Non conviene, invece, utilizzare massivamente le immagini al posto del testo, perché i motori di ricerca preferiscono in genere siti ricchi di parole chiave, pertinenti e pregnanti. Si raccomanda pertanto un certo equilibrio fra testo e immagini nella stesura della pagina web.

I colori

L’uso dei colori dovrebbe sottostare al principio del maggior contrasto possibile. Inoltre, per riempire gli elementi della pagina, è buona norma non usare colori piatti ma utilizzare dei gradienti, ossia dei riempimenti che sfumano da un colore ad un altro, meglio se si tratta di un tono più chiaro ed uno più scuro dello stesso colore. Il gradiente assicura un effetto di classe.

Riguardo al contrasto fra testo e sfondo, è inutile ribadire che la migliore leggibilità in assoluto si ottiene col classico binomio: carattere nero su pagina bianca. Tuttavia, sono possibili anche altre combinazioni, magari da utilizzare con cautela, riservandole a zone particolari della pagina web e lasciando invece i testi principali (quelli, cioè, che vanno letti) sul nero/bianco.
Si sconsiglia vivamente di invertire il contrasto classico, ricorrendo a testo bianco su pagina nera, perché poco leggibile, soprattutto per gli ipovedenti.

Le dimensioni

Una pagina web si sviluppa in verticale a seconda della lunghezza dei suoi contenuti e naturalmente gli elementi in alto vengono letti prima e meglio di quelli in basso. È consigliabile quindi di non inserire testi troppo lunghi e, se proprio occorre farlo, di spezzarli in più pagine.

Per quanto riguarda lo sviluppo orizzontale della dimensione di una pagina si deve porre molta attenzione ad un unico limite: la risoluzione del monitor. Un contenuto testuale o un’immagine che superino la larghezza del monitor comportano la comparsa in basso della barra di scorrimento orizzontale e l’occultamento di una parte del sito.
Benché i monitor attuali abbiano quasi tutti risoluzioni ampie, conviene sempre pensare a una risoluzione media di 800x600 pixel o, al massimo, 1024x768 pixel. Così facendo, si può stabilire che la pagina web non deve superare in larghezza i 760 o 960 pixel circa. E, in questo caso, una dimensione buona per i caratteri è 12 pixel.

L’alternativa è pensare a un layout della pagina fluido, ossia con larghezza in percentuale che possa coprire tutto lo schermo. Di conseguenza, si può dare una dimensione fluida anche al carattere utilizzato nel sito in modo che si adatti sempre alla risoluzione del monitor (più alta è la risoluzione, più grande dev’essere il carattere e viceversa).
Naturalmente, anche in questo caso non si può dimenticare un minimo di larghezza entro cui devono disporsi gli elementi visualizzati.