Perché pensare tipograficamente rovina il tuo sito? (prima parte)

Non essendoci percorsi di studio obbligati per il nostro settore, spesso ci si avvicina al web-design senza alcuna base di grafica e composizione; altrettanto spesso si cambia rotta sul web-design partendo da una formazione in grafica tradizionale.

Ovviamente in entrambi i casi ci sono dei vantaggi e degli svantaggi: se in precedenza non hai studiato un briciolo di grafica, senza affidarti a un buongusto innato, dovresti imparare a armonizzare i colori e le font, saper posizionare gli elementi in maniera equilibrata e piacevole, mantenere un ritmo lasciando anche degli spazi bianchi… e tante tante altre cose, tutte da imparare.

Per contro, se nella tua vita hai sempre fatto grafica finalizzata alla stampa, dovrai scontrarti, cosa non da poco, con la malleabilità del media “web”: ti troverai a dover disimparare alcuni standard che fino adesso hai dato per certezze assolute.

In pratica avere un’impostazione di un certo tipo o non averne affatto può portare comunque a determinate problematiche ed a compiere errori grossolani che sarebbe meglio capire ed evitare dall’inizio (invece di correre ai ripari dopo), e che adesso vedremo insieme.

Malleabilità e personalizzazione

Uno degli errori più comuni quando ci si avvicina al web-design è quello di non comprendere che ogni persona può vedere un sito internet in maniera differente da un’altra, per sua volontà o meno, ne sia cosciente o meno.

Se non hai mai progettato un layout grafico sarà più facile accettare questa realtà; mentre se fin’ora hai lavorato per la stampa, ti sarai ritrovato prima o dopo a progettare l’immagine coordinata di un prodotto/servizio/azienda, dove su vari formati (biglietto da visita, volantino, flyer, locandina, manifesto) avrai dovuto riadattare gli elementi, creando una nuova composizione che si adattasse al supporto, senza perdere l’equilibrio ottenuto in un formato più grande o più piccolo: ma sul web dovrai accettare l’idea di avere un minor controllo.

iPhone è in grado di "sistemare" il sito per ottimizzare la visualizzazione, ma l'impostazione di Aruba non lo permette.

iPhone è in grado di "sistemare" il sito per ottimizzare la visualizzazione, ma l'impostazione di Aruba non lo permette.

Risoluzione del monitor, sistema operativo, browser, supporto (o device) sono solo alcune delle cose che influenzano la visualizzazione finale di un sito web; bisogna considerare le barre degli strumenti che si auto-installano con molti programmi (alcuni utenti non sono in grado o sono troppo distratti per evitarlo) che sul browser riducono lo spazio visibile e ancora le impostazioni personali del S.O. per la grandezza dei caratteri.

Layout fisso (altezza dei box e font-size)

Ci sono tre tipi di layout: fisso, semi-liquido e liquido. Gestire un layout liquido è certamente complesso, soprattutto se ti trovi alle prime armi ed è indubbio che il più semplice da realizzare sia il layout fisso. Le performance dei tre possono variare e per ogni progetto uno di questi può essere migliore degli altri.

Minimalist Design è un sito a layout fluido: prova a ridimensionare la finestra

Generalmente comunque, i termini “fisso”, “semi-liquido” e “liquido” si riferiscono alla capacità del layout di adattarsi sulla larghezza, in quanto dovrebbe essere scontato che l’altezza vada lasciata “libera” avendo la possibilità di scorrerla con la scroll-bar.

E’ importante, come nella grafica tradizionale e specialmente nella composizione di giornali quotidiani, che gli argomenti più importanti si trovino “sopra la piega”, nel nostro caso, nella parte visibile senza scrollare. Ma non è possibile (o meglio, auspicabile) forzare una cosa del genere tramite box ad altezza fissa o font di dimensioni eccessivamente piccole.

Se ti sei mai trovato a impostare la grandezza della font per un manifesto, avrai calcolato la grandezza di questo e la distanza dalla quale, generalmente, viene visto; avrai fatto delle prove di leggibilità, magari con la pratica avrai imparato qual è la grandezza ideale della font e via.

Ricordo mio nonno leggere il suo quotidiano con la lente di ingrandimento. Ora, sul web, l’utente ha a disposizione molti modi per modificare la grandezza della font di un sito, a proprio piacimento per cui è inutile impostare la size a 10px (i pt non hanno senso) perché così è più “elegante”: se l’utente non riesce a leggere ed è un minimo esperto, ingrandisce, altrimenti (cosa assai peggiore) abbandona il sito.

Consigli e test da eseguire

Ti consiglio di testare la leggibilità della tua font su qualcuno che non conosce i testi del tuo sito, in quanto, per te sarà sempre più facile leggerli o anche intuirli (questo consiglio vale anche per il contrasto tra i colori testo/sfondo).

Un altro test di vitale importanza (vitale per il tuo sito!) è quello di variare la dimensione (apri il browser e premi [ctrl] + [+], con Mac [⌘] + [+] per ingrandire e [ctrl/⌘] +[-] per rimpicciolire) almeno di 2 “zoom” per controllare che il tuo layout rimanga in piedi.

Ti stai chiedendo cosa potrebbe succedere? Se hai lasciato che l’altezza di ogni tuo contenitore si adatti naturalmente al proprio contenuto, non succederà proprio nulla (ergo: tutto bene).

In caso contrario assisterai a qualcosa che deve assomigliare molto alla fine del mondo.

Alcuni elementi del layout di Corriere.it collassano quando si ingrandisce il carattere

Come puoi notare (e sperimentare se vuoi), sul sito del Corriere della Sera, il nostro test fallisce miseramente: i testi fuoriescono dai div nei quali sono racchiusi, sovrapponendosi ai propri bordi e ad altri testi, divendendo, di fatto, illegibili.

La possibilità di aumentare la grandezza dei caratteri è stata data proprio per aiutare le persone a leggere meglio, per adeguare il tutto alle singole esigenze, mentre in questo modo è ovvio che quello che doveva essere un’agevolazione diventa una corsa ad ostacoli.

Inoltre evita allineamenti giustificati: anche se il testo può sembrare perfettamente adagiato nel suo box, al più piccolo zoom può creare dei buchi orribili.

Conclusioni: Evitare che il sito collassi

Per salvarti da questa catastrofe dovresti evitare di specificare un’altezza nello stile CSS degli elementi o, se proprio necessario, dovresti calcolare tale altezza considerando la possibilità di ingrandire la font; in quest’ultimo caso però potresti avere un risultato non ottimale, lasciando dello spazio vuoto alla fine del box.

Potresti pensare che per un box grafico (ad esempio, un fumetto o una sfumatura) sia necessario specificare un’altezza, ma non è così: spesso basta un po’ di conoscenza dei CSS e di intuito per tirare fuori degli ottimi box con effetti grafici di tutto rispetto, semplicemente utilizzando la proprietà border e un’immagine di background ben posizionata. In alcuni casi può rendersi necessario l’ausilio di una seconda immagine di sfondo: una tecnica che si usa anche per simulare i bordi con angoli arrotondati è quella di annidare un elemento all’interno di un altro in modo da poter assegnare ad ognuno di essi un  differente background (o meglio, la stessa immagine ma con diverso posizionamento).

<div style="background:url('sfondo.png') top center no-repeat;">
    <div style="background:url('sfondo.png') bottom center no-repeat;">
    CONTENUTO
    </div>
</div>

NB: Sia per il doppio background sia per i bordi arrotondati stanno per arrivare in soccorso i CSS3, ma prima che diventino standard ci vorranno diversi anni (si parla anche del 2020) e al momento diversi browser (giustamente) non li supportano.

Per quanto riguarda le font, non pensare nemmeno di impostare un testo troppo piccolo solo perché “occupa poco spazio” o “è bello così”. Fai in modo che sia funzionale, quindi leggibile: impostando una font-size leggermente più grande potresti evitare che qualcuno la ridimensioni e ti rovini il layout.

Ho parlato del particolare approccio che generalmente ha un determinato tipo di persona (con background da grafico tradizionale o comunque senza basi per la grafica web), pensi che il problema sia diffuso anche al di fuori di questi casi? O magari fai parte delle categorie sopra elencate ma non commetti questi errori?

Tag: , ,

L'autore

Appassionata di web-design e web-designer di professione, ha una conoscenza approfondita dell'(x)HTML/CSS, ama sperimentare script in PHP e javascript ed è sempre pronta ad apprendere nuove tecniche. Per i siti preferisce uno stile sobrio con particolare attenzione all'accessibilità e all'usabilità, e soprattutto a quello che c'è sotto la scocca: il codice, rigorosamente standard.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

20 commenti

Trackback e pingback

  1. Tweets that mention Perché pensare tipograficamente rovina il tuo sito? (prima parte) | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Claudia ♀ | ./lsd, Anna Pallotti, A2cO, Manuel Molossi, G. Cotumaccio and…
  2. Accessibilità: il tuo sito è leggibile? | Your Inspiration Web
    [...] o dai loro device (se non sai come questo sia possibile ti consiglio di dare un’occhiata a questo articolo)…
  3. Accessibilità: come e perché stare attenti ai colori da utilizzare? | Your Inspiration Web
    [...] la personalizzazione a cui può essere sottoposto un sito web da parte dell’utente e delle font standard, tralasciando però…