Prosegue e si conclude l’articolo dedicato alla tipografia dei post da adottare per il proprio blog, per migliorare l’usabilità stessa del blog e la lettura degli articoli.

Il precedente articolo ha trattato della gestione del testo, quindi titoli, caratteri, sottotitoli paragrafi e liste. In questo post parlerò del percorso pagina, delle immagini da inserire, dei link, delle citazioni e di come visualizzare posrzioni di codice nei post.

Percorso pagina

Il percorso pagina rappresenta un aiuto nella navigazione, informa l’utente sulla sua posizione all’interno del vostro blog. Si colloca al di sopra del titolo del post, la grandezza del carattere è inferiore a quella del testo o al massimo delle stesse dimensioni.

Non scegliete comunque una grandezza troppo piccola per il carattere: dal momento che la navigazione a briciole di pane rende il blog più usabile, la sua leggibilità deve essere facilitata.

Potete scegliere, per il testo del percorso pagina, un colore differente rispetto a quello utilizzato per il post, magari un grigio, l’importante è che sia leggibile. Usare un grigio che si avvicina molto al bianco equivale a non avere un percorso pagina.

Immagini di corredo

Un articolo si completa attraverso l’uso di una o più immagini. Un’immagine ad inizio post deve richiamare immediatamente l’argomento che si sta trattando. Permette al lettore di memorizzare subito il tema dell’articolo.

Il post potrebbe necessitare di altre immagini. L’importante è come esse sono presentate al suo interno.

Anche in questo caso pensate ai vostri lettori. Non inserite immagini pesantissime, che rallenteranno il caricamento della pagina. Fate scorrere il testo attorno all’immagine e rendete, se necessario, quell’immagine cliccabile per farla visualizzare a dimensioni maggiori.

Le proprietà di un’immagine da definire nel foglio di stile sono:

img {margin: 0 4px 4px 0; border: 0; float: left;}

In questo caso abbiamo stabilito che il testo sia distanziato dall’immagine di 4 pixel a destra e in basso, che l’immagine sia posta a sinistra del testo e che non mostri alcun bordo.

Ovviamente potete cambiare a vostro piacimento queste regole, ma ricordate di lasciare spazio almeno alla sua destra e in basso, affinché il testo non appaia attaccato e renda difficile la lettura in quel punto.

Link

Un link è un altro elemento importante all’interno del post: rappresenta una risorsa per i lettori, sia che si tratti di una pagina interna del blog sia di un sito esterno.

I link devono essere evidenziati nel post: usate quindi un colore differente da quello usato per il testo e che mantenga il giusto contrasto con lo sfondo.

Potete utilizzare un colore di fondo, la sottolineatura (che però non facilita la lettura del testo), l’importante è che siano ben visibili nel testo.

Le citazioni

Una citazione è una porzione di testo proveniente da un’altra fonte. Anche in questo caso è bene che sia differenziata dal resto del testo.

Escogitate un modo elegante per visualizzare una citazione: uno sfondo che mostri le virgolette aperte, oppure un colore di fondo differente. Evidenziatela anche grazie all’uso dei margini e dei rientri, in modo che risulti subito visibile all’occhio.

Una citazione è definita dal seguente tag:

<blockquote>Citazione</blockquote>

Visualizzare porzioni di codice

In alcuni casi si ha la necessità di mostrare porzioni di codice HTML. Questo discorso vale per blog che trattino gli aspetti tecnici del web design e della programmazione, ma potrebbe servire anche ad altri.

Il codice potrebbe innanzitutto non visualizzarsi correttamente, è necessario quindi, prima di tutto, renderlo “leggibile”. Ad esempio il sottotitolo:

<h3>Visualizzare porzioni di codice</h3>

dovrebbe diventare:

<h3>Visualizzare porzioni di codice</h3>

In questo modo si è sicuri che nella pagina web il lettore leggerà:

<h3>Visualizzare porzioni di codice</h3>

Fatta questa premessa, al codice possiamo dare una sua grafica, che lo renda ben riconoscibile all’interno del testo.

Su Blog Rank ho optato per un’immagine di fondo e un bordo tratteggiato ed ho utilizzato il carattere Courier New.

Conclusione

L’aspetto grafico di un post è importante e non va sottovalutato. In fase di progettazione del blog bisogna quindi prendere in considerazione anche questo aspetto.

Nelle due immagini seguenti potete fare un confronto tra il presente articolo senza formattazione e lo stesso così come lo vedete ora.

Quale dei due vi risulta più accattivante e leggibile?

Di Daniele Imperi - Lunedì 21 Settembre 2009 - Blog design, Blogging per principianti - 656 parole