Blog Design

Da web design a Blog design

Dai primi blog a oggi Anche se oggi i layout e le piattaforme tra cui scegliere sono molto più numerose, i contenuti e la conversazione restano gli elementi principali. Ma come scegliere fra le varie proposte grafiche e le varie piattaforme per avere una conversazione ancora più ricca con i lettori? Come concentrarsi su semplicità e facilità d’uso ? Ecco alcuni consigli… L’approccio dei primi blog, nati nel 1997 , era minimalista e il design era volto ai contenuti e poco altro. L’obiettivo era poter conversare con i propri amici e colleghi.

Caratteristiche di un Blog

Struttura Standard e automatica: il Software Blog gestisce in automatico elementi come categorie, gli archivi, i commenti etc.

Commenti : i lettori possono rispondere ai post

Permalink : ciascun post e ciascuna categoria ha un indirizzo Internet unico e permanente, ha un grande valore per i motori di ricerca

link interni ed esterni: I blog traggono la loro forza dai link; facendo riferimento ad altri post, articoli, siti si alimenta la conversazione collettiva e si costruiscono le relazioni

Contenuti Multi-autore: I blog possono essere scritti da uno o più autori

Magneti per i motori di ricerca: con un posting regolare, contenuti ben categorizzati e link parlanti per i motori, i Blog sono premiati e amati dai motori di ricerca

Gli elementi standard

Titolo e sottotitolo del Blog

Profilo (alcune pagine statiche su Autore e sul focus del blog)

Motore di ricerca interno al Blog

Bottoni per iscrizione Feed RSS

Le categorie

Gli archivi

Ultimi post

Ultimi commenti

Commenti su altri blog

Blogroll (elenco di link ad altri blog)

Permalink

Trackback

Caratteristiche principali

Meta informazioni (o meta data)

Organizzazione dei nuovi posts

Tags

RSS, Syndacation e email notification

Meta informazioni 1 Le meta informazioni sono “informazioni sulle informazioni”. Sono le info che riguardano l’autore e il blog stesso. “ About” page: È una delle pagine più visitate, soprattutto se il lettore trova il blog interessante. Potete metterci informazioni personali o professionali, foto e contatti. Ma la cosa più importante è che il link a questa pagina sia ben visibile sulla Homepage.

Bengoodger.com About page è simile ad un CV. Ben Goodger è Lead Engineer presso Firefox

Meta informazioni 2 Sidebar/s: E’ la colonna/e che fornisce altre meta informazioni. Ad es. elenchi di siti che linkano al vostro blog, cartine che localizzano il vostro business, commenti recenti, post recenti , informazioni sul traffico di utenti al vostro blog. La blogosfera si aspetta questo tipo di dati e fornirli significa apertura a condividerli.

Nella sidebar ci sono molte info sul blog di Jeremy Wagstaff, un giornalista della sezione Tecnologia della BBC e della versione online del Wall street journal Loosewire.typepad.com

Meta informazioni 3 Blogroll: è la lista di link che sono di interesse del blogger. E’ importante sia perché rivela gli interessi del blogger sia perché indica ai MdR le relazioni con gli altri blogger

Organizzazione dei posts Per consentire ai nuovi utenti che atterranno sul vostro blog di leggere non solo il post più recente ma anche gli altri è utile organizzarli in categorie Le piattaforme per i blog consentono di assegnare ad un post più di una categoria. Un altro modo è visualizzare i post più recenti nella sidebar Es.: www.businesslogs.com

Tags Un altro modo per organizzare i posts è taggarli . E’ come creare delle categorie basate sulle keywords e poterne applicare innumerevoli ad ogni posts, per consentire una ricerca ampia e multipla su ciascun post. I tag infatti sono ricercabili nel motore interno al blog. I tag possono essere visualizzati nelle tag cloud, che è una descrizione visuale di tutti i tag correnti in uso. La grandezza del carattere è direttamente proporzionale al volume di ricerca effettuata dai lettori/uso di quel tag. Non tutte le piattaforme di blog consentono di taggare ma potete fare il plug-in di programmi esterni es: www.unionsquareventures.com i tag sono creati dagli autori dei post Flickr: i tag sono creati dagli user

Rss e Syndacation Trasmettere (broadcast) agli iscritti al vostro blog ogni vostro nuovo post è una delle opzioni fondamentali che il vostro blog deve avere. La maggior parte delle piattaforme per blog hanno già integrato questo servizio di feed-broadcasting. RSS significa Really Simply Syndacation. Quando un sito è strutturato per supportare la syndication ogni iscritto al servizio può ricevere gli ultimi aggiornamenti non appena sono online

Gli utenti possono iscriversi al servizio di feed RSS nei seguenti modi:

trascinando il bottone arancione nel feed reader:

cliccando con il tasto destro del mouse e copiando il link da incollare nel feed reader

Mettete il button arancione in evidenza in cima alle pagine del blog oppure nelle sidebars.

Per il vostro blog utilizzate Feedburner perché vi consente il monitoraggio degli iscritti al servizio.

L’Email notification consente di ricevere i post direttamente sulla propria email come accade per le newsletter.

L’integrazione di questo servizio nel blog e semplice e si può fare con programmi come quello di FeedBlitz .

Rss, Syndacation e email notification

Rss e Syndacation

Ci sono 3 opzioni per divulgare i nuovi contenuti del vostro blog:

Trasmettere solo il titolo : è l’opzione più appealing per i bloggers perché così l’utente deve andare sul blog per leggere il resto. Ma è frustrante per il lettore e snatura il servizio stesso di feed RSS

Trasmettere titolo e una parte del testo : di solito vengono visualizzate le prime frasi del post. E’ più user-friendly del primo e favorisce più iscritti e riduce le disiscrizioni

Trasmettere titolo e versione intera del post : è la soluzione ideale per il lettore ma se avete delle pubblicità nel vostro blog il CTR si abbasserà perché molti meno utenti lo visiteranno.

Commenti GM’S Fastlane blog ha uno staff dedicato solo alla gestione dei commenti mentre Boeing li gestisce in maniera tradizionale pubblicando solo quelli meritevoli in una pagina editoriale. Consentono di creare un dialogo con i propri lettori che possono aumentare l’attenzione e il traffico. Sono indicatori anche dell’interesse che un blog o un post riscuote. Richiedono però un certo impegno . http://fastlane.gmblogs.com

Rischi dei commenti Il consiglio è di stilare una policy che prevenga gli abusi. I commenti sono preda dei comment spammer che usano “robot” per navigare migliaia di blog per trovare quelli dove pubblicare commenti spam. Questi contengono offerte da casinò e vari prodotti farmaceutici e link ai siti degli spammer che dovrebbero avere anche un peso sul ranking nei MdR. Altri commenti sono quelli che contengono oscenità o commenti fuori tema. Il suggerimento è di inserire dei filtri o una moderazione dei commenti.

Sistemi di filtraggio dei commenti

Pre-autorizzazione dei commenti :

quando un lettore commenta, il contributo viene spedito via mail

all’autore che decide se renderlo pubblico o meno.

Quando un lettore ottiene l’approvazione di una serie di commenti, i suoi

commenti vengono approvati e postati automaticamente sul blog.

Questo consente di far sentire il lettore parte di una community esclusiva .

Sistemi filtro per commenti “robot”: il form per i commenti include una grafica contenente testo da riportare a mano in un campo dedicato. Questo step è obbligato e consente la validazione (controllo) del commento.

Strumenti di esclusione semi-automatizzati: il proprietario del blog può segnalare al sistema un indirizzo IP del commentatore da bannare automaticamente dai commenti oppure una blacklist di parole che se contenute nei commenti ne impediscano la pubblicazione.

Di sicuro nessuno di questi sistemi può sostituire pienamente il monitoraggio e la moderazione umana. Ma questi ultimi richiedono tempo e a volte costi maggiori.

Trackbacks A differenza dei commenti che potreste lasciare sul blog di un altro blogger, il trackback vi consente di scrivere commenti o post di risposta sul vostro blog personale e avere lo stesso testo ripubblicato come commento sul blog cui state facendo riferimento o che state citando. Così con un solo sforzo ottenete un doppio risultato.

State leggendo un post su un altro blog che vorreste commentare?

Non riempite il form dei commenti ma cercate il link “Trackback”

Cliccate con il tasto destro del mouse

Copiate il link

Aprite un form di un nuovo post di risposta nel vostro blog

Cercate nel form il box chiamato “Trackback” o “Ping”

Incollate in quel campo il link che avete copiato

Il vostro blog notificherà automaticamente all’altro sito che è stato fatto un commento e l’altro blog lo visualizzerà.

Anche i trackbacks comunque sono soggetti agli spammer.

Come funziona il trackback?

Caratteristiche di un Blog

Struttura Standard e automatica: il Software Blog gestisce in automatico elementi come categorie, gli archivi, i commenti etc.

Commenti : i lettori possono rispondere ai post

Permalink : ciascun post e ciascuna categoria ha un indirizzo Internet unico e permanente, ha un grande valore per i motori di ricerca

link interni ed esterni: I blog traggono la loro forza dai link; facendo riferimento ad altri post, articoli, siti si alimenta la conversazione collettiva e si costruiscono le relazioni

Contenuti Multi-autore: I blog possono essere scritti da uno o più autori

Magneti per i motori di ricerca: con un posting regolare, contenuti ben categorizzati e link parlanti per i motori, i Blog sono premiati e amati dai motori di ricerca

Anatomia di un Blog 1 2 5 6 3 7 4 8 9

Gli elementi standard

Titolo e sottotitolo del Blog

Profilo (alcune pagine statiche su Autore e sul focus del blog)

Motore di ricerca interno al Blog

Bottoni per iscrizione Feed RSS

Le categorie

Gli archivi

Ultimi post

Ultimi commenti

Commenti su altri blog

Blogroll (elenco di link ad altri blog)

Permalink

Trackback

Search

Inserire una search box nel vostro blog può essere utile per due motivi:

Rendere il blog più “ reader friendly” . I vostri utenti possono trovare i contenuti di post meno recenti non solo navigando per categorie o keywords links/tags ma anche cercandoli nel MdR interno al vostro blog

Trovare vecchi post da citare se state scrivendo un nuovo post.

Come aggiungere una search box

Per aggiungere la search box è semplice come scegliere fra due semplici alternative:

Potete utilizzare i template preformattati del programma di hosting del vostro blog che includono la search box nella sidebar

Potete inglobare la search box che Google ha dedicato ai blog, conosciuta

come “Google Free WebSearch”.

Per aggiungerla al proprio blog è necessario aprire un account gratuito su Google e per ricevere il codice HTML da copiare e incollare nella sidebar del vostro blog.

Lati positivi:

“ Google Free WebSearch” è un’ottima soluzione per chi utilizza programmi per blog che non hanno questa funzione.

Lati negativi:

Oltre ai risultati della ricerca vengono visualizzati anche gli annunci pubblicitari. Inoltre perché la ricerca funzioni i post devono essere tutti già indicizzati su Google . Pertanto accertatevi di aver dato l’ok ai robots dei MdR per l’indicizzazione (che potete anche vietare). www.robotstxt.org

Calendari I calendari non sono per tutti. Oltre ad occupare molto spazio indicano anche quanto frequentemente postate. E’ forse più utile per il lettore trovare i vostri post per categoria, tag, titolo e tema che non per data. Nel blog Mezzoblue.com , il web designer Dave Shea incoraggia i suoi lettori a esplorare e navigare il suo archivio offrendo visualizzazioni diverse organizzate per data, links ai post più recenti, calendario . I calendari possono essere aggiunti nella sidebar e mostrano in quali date sono stati pubblicati dei post Cliccando sulle date si arriva al post in questione., calendario.

Layout delle pagine Di solito i blog hanno un layout simile l’uno agli altri. Un banner in cima, gli elementi della navigazione e due o tre colonne per i contenuti. Le colonne permettono di ordinare i post graficamente da quello più recente e quello meno recente. Gli spazi bianchi fra le colonne rendono più agevole la lettura. Se avete un designer esperto di blog che può seguirvi potete anche pensare ad un layout diverso da quello classico in colonne, in modo da esprimere al meglio la vostra personalità e il vostro business. Se invece dovete affidarvi all’offerta di una piattaforma classica per blog potete quasi solo scegliere nella ricca offerta di template. Comunque il numero e l’ampiezza delle colonne e la collocazione dei diversi elementi è sotto il vostro completo controllo. La collocazione degli elementi è importante e dipende dai vostri obiettivi (rispondere ad un sondaggio, leggere i servizi che offrite, richiedere maggiori info sui servizi, etc.). Come fare?

Above the fold In qualsiasi tipo di sito, i contenuti più importanti vanno collocati nella prima schermata visibile all’utente quando atterra sul vostro sito. Questa schermata si chiama “above the fold” e non richiede lo scroll della pagina. Eyetools , basandosi sulle ricerche di eye-tracking, ha costruito un diagramma che mostra quali sono le zone che riscuotono maggiore attenzione nelle pagine web. I box più scuri sono quelli che ricevono maggiore attenzione. Pertanto in alto a sinistra vanno collocati gli elementi che portano l’utente all’obiettivo principale del vostro blog (per es. vendere un prodotto, far compilare un form, etc.).

Quante colonne? Quanto sia strategica la schermata “above the fold” lo dimostra la questione delle colonne di contenuto . Tutte le piattaforme di blog offrono template con 1, 2 e 3 colonne. Molti designer sostengono che i layout con 1 o 2 colonne sono molto più puliti e che enfatizzano di più il post che scrivete. Ma 1 o 2 colonne implicano più oggetti below the fold sulla sidebar che obbligano il lettore a scrollare la pagina per leggerli. Perciò molti blog professionali (a differenza di quelli personali) preferiscono il layout a 3 colonne. Alcuni sostengono che le 3 colonne confondono il lettore. Ma si possono ottenere layout chiari e appealing anche con 3 colonne. Amazon.com, ad es., ha testato per anni l’efficacia dei suoi layout e ha provato che il layout a 3 colonne vende molto meglio degli altri perché contiene molte più opzioni above the fold.

Amazon

Come cambiare layout ? Con piattaforme hosted come Typepad e Blogger è semplice e veloce come logarsi e cliccare sulle opzioni disponibili. Il tempo necessario sono 5-10 minuti. Con piattaforme customizzabili self-hosted come Movable Type e Wordpress, che girano su un server che voi gestite, avete bisogno di un team composto da un Web designer/developer e da un administrator che acceda al web server. Per queste piattaforme infatti dovete riscrivere il codice del template (grafica) che state utilizzando e poi caricare quello modificato sul server. Pertanto il tempo necessario può essere un giorno, fra installazione, configurazione e creazione del nuovo template.

Font In teoria molti sono i caratteri fra cui scegliere ma solo pochi sono adatti ai blog. Eccetto che in alcuni casi le pagine web possono essere visualizzate solo usando il carattere già presente sul computer dell’utente . Pertanto se scegliete un carattere che l’utente non ha sul suo computer il browser con cui stanno navigando automaticamente sceglierà un carattere sostitutivo. Così i vostri sforzi di formattazione andranno persi e il testo sarà meno leggibile. Quindi usate i font già preimpostati nei template della piattaforma del blog che avete scelto, perché sono quelli più largamente installati nei computer dei vostri potenziali user. Verdana è uno dei caratteri più utilizzati dai blog, sia perché è uno dei più installati dalle diverse piattaforme (Macintosh, Windows e Unix) e sia perché è quello che si legge meglio sul computer. Altri font largamente installati e screen-friendly sono Georgia e Trebuchet.

Quanto deve essere grande il font ? Lo schermo del computer è come un mosaico. Colorando le diverse tessere (pixel) appaiono le immagini. La tendenza è ingrandire gli schermi ma rimpicciolire le tessere. Perciò il risultato è che i designer preferiscono una grandezza del font più elevata: 14 pixels di altezza per le frasi Fino a 60 pixels per i titoli Font grandi sono di sicuro un’ottima scelta Rendono i contenuti più leggibili ma il consiglio e di non esagerare.

Colori Per le applicazioni hosted come Typepad e Blogger potete prendere il colore da una selezione di template realizzati da designer professionali. Con le piattaforme customizzabili self-hosted come Movable Type e Wordpress , dovrete chiedere al vostro designer di scegliere il colore giusto per il vostro blog. Se state customizzando il vostro blog potete usare i colori dei vostri prodotti di marketing o i colori aziendali. Oppure potete utilizzare quelli del logo. Molte aziende aggiungono solo in un secondo momento il blog al sito aziendale e integrano il nuovo mezzo con la grafica delle pagine web già esistenti. Ricordate comunque che il blog è un media casual e informale. E’ consigliabile usare colori soft come arancio o verde . Come fare? Uno dei metodi più usati è prendere il colore da foto digitali (per es. un bel paesaggio). Aprite la foto con un programma di foto editing, usate il tool Eyedropper per selezionare la parte di colore più consistente e utilizzatela per il vostro blog. Per approfondimenti consultate: www.webwhirlers.com

Corporate typeface Se dovete realizzare un blog rispettando gli elementi del “carattere istituzionale” (corporate typeface) un ottimo strumento può essere d’aiuto: la tecnologia Flash . Flash è un formato grafico per il web che viene utilizzato per le immagini di alta qualità (cartoline, giochi, cartoni sono realizzati in flash.) Flash richiede che gli utenti che visitano il blog abbiano installato Flash player (ma la percentuale è il 97% del totale dei web user). A cosa serve ? Flash consente di far visualizzare il font che avete scelto anche se l’utente non ha quello specifico font pre-installato . Anche se un utente non l’ha installato l’applicazione Flash player vede un font che voi avete pre-scelto, ad es. Verdana.

Esercizi

Scegliete un argomento nicchia (diverso dal vostro) e cercate alcuni blog. Quale stile e design vi piace di più?

Cercate di capire:

quale piattaforma è stata utilizzata da blog che avete scelto?

Il blogger ha lasciato un link nel footer o nella sidebar al software utilizzato?

Oppure è visibile nell’url (xxx.wordpress.com; xxx.typepad.com)?

Vi sembra che la piattaforma offra quello di cui avete bisogno?

Le regole di Jacob Nielsen

Ecco alcune regole secondo Jacob Nielsen:

Inserite la vostra biografia e la vostra foto

Fate in modo che i titoli dei vostri post siano descrittivi,..

Specificate i link e utilizzate Anchor text chiari e non sconosciuti

Fate in modo che i vostri cavalli di battaglia, i vostri successi evergreen, siano facilmente visibili e non rimangano sepolti e abbandonati negli Archivi