Ecco uno studio sul design di blog famosi

I ragazzi di Smashingmagazine.com stanno conducendo un interessante studio sul design di blog famosi.
Di seguito puoi consultare ciò di cui parla l’articolo in merito ai problemi risolti ed alle scelte dei progetti esaminati.

Noi siamo molto curiosi, soprattutto quando si tratta di design e sviluppo vogliamo sapere tutto.
Abbiamo deciso di esaminare più da vicino i layout ed il design di alcuni blog, analizzarli e scoprire le soluzioni comuni e quelle non utilizzate da tutti.

Dal momento che abbiamo voluto iniziare l’indagine, abbiamo utilizzato i primi 50 top blog di Technorati che figurano nella classifica.

Non importa se la classifica di Technorati è corretta o no, abbiamo voluto scoprire quali sono le soluzioni che i blog più popolari preferiscono e adottano.

I blog più famosi sono spesso considerati come esempi di una efficace e funzionale design (anche se non è sempre vero).

Il Sondaggio sul Blog Design

Abbiamo individuato 30 problemi di design considerando per ciascuno le varie soluzioni separatamente.  Abbiamo posto 30 domande nel nostro sondaggio.

Di seguito vi presentiamo i risultati di un’analisi di 50 blog famosi secondo la classifica dei top 100 di Technorati.

Considerando i primi 50 posti, abbiamo filtrato i social network ed i blog che si sono posizionati bene in modo artificioso, ad esempio attraverso il rilascio di temi Wordpress.

Arttenzione: i risultati presentati qui di seguito non devono essere considerati come linee guida per creare un design efficace per un blog. Sarete voi a scegliere le migliori soluzioni.

Tuttavia, è necessario considerare il contesto in cui si sta lavorando e seguire ciecamente queste soluzioni potrebbe non essere la cosa migliore per migliorare il tuo design.

E’ comunque importante conoscere ciò che non dovrebbe essere fatto.

1.1. Quante colonne?

Il problema dell’utilizzo di 2 o 3 colonne in un layout è quasi filosofico. Purtroppo, non siamo stati in grado di trovare alcun risultato su studi di usabilità che preferirebbero una soluzione piuttosto che un’altra. Come al solito, dipende dal contesto.

In alcuni casi è semplicemente impossibile trovare un giusto equilibrio tra contenuto primario e secondario con 2 colonne.
In queste situazioni può essere necessario dividere la seconda colonna (la barra laterale) in due parti, in realtà questo è una soluzione utilizzata molto spesso.

Un layout a 4 colonne molto spesso non è una buona idea.

In base ai nostri risultati:

  • Il 58% utilizza 3 colonne di impaginazione.
    (TalkingPointsMemo, CopyBlogger, Mashable, Lifehacker);
  • il 42% usa 2 colonne;
    (Zen Habits, GigaOM, Google Blog, Seth Godin, Boing Boing).

il design di tpm

TPM utilizza un layout multi-colonna. Il 58% dei top blog utilizzare lo stesso approccio progettuale.

1.2. Layout centrato o allineato a sinistra?

Possiamo constatare che la crescente tendenza di pochi anni fa verso layout centrati, spesso è stato il tentativo di trovare una soluzione ottimale per i lettori con piccoli e grandi risoluzioni dello schermo.

Dal momento che un numero sempre maggiore di utenti tendono a passare a risoluzioni più elevate, si cercherà di equilibrare la quantità di spazio che circonda il layout con la stessa quantità di spazio bianco sulla sinistra e sulla destra del layout, concentrando l’attenzione del lettore sul contenuto ponendolo al centro della finestra del browser.

il blog di ReadWriteWeb

ReadWriteWeb ed il suo layout centrato. Secondo il nostro sondaggio, il 94% dei top blog hanno un layout centrato.

Apparentemente questa tendenza è riuscita a diventare l’approccio standard nel corso degli ultimi anni. In realtà, secondo la nostra indagine, il 94% dei top blog hanno un layout centrato. Tra di loro citiamo CopyBlogger, Problogger, ReadWriteWeb, Mashable, Ars Technica, Techcrunch and Huffingtonpost.

1.3. Layout fissi, fluidi o elastici?

Per essere onesti, non abbiamo previsto una forte tendenza verso il layout a larghezza fissa in pixel.
E’ davvero singolare che tra i 50 top blog, nessuno abbia utilizzato un layout elastico (la larghezza del layout incrementa con il crescere della dimensione dei caratteri) e solo una piccola percentuale usa elementi fluidi (il layout si modifica a seconda delle dimensioni della finestra del browser).

Ecco i risultati esatti:

  • Il 92% dei top blog utilizzato un layout fisso;
  • l’ 8% ha utilizzato un layout liquido o un ibrido;
    (Engadget, Smashing Magazine, Gigazine, Coorks and Liars).

Il Layout fluido potrebbe adattarsi alle preferenze dell’utente mentre un layout fisso rende più agevole il lavoro per il designer, che mantiene una grafica predeterminata sia per la grandezza del carattere, che per il ridimensionamento della finestra del browser.

il design di engadget

Il principale svantaggio di un layout liquido è la larghezza, nel momento in cui il blog viene visualizzato ad una elevata risoluzione dello schermo (eccone in esempio: Engadget con 150 caratteri per riga).
Si può contrastare questo problema utilizzando la regola css della larghezza massima di un elemento tramite l’attributo: max-width.

1.4. Larghezza fissa?

Come abbiamo osservato c’è una forte tendenza verso il layout fisso.
Abbiamo deciso di esaminare più da vicino questi layout e cercare di individuare le caratteristiche comuni.
In particolare, abbiamo considerato la larghezza dei layout fissi che di solito corrisponde alla larghezza del contenitore o di solito chiamato # wrapper o #container.

Apparentemente:

  • il 9% usa layout minori o uguali a 800px;
    (PostSecret, Seth Godin, Google Blog, BeppeGrillo.it);
  • il 15% usa tra gli 801ed i 900px;
    (Neatorama, Kottke, DailyKos, Perezhilton, TUAW, Yanko Design, Scobleizer);
  • il 20% utilizza tra i 901 ed i 950px;(Huffington Post, BoingBoing, TreeHugger, Dooce, Blogoscoped, SearchEngineLand);
  • il 56% utilizza tra i 951 ed i 1000px;
    (ars technica, Lifehacker, TechCrunch, ProBlogger, A List Apart, TMZ, Wired, GigaOM, Joystiq, Zenhabis, Copyblogger, Consumerist, Slashfilm).

Conclusione: si può identificare una chiara tendenza verso layout fissi per una larghezza che varia dai 951 ai 1000px.

Nel prossimo articolo, la seconda parte di questa interessante ed utile ricerca sul design di blog di fama internazionale.

Se non vuoi perderti i prossimi articoli iscriviti al feed rss di blographik.

Ti è piaciuto questo articolo?

Ricevi continui aggiornamenti su come migliorare il tuo blog:

Scegli di seguire i post e le chicche di blographik (esclusiva ai soli iscritti), direttamente nella tua casella email.

Abbonati ora alla newsletter compilando questo form.

Nome:
Email:
 
 

Articoli correlati:

Se di tuo interesse, puoi consultare anche i seguenti post correlati:

  • http://www.espertini.com/ Davide Espertini

    Come sempre Mirko le tue segnalazioni sono ottime!! (ed io sto per tornare online.. :-) )

  • http://www.blographik.it Mirko D’Isidoro

    @Davide: bene. Aspetto per settembre i tuoi futuri articoli per blographik come guest poster o collaboratore fisso ;) .

    A presto.

  • ADVsha

    Ottimo post, utile per me ora che volevo sistemare il sito trasferendelo su wordpress… attendo i prossimi articoli.

  • http://www.blographik.it Mirko D’Isidoro

    @ADVsha:
    Visto che mi sembra che sia il tuo primo commento, il mio benvenuto su blographik è d’obbligo ;) .

    Continua a seguire questo blog e avrai sempre informazioni utili sul blog design e sulle risorse per blogger e web designer ;) .

  • http://www.guadagnareconunblog.com FabioG3

    Molto interessante. Proprio in questi giorni mi chiedevo se è meglio un layout a 2 o 3 colonne…

  • http://www.blographik.it Mirko D’Isidoro

    @Fabio: dipende sempre dal progetto. Penso che la cosa migliore sia stabilire gli obiettivi del blog, capire quante informazioni pubblicare, quanti autori sono presenti, che linea editoriale seguire. Da qui poi capire meglio se inserire o meno 2 o 3 colonne in base a quanto si vuole mostrare al lettore.

  • Pingback: Il Design dei Top BLOG! |

  • http://www.ctrlc-ctrlvdesign.it cammy

    un’analisi davvero accurata e dettagliata..complimenti!
    Anch’io sono una new-blogger.. ma non si smette mai di imparare!

  • http://www.blographik.it Mirko D’Isidoro

    @Cammy: benvenuta su blographik visto che è la prima volta che partecipi anche tu ai commenti ;) .

    Riguardo all’analisi la ritengo davvero utile per tutti coloro che stanno partendo o vogliono migliorare la qualità del prorpio progetto on line.

    Se vuoi altre nozioni utili e visto che sei all’inizio, ti consiglio di seguire la mia guida per principianti blogger che è partita proprio da poco, e verrà pubblicato un nuovo articolo correlato ogni martedi ;) .

    Ecco il link alla prima puntata della guida per creare un blog professionale per aspiranti o new-blogger come te.

    Se hai delle domande o vuoi maggiori approfondimenti, ti consiglio di usare i commenti di ogni articolo correlato della guida, cercherò di rispondere a tutti i tuoi dubbi ;) .

    A presto e buon blogging ;) ;