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