Costruire un tema: lunghezza e dimensione testo.

Nella prima puntata vi avevo parlato della posizione dei contenuti, importante perché gli occhi vengono attratti principalmente da alcune sezioni durante i primi istanti della visita di un sito.

Tutto, durante la permanenza su un sito continuerà a ruotare intorno a loro. Gli occhi.

La lunghezza e la dimensione del testo infatti, saranno i diretti responsabili dei movimenti delle nostre pupille.

Maggiore è la lunghezza di una riga, maggiore sarà il movimento orizzontale necessario per percorrerla con conseguente affaticamento dei muscoli e maggiori possibilità che venga persa la riga quando si torna accapo.

Questo si traduce in difficoltà di lettura che può portare gli utenti ad abbandonare il sito perché distratti, infastiditi o affaticati.

La domanda che sorge spontanea è dunque: qual è la lunghezza ottimale di una riga di testo?

Per rispondere a questa domanda bisogna iniziare a tenere in considerazione vari aspetti.

In primis, come al solito, lo strumento hardware utilizzato dal visitatore: computer portatile? Monitor di un computer fisso? Palmare?

Il campo visivo di un osservatoreIl perché è presto detto: la distanza più o meno accentuata dell’occhio del lettore dal monitor allarga o restringe il campo visivo, sia verticalmente che orizzontalmente e questi strumenti hanno una distanza d’uso media abbastanza diversa fra loro. Non ho mai visto utilizzare un palmare a braccia tese, mentre – verosimilmente – un monitor di una scrivania può distare 60-70 cm dal nostro viso.

Grazie ad alcuni test comunque, si è calcolato che la lunghezza ideale del testo su web è di 70-80 caratteri (12-14 parole circa).

Inizialmente, quando ho iniziato a costruire il blog, il corpo centrale (destinato ad ospitare i post) aveva una larghezza di 720px (vi ho già raccontato della mia necessità di “maggiore spazio”). Volendo seguire questa raccomandazione, ho ristretto lo spazio ad un più modesto valore di 640px. Una via di mezzo tra i 520px del layout precedente e i 720px che avevo sognato di raggiungere. Si tratta del 30% di caratteri in più rispetto a quelli raccomandati. Andare oltre potrebbe risultare faticoso da seguire.

Fortunatamente a venirci parzialmente incontro c’è la spaziatura e la larghezza dei caratteri. Ogni font infatti, ha caratteristiche differenti.

Volendo fare un po’ di storia, il courier, ad esempio, è un carattere “monospace” che divenne di uso comune nelle vecchie macchine da scrivere che non potevano gestire la spaziatura variabile (la i e la w in un font a spaziatura variabile hanno una “larghezza” o “occupazione di spazio” diversa). I computer possono agevolmente gestire la spaziatura variabile e per questo si può giocare con font e dimensioni.

Confronto larghezza fontOvviamente la spaziatura più o meno accentuata può risultare più o meno gradevole all’occhio, tanto quanto l’essere “sans serif” (o “senza grazie”) e cioè privo di una serie di particolari che “arricchiscono” il carattere. Un carattere “sans serif” d’uso comune è il Verdana.

Il Verdana è un font pubblicato nel 1996 da Microsoft progettato per garantire grande leggibilità anche a basse risoluzioni grazie alla sua pulizia (“sans serif”), la sua larghezza e la spaziatura considerevole. L’ultima qualità, inoltre, viene incontro alla mia necessità di allargare lo spazio destinato ai post, salvando in qualche modo capra e cavoli. Per maggiori informazioni a riguardo vi mando alla relativa pagina su Wikipedia.

La dimensione dei caratteri infine, diventa un discriminante fondamentale in caso d’accesso da parte di persone con problemi alla vista. Un buon contrasto, unito ad una dimensione non troppo piccola può risultare la chiave vincente per catturare l’attenzione ed evitare che i lettori scappino ancor prima di completare la prima frase.

Tenere questi aspetti in considerazione quando si costruisce una pagina web è importante quasi quanto la validità dei contenuti. 🙂

Si continua lunedi prossimo…

Emanuele

10 commenti » Scrivi un commento

  1. Questo è uno dei motivi per cui non ho mai gradito i layout fluidi. Saranno più accessibili e quello che ti pare, ma per me che uno schermo da 20 pollici, vuol dire fare continuamente destra-sinistra con gli occhi e con la testa, quando il contenuto si spalma su larghezze troppo ampie. Quindi concordo sull’uso di un layout a larghezza fissa. L’ampiezza della colonna principale era una cosa che non avevo mai studiato in modo così approfondito, ma ero sempre andato più o meno ad intuito. Noto che sul mio sito è leggermente più larga della tua, ma devo dire che finora nessuno si è mai lamentato in maniera eccessiva 🙂 Il tuo totale è di 850px mentre io mi sono spinto fino a 990. Consultando grafici “di mestiere” mi è stato detto che l’ideale è 960, anche perché si sposa con cose raffinate che noi comuni mortali neppure conosciamo (almeno io), cioè il GRID SYSTEM (ogni grafico da quattro soldi sa cosa sia) e le proporzioni matematiche. Pare infatti che 960 sia un numero facilmente “divisibile” al contrario del 990 che ho usato io. Forse nella prossima versione del tuo tema suggerire di essere migliorato proprio su questo frangente 😉

    • Beh, il layout fluido può andar bene nelle zone in cui può essere utile. Ad esempio, come ti dicevo, il div a scomparsa del mio tema è fluido proprio perché guadagnavo qualche pixel in larghezza sugli schermi grandi, a vantaggio della pulizia (le frasi lunghe del linkblog non vengono spezzate andando a capo).
      In ogni caso si può sempre fare un layout esterno fluido con div interni fissi in modo da garantire un max-width oltre il quale non andare.
      Riguardo al numero… non c’avevo mai fatto caso. Il mio totale però devi considerarlo anche con la linguetta “TIRA” che prende spazio e che mi è costato una fatica incolonnare degnamente (è a destra della sidebar ma a livello di codice il suo div viene prima).
      Riguardo al Grid System, ne comprendo l’eleganza delle proporzioni ma non ne capisco la vera utilità. Quali vantaggi si hanno nell’usarlo? Purtroppo non sono un grafico e tutto ciò che ho spremuto da questo tema era ciò che sapevo o avevo letto in giro per passione! 🙂
      Zobbi, in realtà come ho già detto, il div “principale” è stato ridimensionato per migliorare la leggibilità… riguardo al resto, ho cercato di fare le cose con criterio!
      Ciao,
      Emanuele

  2. Concordo in parte con camu, del resto te l’avevo già detto che secondo me è un po troppo largo però non eccessivamente :). Comunque è bello leggere questi post, spieghi con cognizione di causa tutto quello che hai fatto e pensare che non bado quasi a niente di tutto ciò 😀

  3. Concordo con zobbi sull’utilità di questi post. E’ bello sapere cosa succede dietro le quinte, quando un blog cambia. Io non cambio il mio tema da un bel po’ di tempo oramai (colori a parte) ed ho smesso di raccontare queste storie. Riguardo al Grid System, mi associo: anche io non ne vedo la vera utilità. Però la ragazza (quella rompiscatole di cui parlavo nel sito) ogni volta che rilasciamo un nuovo template qui al lavoro, ci fa due maroni grossi così se c’è anche un solo pixel di sfasatura 🙁 Secondo me sono tutte seghe mentali, capisco la bellezza di vedere tutto in ordine, ma quello che conta è la coerenza del tema in tutte le pagine del sito. Comunque se vuoi te la mando, così puoi discutere direttamente con lei eh eh

    • Ehehe, no, mi accontento dei pazzi che conosco, non ho bisogno di pazzi di altre nazioni! 😛
      Comunque è vero, certe cose sono faziosità da puristi senza senso. Un po’ come chi non usa applicazioni KDE su Gnome, come se il sistema dovesse subire chissà quale oltraggio.
      Non so se l’occhio umano (perché in effetti, grid system e compagnia bella penso si rifacciano a degli equilibri che vengono apprezzati inconsapevolmente…) riesca a percepire quei pochi pixel di differenza come “stonatura”. D’altronde se non ne avessi parlato, nessuno sarebbe mai venuto a dirmi “oh, usa questo font qui che quest’altro non è ottimizzato…”.
      Riguardo ai post, grazie… sono nati anch’essi per gioco. Durante la scrittura del template avevo preso nota di alcune decisioni sulle quali avevo riflettuto più del solito e da queste sono nati questi post! 🙂
      Ciao,
      Emanuele

  4. Non passavo da queste parti da *troppo* tempo e me ne vergogno… questo nuovo tema è azzeccatissimo!

    E vai coi post “tecnici”, che se ne sentiva la mancanza! 😆

    • Mi fa piacere che ti piaccia… se ti va, provi a dirmi più specificamente cosa apprezzi?! 🙂
      Riguardo ai post tecnici… molte volte non ho il tempo per scriverli e così passano in secondo piano. Un post come questo ruba tempo, i link vanno collezionati e poi inseriti correttamente. Le idee vanno ordinate, bisogna capire bene cosa e come andare avanti e così via… descrivere la mia vita è molto più semplice. Seguo ciò che ho dentro e vado avanti. Comunque vedrò di fare sia l’uno che l’altro, in fondo scrivere queste cose mi diverte!
      Ciao… e vedi di non sparire di nuovo! 😛
      Emanuele

  5. Sai cosa potrebbe essere utile in questa pagina e che tuttavia manca? …il link alla “puntata del lunedì”, alla terza puntata di questa rubrica…
    io ora devo andarlo a cercare e siccome sono entrato per la prima volta ci metterò un pochino (forse) per trovarlo…

    …vabbè dai.. era solo un suggerimento, non so se veramente utile o facilmente fattibile…

    …e visto che son qui a scrivere… ti ringrazio per questi post 🙂
    buona pasqua

  6. Grazie mille 🙂 (in realtà le avevo già cercate ma me ne erano sfuggite un paio)

    a presto, mick

Rispondi a Andrea@BV Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.