Questo articolo fa parte di un corso gratuito di design web ospitato su questo sito.

Prima di disegnare una pagina Web dobbiamo sapere quanto spazio c’è a disposizione. Il designer deve fare i conti con:

• La grandezza degli schermi
• Gli offset
• La Taskbar di Office

Un buon progetto Web facilita la lettura sullo schermo rispettandone le dimensioni per non dover usare la barra di scorrimento orizzontale, che impedisce una visione d’insieme della pagina. Gli schermi più diffusi sono di 640×480 pixel o 800×600 e questa misura è chiamata “area sicura”: lo spazio, cioè, entro il quale la pagina Web può essere vista senza alcun problema.

I browser occupano la parte alta dello schermo e un lieve contorno sui lati, inoltre aggiungono automaticamente uno spazio bianco tra l’interfaccia e la grafica della pagina: questo spazio si chiama Offset. Purtroppo i browser non hanno la stessa dimensione di Offset e ogni sistema operativo impone regole proprie.

Oltre agli Offset, è anche utile calcolare lo spazio occupato dall’interfaccia dei browser, per sapere le effettive dimensioni della pagina Web.
E’ possibile eludere il problema degli Offset arricchendo il tag “body” con alcuni attributi:

Attenzione però: questi attributi non sono standard. Se li usate, il vostro codice Html non sarà valido, anche se funzionerà senza problemi in tutti i browser.

In questo modo gli Offset di tutti i browser vengono annullati ad eccezione di Navigator 3 su entrambe le piattaforme.

La Taskbar di Windows è la barra dei collegamenti ai programmi di Office ed è predefinita a meno che non si voglia eliminarla. Questa occupa spazio sul lato destro dello schermo.
Ecco lo spazio a disposizione, con e senza la Taskbar, nelle diverse versioni dei browser di entrambe le piattaforme:

La differenza tra le dimensioni di una pagina con la Taskbar visibile in tutti i browser è poco più piccola di una pagina accettata da pochi browser e senza la barra di Office.
Per il Web designer vale lo spazio che trova il maggior numero di visitatori, perciò quello visibile con tutti i browser.

Si legge meglio sulla carta che sullo schermo ed è per questo che le pagine Web ricche di contenuti spesso vengono stampate.

• I margini impostati dalle stampanti in un normale foglio A4 verticale, non permettono di riprodurre una pagina Web in tutta la sua larghezza: 2 cm del lato destro dello schermo non si stampano
• E’ consigliabile produrre due versioni di tutti documenti più lunghi: una per lo schermo e una per la stampa (in formato PostScript o in PDF). Quest’ultima dovrebbe contenere l’intero argomento, che online è diviso su diverse pagine.
• Le dimensioni della pagina Web devono adattarsi ai margini di stampa, perciò la larghezza massima di una pagina Web, stampata verticalmente, è di 595 pixel.

• Un pubblico di ricercatori e di studenti visiterà il sito per ottenere informazioni e guarderà svogliatamente la grafica o, peggio, andrà altrove se il contenuto è soffocato dal design.
• Un pubblico in cerca di un viaggio vorrà sentirsi stimolato e non soltanto vedere elenchi di offerte o di voli aerei; una grafica accattivante, pur mantenendosi pulita e chiara per la leggibilità delle informazioni, è più adatta alle esigenze degli utenti.
• Pensare all’aspetto generale del vostro sito, significa dare anche un’immagine di voi. Un’azienda che offre prodotti sanitari darà un’impressione di poca serietà se si presenta in Internet in maniera ludica e con uno stile fumettistico. Al contrario un’agenzia di design può osare una grafica più ricca e tecnologie avanzate, per dimostrare la propria creatività e capacità tecnica.

La barra di scorrimento orizzontale è intollerabile nella lettura di una pagina Web, quella verticale è un po’ scomoda, ma utile per dare spazio ai contenuti senza frammentarli in troppe pagine.
Quando si accede ad un sito si vede solo la parte alta della pagina; è facile intuire che le notizie più importanti ed i link per la navigazione devono stare nella prima parte della pagina.

• Fate in modo che le novità o le promozioni del vostro sito siano subito visibili in alto nella pagina e spezzate la videata in modo coerente, iniziando un nuovo paragrafo o inserendo altre notizie nella parte inferiore.