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 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.

Ovviamente 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

Stasera dopo università-palestra-riunione di comunità capi, sono passato da una festa di compleanno. Giusto in tempo per la torta e giusto per fare gli auguri e correre verso il letto.

Durante la festa ero intento a chiacchierare con un amico dell’ultima puntata di Chuck mentre gli invitati si alternavano al karaoke. Ad un certo punto mi guardo un po’ in giro, guardo il monitor del karaoke e la prima cosa che mi esce fuori è: “certo che usano un software vecchissimo questi qua!”.

Mi sono fatto schifo da solo. Ero ad una festa. Potevo pensare alle canzoni, alle capacità canore del tizio di turno, alle ragazze, ai vestitini più o meno attillati… e invece no.

Ho chiesto scusa all’amico e per compensare ho iniziato a parlare della torta (buonissima ma che tristemente non rappresenta il vero salto di qualità del discorso! ).

Adesso vado a nanna, domani sarà una giornata tremendamente lunga.

Emanuele

Poi aveva cominciato a scrivere al centro esatto del foglio, senza bisogno di contare i quadretti.

2760889966649. Aveva rinchiuso la penna e l’aveva posata a fianco del foglio. Duemilasettecentosessantamiliardiottocentottantanovemilioninovecentossesantaseimila
seicentoquarantanove, aveva letto ad alta voce. Poi di nuovo, sottovoce, come per appropriarsi di quello scioglilingua. Decise che quel numero sarebbe stato il suo. Era sicuro che nessun altro al mondo, nessun altro in tutta la storia del mondo, si fosse mai fermato a considerare quel numero. Probabilmente, fino ad allora, nessuno l’aveva neppure mai scritto su un foglio e men che meno pronunciato ad alta voce.

Dopo un attimo di esitazione era andato due righe sotto e aveva scritto 2760889966651. Questo è suo, aveva pensato. Nella sua testa le cifre avevano assunto il colore livido del piede di Alice, stagliato sui bagliori azzurrati del televisore.

Potrebbero anche essere due primi gemelli, aveva pensato Mattia. Se lo sono…

Tratto da: “La solitudine dei numeri primi” di Paolo Giordano

Emanuele

Ieri sera sono andato a vedere con quattro amici “La matassa”, il nuovo film di Ficarra e Picone.

Rispetto allo stile mostrato nei film precedenti, in questo si evince una maturità dei due attori incredibile. La loro comicità è ormai nota e possono concentrarsi anche su altro.

Le risate ovviamente non mancano ma ci si accorge presto che la storia, raccontata e girata tra Catania, Ragusa e Paternò, nasconde dell’altro. Seppur con tanta ironia, mostrano infatti uno spaccato di vita tanto vicino alla realtà.

Una realtà forse molto italiana ma sicuramente poco rara da trovare per un semplice motivo: tutto nasce da una lite in famiglia mai risolta e ingrandita col passare del tempo.

E’ sempre così, quando si litiga, ognuno crede di avere ragione, e le ragioni di ognuno sono come fili che col tempo si ingarbugliano e diventano un’unica matassa. Il mondo è pieno di matasse, ogni famiglia ha la propria – più o meno ingarbugliata – come la famiglia di Paolo e Gaetano, che è un po’ come se fosse la mia…

Prologo del film “La Matassa“

Ieri sera mi sono addormentato ripensando a certe battute e stamattina quando mi son svegliato le avevo ancora in testa!

Ve lo consiglio vivamente… pezzi di merda! (cit.)

Emanuele

PS: “pezzi di merda” è un saluto, eh!

Mia sorella: ho fame, ma il bar è distante e qui giù c’è solo una macchinetta…

Io: ah, e sei senza patentina?!

Oggi giornata infernale. Mattina all’università, pranzo fuori per discutere di alcune cose scout, alle 15 al supermercato (e spesa in tempo record: una macchina piena in 40 minuti), poi di corsa fuori… un amico stasera s’è iscritto in palestra e voleva comprarsi scarpe, tuta e tutto il resto…

Comunque, adesso la giornata è finita (mi rimane la cena che è in forno…) e ho ancora un minimo di energie per passare da qui.

Stamattina mi è arrivato il pacco mandato da quelli di BuzzParadise con un mega-set di shampoo della H&S, unito ad una mini palla da rugby e una micro penna USB (sia per dimensioni che per capienza).

Dopo la palestra ho colto l’occasione per provare uno di questi shampoo. Ho scelto quello “Classic 2 in 1″ che contiene un po’ di balsamo in modo da combattere la tendenza naturale dei miei capelli ad esser crespi.

Non potevo fare dieci lavaggi e provarli tutti, però so già che il prossimo che aprirò è quello “Mentol” che dovrebbe avere un’azione rinfrescante (ottimo quando ci sarà caldo!).

Vi farò sapere come mi trovo… al momento è inutile dirvi di più, è ovvio che i capelli li sento lavati e freschi, ma penso sia il compito di qualsiasi shampoo!

Vi lascio allo spot che ho trovato nella penna usb e mi dispiace constatare che, oltre ad un sito web miserabilmente offline (un “404 not found” per la homepage non è bellissimo…), non abbiano inviato una versione tradotta dello spot.

Aggiornamento del 09-04-2009: Come mi fa notare Luca Conti nei commenti, ecco la pagina relativa ai prodotti H&S.

Aehm, stavo dimenticando un particolare: non sono pagato per questa recensione, mi è stato proposto di provare i prodotti e pubblicare le mie impressioni.

Emanuele

Rieccoci con l’ennesimo appuntamento. Ho già parlato di layout e dimensioni, il prossimo passo è capire che tono dare alle nostre pagine.

Inutile farvi la mielosa manfrina sul verde-speranza, rosso-passione, nero-inquieto, arancione-piccante e così via. Lo sappiamo tutti.

Io ad esempio volevo dare al blog un tono fresco, leggero e allegro, così, come psicologia insegna, i colori da usare erano pastelli chiari: azzurro, verde (volevo persino mettere un po’ di giallo ma poi vi spiego un po’ perché non l’ho messo…). Anche il colore del testo non è un semplice nero.

Innanzitutto dobbiamo rispondere ad una semplice domanda: di cosa parleremo nel blog? Stiamo costruendo il nostro tema e abbiamo la possibilità di ottimizzarne ogni suo aspetto. Quali saranno gli argomenti?

Nel mio caso la risposta la conoscevo già, il mio blog va avanti da anni e difficilmente cambierà target. E’ un blog personale e dunque pieno di racconti di giornate più o meno allegre, più o meno pesanti, più o meno storte.

Ecco, l’ultima parola potrà sembrare stupida ma non lo è.

La vita (qualche manfrina mielosa devo pur scriverla da qualche parte) è fatta di alti e bassi, così, come vi sentireste a scrivere dentro un cuoricino frasi inneggianti l’odio?

E’ un esempio drastico di come il contenitore possa risultare in contrasto con il contenuto. Potrà sembrar banale ma non lo è.

Questo periodo della mia vita è particolarmente allegro e questo – è giusto dirlo – volevo farlo risaltare. Sia perché mi rispecchia molto, sia perché i contenuti presumibilmente continueranno ad avere questa linea.

Però, so che non sempre sarà così. Si dice che uno degli errori più grandi degli uomini sia quello di non cercare le nuvole in cielo quando c’è bel tempo. Io voglio esser preparato, così mi son chiesto se non corressi il rischio di odiare (parola grossa) questo posto ogni volta che, arrivando da queste parti di pessimo umore, mi sarei ritrovato un bel sole (ecco il giallo!) stampato in faccia.

Va bene che psicologicamente può persino aiutare, però volevo sentirmi libero di adattare il tema ai contenuti e non il contrario.

Volevo dargli un argomento ma non chiuderlo a doppia mandata su uno specifico. Così, l’header è sì allegro, ma non carico. C’è un bel sorriso, ma… provate a mettergli una mano davanti. Cosa vedete? Un panorama sereno, che tra l’altro incuriosisce per il suo inconsapevole aspetto indeciso.

Bene, dopo questa manfrina sono sicuro che anche voi avrete scelto i vostri colori. Ma… come far combaciare tutto in modo da non essere un pugno nell’occhio, come un verde acceso accanto ad un giallo?

Io non sono un bravo grafico (non sono neanche un mago nell’accoppiare scarpe, jeans e maglietta) ma c’è chi ha fatto mezzo lavoro per noi. Quelli di COLOURlovers. Sul sito trovate schemi di colori proposti da utenti (con un pizzico di buon gusto in più di noi) che sono continuamente, scelti, rivisti e votati dalla community. Insomma, scegliete un umore (provate con “happy” ad esempio) e trovate sicuramente un accoppiamento carino. Ah, se ve ne innamorate, hanno persino un feed costantemente aggiornato con gli ultimi inserimenti.

Ovviamente ricordatevi di cosa state facendo: un sito web non è una locandina pubblicitaria, così i colori troppo accesi visti su un monitor (che li illumina) potrebbero dare più fastidio rispetto alla stessa versione stampata. In linea di massima i colori pacati vanno bene per il tema, quelli accesi per dei particolari (piccoli) che volete far risaltare.

Infine, non dimentichiamo la cosa più importante: la leggibilità.

Stiamo costruendo (e lo dico per l’ennesima volta) un blog! La caratteristica che lo contraddistingue è proprio la presenza continua di nuovi contenuti. Un conto è dover leggere una sola volta un testo giallo canarino su sfondo bianco, un conto è doverlo fare ogni giorno per ogni nuovo contenuto. Ricordatevi dei vostri lettori (oppure pagategli la visita dall’oculista).

La scelta del colore del testo (e del suo contrasto con lo sfondo), assume dunque un aspetto fondamentale.

Alcune ricerche sperimentali condotte una decina d’anni fa e volte a valutare la leggibilità di un testo in base ad alcune coppie di colori, hanno mostrato come la migliore leggibilità si ottenga col verde su sfondo giallo (ebbene si, sorpresa per tutti). L’elevato contrasto favorisce la lettura. A seguire immediatamente questo risultato c’era il classico “nero su bianco” (eccolo, ve lo aspettavate…). Il bianco su nero e altre combinazioni mostrarono livelli di leggibilità inferiori.

Personalmente non avevo voglia di inserire uno sfondo verde, però volevo tenere conto di questo aspetto e per questo entra in gioco lo spettro dei colori. E’ infatti consigliabile evitare l’accoppiamento di colori agli estremi dello spettro (ad esempio giallo e viola o rosso e blu) in quanto affaticano la vista. Per questo il testo sul mio blog non è nero (codice RGB #000000 ma un più pacato #444444).

Tale conferma arriva da WordPress stesso: durante lo sviluppo della versione 2.7 una grande attenzione fu posta alla qualità del backend. Fu chiesto il supporto di designer professionisti e… avete notato come il testo, a differenza delle versioni precedenti, non sia in un semplice nero su bianco ma un grigio (codice #333333) su bianco? Tutto torna.

Ah, un ultimo consiglio: evitate il rosso e il verde per il testo. I daltonici hanno difficoltà a distinguerli e l’accessibilità passa anche da li.

Si continua giovedì…

Emanuele

È proprio la possibilità di realizzare un sogno che rende la vita interessante.

Paulo Coelho – L’Alchimista

Emanuele

(photo credits)