Leggibilità e Organizzazione del Contenuto nei magazine online

Come rendere più leggibile un articolo online e come organizzare la Home Page e le pagine archivio

Il webdesign è evoluto tantissimo dalla sua nascita alla fine degli anni ’90: è evoluto insieme al web, ai suoi standard, alle nuove possibilità che offre e, soprattutto, insieme ad una nuova consapevolezza riguardo l’importanza della leggibilità online, con l’avvento del mobile e del concetto di responsive webdesign.

Ho iniziato la mia carriera di designer proprio con l’inizio della storia del webdesign, ormai venti anni fa. Ho assistito alla sua evoluzione contribuendo a far nascere la “scena” italiana dei webdesigner, fondando DollyDesign, la prima e più grande community italiana dedicata all’argomento, e organizzando o partecipando ad una serie di eventi italiani che ne hanno segnato la storia tra la fine degli anni novanta e i primi anni duemila (PixelDNA, Webbit, SMAU, Festa Internet, FutureShow, Etc)

Nel 2009 ho fondato Lega Nerd, un magazine online che ha segnato la mia carriera di designer e mi ha portato negli anni a cambiare focus, dedicandomi oggi unicamente alla sua gestione editoriale e creativa.

Su Lega Nerd ho potuto sperimentare alcune tecniche e concetti di webdesign negli anni, cercando di innovare soprattutto per quanto riguarda la leggibilità e l’organizzazione del contenuto.

Molte delle soluzioni adottate su Lega Nerd e da grandi magazine online anglosassoni sono poi arrivate anche sui siti italiani, ma c’è ancora molto da fare e questa mia analisi vuole sia verificare la situazione attuale che proporre soluzioni e strategie già condivise ed utilizzate online dai migliori siti internazionali.

Per semplificare l’analisi e renderla più chiara mi concentrerò su una verticalità dell’editoria online che ha da poco visto due dei suoi siti leader in Italia presentare un restyling del proprio sito: il settore dei videogames.

Nel variegato mercato italiano sono tre i siti internet che si contendono la maggior parte dei lettori interessati all’argomento: Multiplayer.it, Everyeye.it e Spaziogames.it. Di questi tre, ben due hanno presentato proprio oggi un redesign del proprio sito.

Full Disclosure: Lega Nerd e la società che la controlla fanno parte del gruppo editoriale NetAddiction.it di cui fa parte anche Multiplayer.it


Organizzare il contenuto: Home Page, Archivio, Articolo

Sono tre i principali “assi portanti” dell’organizzazione del contenuto in un magazine online: La home page, le pagine archivio e i singoli articoli.

Prima di analizzare come realizzare queste entità è fondamentale capire come i nostri lettori le utilizzeranno e quali saranno quindi le nostre priorità in fase di progettazione.

I moderni siti di contenuto ricevono gran parte del loro traffico organico e social direttamente sui singoli articoli. I lettori provengono dai motori di ricerca o dai principali social network e arrivano direttamente sull’articolo che li interessa.

Il singolo articolo, la sua leggibilità e la possibilità di inserire altri elementi che allunghino la permanenza sul sito del lettore sono quindi fondamentali.

A questo segue l’home page, seconda per importanza a livello di traffico e a suo modo fondamentale per l’organizzazione e, soprattutto, la valorizzazione del contenuto.

Le pagine archivio sono invece fondamentalmente raggruppamenti di articoli legati da un comune denominatore (tag, categorie, sezioni speciali, date, etc) che devono presentare efficacemente e facilmente una lista di articoli. Anche qui è necessario tenere conto dell’organizzazione e della valorizzazione del contenuto.

Se infatti la maggior parte dei lettori arriva sul singolo articolo dopo che ha già fatto una scelta personale di lettura (voglio leggere quell’articolo) su home page e archivi saremo noi ad influenzarne le scelte, valorizzando e organizzando il contenuto secondo le nostre esigenze editoriali o aziendali.

Il Grid System, la base su cui si poggia qualunque progetto web ben fatto.

Short Form Vs. Long Form Content

Editorialmente si potrebbe dividere i contenuti in decine di diverse categorie, che variano da verticalità a verticalità, ma una prima e fondamentale distinzione è più facile da fare e applicabile a praticamente qualunque magazine online: i contenuti si possono distinguere in Short Form e Long Form.

Gli Short Form sono fondamentalmente in questo mercato le tanto amate e odiate News: contenuti brevi, legati indissolubilmente all’attualità, con una frequenza di pubblicazione necessariamente molto alta e un traffico in arrivo altrettanto molto alto.

Se andiamo a vedere le principali fonti di traffico dei magazine moderni vedremo in praticamente tutti i casi che la maggior parte dei lettori arriva da social network e motori di ricerca: in questo la news legata all’attualità gioca un ruolo fondamentale per il traffico del magazine e ne costituisce lo zoccolo duro sul quale costruire tutto il progetto editoriale.

La loro alta frequenza di pubblicazione però ha un fastidioso effetto collaterale nelle pagine di archivio e nella home page: tendono a nascondere il contenuto di qualità, cioè i Long Form.

I Long Form sono articoli “lunghi”: recensioni, approfondimento, analisi, etc. Sono articoli di qualità che solitamente contribuiscono poco al traffico generale del sito, ma moltissimo alla sua immagine verso i lettori, aspetto questo a dir poco fondamentale per aumentare quella “loyalty” che qualunque capo redattore ha come principale obbiettivo.

C’è un altro concetto da tenere bene a mente quando si parla di contenuto: il tempo di interesse: se una news legata all’attualità avrà infatti un tempo di interesse limitato all’oggi o al massimo a questa settimana, un long form di approfondimento ha potenzialmente un tempo di interesse infinito: sarà cioè potenzialmente interessante per il lettore sia oggi che domani, o tra un mese, o tra un anno.

Ecco quindi che una distinzione visiva e organizzativa tra long e short form nelle liste di articoli, ovunque esse siano, è fondamentale.

Non solo: è fondamentale presentare in home page sezioni archivio interamente dedicate alle diverse categorie di long form presenti sul sito, per incentivarne la lettura e farli emergere dal mare di news pubblicate giornalmente sul magazine.

Queste sezioni archivio possono contenere due o tre articoli o decine di articoli, sono in pratica liste legate al tipo di contenuto (tutte le ultime recensioni) al valore del contenuto (gli articoli più letti di oggi) o alla sua importanza editoriale (gli articoli che la redazione vuole “spingere”, a prescindere dal loro tipo o valore)

Su Lega Nerd sono andato un pochino oltre, presentando una vera e propria copertina che vuole ricordare quelle delle riviste cartacee e promuove un singolo articolo ai lettori in home page, con una posizione dominante sul resto del contenuto.


Home Page

Andiamo a vedere come sono organizzati quindi i contenuti in home page su Lega Nerd e sui tre siti di videogiochi menzionati ad inizio articolo.

La home page è idealmente divisa in tre diverse aree che si sviluppano verticalmente: La Cover Area, La Timeline Area e la Discovery Area.

La Cover Area presenta i contenuti più interessanti ed editorialmente importanti del sito. Possono essere long form che si vuole spingere perché di grande valore o di grande attualità, oppure contenuti sponsorizzati che si spine per un mero motivo amministrativo (e che se ben fatti e di tipo native, come su Lega Nerd, hanno anche un forte valore editoriale)

Su Lega Nerd esistono due diversi livelli di importanza, il primo sono i Cover Article, che occupano interamente la cover solitamente per uno o due giorni e poi, quando rimpiazzati, continuano ad essere presenti nell’area dedicata ai Past Cover Article.

I secondi sono i Focus Article, 12 articoli che scorrono su un carousel responsive subito sotto alla cover principale.

Segue la Timeline Area, croce e delizia di ogni designer e argomento di accese discussioni per i lettori dopo ogni restyle: è l’area che ospita tutti gli ultimi articoli pubblicati sul sito, in ordine cronologico.

Importante qui distinguere tra long form e short form visivamente: su Lega Nerd lo facciamo proponendo un layout Masonry in cui le diverse tile (i singoli articoli) hanno dimensioni differenti e quindi una importanza visiva differente per short e long form.

Nella Timeline si possono usare un sacco di tecniche accessorie come i Pin Post ad esempio, articoli che rimangono in prima posizione a prescindere dalla data di pubblicazione. Nello screenshot sopra l’articolo sul Giorno del Fumetto, un evento organizzato da Lega Nerd, è pinnato ad esempio. Che i post “pinned” debbano avere o meno una veste grafica o un identificativo grafico che li segnali come tali è una discussione aperta, sinceramente cambia ben poco alla maggior parte dei lettori, che siano casual o hardcore.

A seguire arriva tutta la Discovery Area, in pratica una sezione della home page in cui trovano posto diverse sotto sezioni dedicate alla proposta di articoli appartenenti alle diverse categorie tematiche del sito (Category Hub) a singole rubriche o a tipologie particolari di contenuto (come le recensioni ad esempio)


L’organizzazione verticale del contenuto: Responsive First

Organizzare come abbiamo visto le aree principali della home page verticalmente offre vantaggi e svantaggi. Si obbliga l’utente a scrollare di più, ma si può adeguare questa organizzazione alle esigenze del responsive webdesign, adattando orizzontalmente il contenuto alla larghezza della viewport.

In questa maniera l’utente avrà i contenuti principali organizzati nello stesso modo sia su desktop che su tablet che su smartphone, agevolando soprattutto le sezioni Timeline e Discovery che solitamente assumono invece forme e specifiche molto diverse per riuscire ad essere responsive… o addirittura spariscono proprio.

Considerando che il traffico mobile (smartphone + tablet) ha già superato da qualche tempo quello desktop, si capirà che una tale ottimizzazione è oggi fondamentale.

La scelta su Lega Nerd di una struttura Masonry per la Timeline non è casuale: offre si una leggibilità cronologica inferiore alla classica lista di articoli verticale, ma presenta una adattabilità responsive perfetta e perde il suddetto difetto nei device più utilizzati, gli smartphone (in cui viene presentata una semplice lista di tile in colonna da 1)

Ricordate sempre che attualmente un po’ per tutti i siti di contenuto come quelli che stiamo analizzando il traffico mobile si attesa sul 55/60% del totale (di cui la stragrande maggioranza sono smartphone).


Vediamo come i tre maggiori siti di videogiochi in Italia hanno affrontato il design della propria home page.


Multiplayer.it

È presente una Cover Area mediamente importante, con una serie di articoli in grande evidenza organizzati in Masonry. Questo da al sito diverse possibilità di impaginazione per questa importante area, in cui sarà possibile liberamente piazzare un singolo grandissimo pezzo o più articoli come vediamo nello screenshot sopra… e tutte le possibili vie di mezzo (1 pezzo a sinistra, quattro a destra, etc)

È una buona soluzione, genericamente adottata dalla grande maggioranza dei magazine online attualmente che ha l’unico difetto nel non essere particolarmente originale o caratterizzante per il sito.

A seguire come vediamo le aree si mischiano orizzontalmente e non sono organizzate strettamente verticalmente: la Timeline Area è affiancata alla Discovery che ha una colonna dedicata sulla destra.

La Timeline a sua volta vede una distinzione del contenuto: short form e long form sono infatti organizzati cronologicamente in due liste distinte.

Questa organizzazione presenta vantaggi innegabili su desktop, ma diventa un grosso problema su mobile, proprio per i motivi prima esposti: non è facilmente adattabile con il responsive design.

Se solitamente si opta per posizionare le diverse colonne (short form, long form, discovery in questo caso specifico, da sinistra a destra) una sotto l’altra al calare dello spazio orizzontale, nel caso di Multiplayer si è optato per nascondere completamente le aree, scelta che implica la scomparsa dalla home dei long form e dell’area discovery per gli utenti che usano smartphone o tablet.

Update: da Multilplayer.it mi fanno notare che in realtà su mobile i long e short si mescolano tra loro in un’unica timeline, non l’avevo notato. Una soluzione intelligente che risolve in parte il problema.

È stata poi inserita una area discovery verticale interamente dedicata ai contenuti video, questa rimane anche su smartphone, anche se presenta unicamente un singolo contenuto e “perde” la lista sottostante presente su desktop.

La timeline poi prosegue con un infinite scroller, una pratica che agevola il caricamento di nuovi contenuti, ma toglie ogni importanza al footer come area di contenuto.

Il webdesign è fatto di compromessi, questo si sa, non esiste la soluzione “migliore in assoluto” e Multiplayer.it ha un buon design generale che però, per quanto riguarda l’home page, penalizza troppo i contenuti mostrati su mobile.

Questa scelta è in realtà giustificabile da due motivi principali. Da una parte offrire un sito più leggero (togliendo contenuti) a chi naviga da smartphone, pratica sicuramente sensata a prescindere da tutti gli altri argomenti in gioco. Dall’altra constatare che il traffico mobile è in gran parte diretto ai singoli articoli in quanto proveniente da social e motori di ricerca, ponendo quindi la home page in secondo piano e privilegiando una organizzazione più chiara per chi naviga da desktop, presumibilmente molto più numeroso tra i naviganti che scelgono la home del sito.


Everyeye.it

Everyeye.it presenta una struttura abbastanza classica come gli altri siti, ma ben organizzata: c’è una grandissima, forse anche troppo, Cover Area che presenta anche contenuti di diverso tipo (vediamo i video in evidenza ad esempio, scelta editoriale interessante) ma offre una griglia fissa difficilmente modificabile per esigenze editoriali particolari (come il voler spingere un singolo grande articolo)

Segue la Timeline Area organizzata anche verticalmente come visto su Multiplayer.it, ma questa volta vediamo tutti gli articoli a sinistra, senza distinzione alcuna tra short e long form, e una piccola Discovery su una sidebar destra, che però, al contrario di quanto visto prima, rimane presente anche su smartphone, piazzandosi come da manuale sotto alla colonna principale.

La scelta di creare una timeline verticale classica, da blog di inizio anni duemila, premia senz’altro per chiarezza, però è davvero un peccato non si sia data una impostazione grafica diversa ai long form, annegandoli così tra le tante news.

Segue una grandissima Discovery Area ben organizzata e orizzontale che ha l’unico difetto di lasciare troppo in secondo piano le sottocategorie di contenuto (link ad archivi) che invece potrebbero, e dovrebbero, avere una visibilità migliore:

Segue una seconda Timeline Area con Infinite Scrolling, esattamente come su Multiplayer.it, che offre gli stessi vantaggi e svantaggi già visti.


Spaziogames.it

Il nuovo sito di SpazioGames presenta delle scelte particolari nell’organizzazione del contenuto: c’è una enorme cover area superiore che ospita tutti gli ultimi Long Form, seguita da una Timeline Area inferiore con le news. Fine.

Non ci sono Discovery Area di nessun tipo e il blocco delle news è affiancato unicamente da una sidebar che ospita solo banner e una like box di Facebook, per poi diventare mestamente vuota man mano che si scrolla.

Ho il forte dubbio che questa home page sia ancora un work in progress, è stata letteralmente presentata oggi, quindi evito di commentare queste scelte, forse dettate più dalla fretta di rilasciare il nuovo design che da un vero studio dell’organizzazione del contenuto.

Di buono c’è che tanta semplicità agevola non poco il responsive design che infatti lascia adattare perfettamente su mobile il blocco Masonry superiore e la timeline inferiore.

La scelta di lasciare in trasparenza il dressing pubblicitario anche sotto alle tile della Cover Area e del resto del sito è abbastanza inspiegabile però: rende tutto inutilmente più caotico e non offre nessun vantaggio evidente ne alla parte editoriale ne a quella pubblicitaria.

Nota: non ho volutamente parlato minimamente del posizionamento e integrazione degli spazi banner in questi progetti editoriali. L’argomento è molto vasto e meriterebbe un articolo apposito. Ho solo fatto questo inciso a SpazioGames perché la scelta sopra è davvero inspiegabile.


La presentazione del contenuto: l’Articolo

Visto come è organizzato il contenuto in home page, vediamo come è invece esposto nei singoli articoli. Queste pagine sono le più visitate e più importanti di tutto il sito, rappresentano in gran parte la prima pagina vista dai vostri nuovi lettori e, spesso, anche l’ultima.

Quando si progetta questo tipo di pagina c’è una guerra senza esclusioni di colpi tra le diverse aree posizionabili: se infatti l’area destinata al contenuto (Content Area) è la predominante per ovvi motivi, tornano altre aree che abbiamo già visto, come la Discovery Area, la Timeline Area e, ultime ma non ultime, la Banner Area.

L’errore più comune e più grosso che possiate fare è preoccuparvi così tanto di queste aree accessorie (ripeto, accessorie!) da scordarvi completamente della più importante, la Content Area.

I vostri lettori arriveranno sulla pagina per un motivo e solo per un motivo: leggere il contenuto che hanno scelto. Fossero prima sulla home page, su un social network o su un motore di ricerca poco cambia: hanno cliccato su un link e hanno atteso che si caricasse la pagine e ora vogliono leggere quello che i vostri redattori hanno scritto. Ovvietà? per niente purtroppo.

Quale sarà quindi il primo obbiettivo nell’organizzare e disegnare la Content Area? uno e uno soltanto: la leggibilità del contenuto.

Il problema con il quale si scontrano tutti i designer è però uno: più si lavora sulla leggibilità e chiarezza del contenuto, più si porta via spazio alle altre aree che, seppur meno importanti, devono comunque esistere anche in questa pagina così importante.

Una delle soluzioni più comuni tra i siti di alta fascia e adottata anche su Lega Nerd da anni è quella dei diversi template in base al tipo di contenuto. In soldoni, un long form avrà un tipo di impaginazione, uno short form un’altra.

Un long form deve privilegiare la leggibilità, non ci sono vie di mezzo. Uno short form può invece offrire più spazio ad aree accessorie, soprattutto considerando che sono gli articoli con più accessi e che quindi più sono importanti per aree come la Discovery o la Banner.

Vediamo in pratica come si presentano gli articoli su Lega Nerd, ecco un long form:

I longform su Lega Nerd non hanno vie di mezzo: la Content Area prende tutto lo spazio disponibile, side to side, con solo una sidebar sticky destinata a qualche tool e allo sharing (che se ne va al calare della risoluzione orizzontale, lasciando già per i portatili tutto lo spazio al contenuto)

Niente compromessi. Sotto a questa enorme Content Area vediamo poi una Discovery Area (Articoli simili), uno spazio destinato ai commenti e il ritorno in footer della Cover Area, che ripresenta i focus article anche qui.

Vediamo invece come è presentato lo short form, le news:

Vediamo come tornano la sidebar tool e la grande Content Area, ma questa volta arriva una sidebar destra con una Banner Area e una Discovery Area.

Il resto della pagina è simile, con commenti, una seconda Discovery (articoli simili) e la Cover Area in footer.

L’impaginazione degli articoli, la loro larghezza minima e i diversi stili utilizzabili all’interno di essi non cambiano da Long a Shortform: quello che cambia è lo spazio orizzontale che per gli short è ridotto da una inevitabile sidebar Discovery mentre per i long è totalmente destinato al contenuto stesso.

Presentazione del contenuto

Agli albori del web e dei blog era già un grande risultato semplicemente riuscire a stampare il contenuto corretto dentro ad un articolo. I mattoni erano ben pochi: il titolo, il corpo. Fine.

Col tempo si è cominciato a strutturare il contenuto, i database sono diventati più complessi e le informazioni salvabili più numerose. È arrivato il sottotitolo, l’immagine di riferimento, i tag, le categorie, e così via.

Si è pensato che bastasse, anzi che forse fosse anche troppo. E ci si è scordati completamente della parte più importante del contenuto: il corpo dell’articolo.

Nella stragrande maggioranza dei blog il corpo dell’articolo non è impaginato in alcun modo se non per qualche “a capo” piazzato a caso e qualche grassetto e corsivo. Inaccettabile.

Questo è dovuto a come funzionavano gran parte degli editor di contenuto fino a qualche anno fa: permettevano appunto di modificare giusto il grassetto e il corsivo del testo, lasciando il tutto come un enorme blocco di contenuto da riversare poi sul sito vero e proprio.

Chi scriveva il contenuto non aveva idea di come sarebbe stato rappresentato sul sito, se non guardando ogni tanto (mai?) una preview più o meno attendibile.

È con l’arrivo degli editor visuali che è cambiato tutto e se il vostro sito ancora non è cambiato in questo senso, beh, state sbagliando tutto e perdendo una occasione irripetibile, per il vostro magazine e per i vostri redattori.

Ma facciamo un passo indietro e vediamo perché è così importante avere un editor visuale nel proprio editor interno di articoli.

Se avete guardato con attenzione gli articoli pubblicati su Lega Nerd avrete notato che il corpo non è un semplice blocco di testo, ma è impaginato con stili dedicati.



Ci sono spazi verticali tra i paragrafi che migliorano la lettura su internet (dove si scorre, ricordatelo, non si sfoglia!)

Ci sono stili dedicati ai titoli principali e ai sottotitoli, per poter così organizzare il pezzo.

Ci sono stili dedicati all’introduzione, ai quote, alle frasi in evidenza, alle note, alle interviste, ai blocchi di codice, etc.

Uno spazio verticale dopo i paragrafi, blocchi di testo in evidenza, una introduzione ben impaginata, le immagini con le didascalie… sono tutte tecniche in gran parte evolute dalla carta stampata e assolutamente valide anche per il web.

Non giriamoci attorno: queste tecniche migliorano enormemente la leggibilità di un articolo e lo rendono più professionale, più piacevole da guardare e da leggere, migliore.

Il problema in ogni redazione del mondo è solo uno: chi impagina gli articoli? Nessuno. Arrivano questi blocchi di testo scritti dentro ad editor antidiluviani oppure con un editor esterno e poi copio-incollati al volo prima di cliccare il tasto pubblica.

Il lavoro di impaginazione dell’articolo è svolto da nessuno, ci si affida ai soliti metodi automatici che servono poco a nulla in un longform da 10.000 parole.

In Lega Nerd abbiamo sia una redazione interna che una esterna, in crowdsourcing, con autori di tutti i tipi che ci inviano articoli di interesse generale.

Gli articoli in crowdsourcing sono corretti ed impaginati da content editor interni. Gli articoli della redazione sono in gran parte impaginati dai redattori stessi. Come è possibile? Grazie ad un editor visuale.

Un editor che ti permette di scrivere il tuo articolo e al tempo stesso di inserire tutti quegli stili e accorgimenti utili per renderlo più leggibile, in tempo reale e visivamente, senza bisogno di una preview esterna.

Esattamente come qui su Medium un redattore vede come sarà presentato il suo pezzo mentre lo sta scrivendo e questo offre innumerevoli vantaggi:

Il redattore comincia a scrivere tenendo conto di alcune regole di buona leggibilità su internet, come i paragrafi non troppo lunghi.

Il redattore riesce ad impaginare autonomamente il proprio articolo, rispettando quelle poche regole e stili base insegnati in un pomeriggio di addestramento.

In alcuni casi è necessario un veloce passaggio di un content editor interno, ma moltissimi dei nostri articoli arrivano sul sito come li vedete, con tutti quegli stili e quella impaginazione corretta, direttamente dal redattore.

Il risultato? Articoli immensamente più leggibili e meglio presentati rispetto alla concorrenza. Un sito che rimane in testa per queste qualità oltre che per la qualità del contenuto. Hai letto facilmente un bell’articolo: tornerai a trovarci.

Guardiamo ora i tre maggiori siti di videogiochi in Italia come presentano i loro articoli, prendiamo uno stesso contenuto ad esempio, una recensione.

Su Everyeye un contenuto importante come una recensione ha uno stile dedicato, come su Lega Nerd, con il contenuto che occupa tutto lo spazio orizzontale.

La pagina è però inizialmente dominata da una Banner Area davvero enorme e poi dal contenuto video legato al pezzo, scelta questa più che condivisibile.

Inizia poi la recensione vera e propria, che evidentemente non legge più nessuno dopo aver visto il video. Il tutto è presentato come un unico gigantesco blocco di testo senza nessuna spaziatura verticale tra i paragrafi e con la sola aggiunta del grassetto per evidenziare alcune parti di testo, ma non nella maniera corretta.

Il grassetto va utilizzato infatti per evidenziare parole chiave del paragrafo che si sta leggendo, in modo tale da individuare a colpo d’occhio il paragrafo a cui si è interessati.

Per fare un esempio specifico se io evidenzio in grassetto la parola giocabilità in questo paragrafo ecco che sarà semplice per voi capire che questo, in particolare, è il paragrafo in cui parlo della giocabilità del gioco in questione.

Su internet si tende invece a mettere il grassetto a caso, oppure nel migliore dei casi, a grassettare senza ritegno il nome del topic generale (in questo caso il nome del gioco) pensando di migliorare così la SEO del pezzo.

Mettetevi l’anima in pace, grassettate il titolo del gioco un paio di volte all’inizio e poi cominciate ad usare il grassetto come va usato.

Torno agli spazi verticali, perché sono semplicemente fondamentali per la leggibilità su internet. È necessario spaziare i paragrafi verticalmente e possibilmente scrivere paragrafi brevi, di massimo 5 o 6 righe.

Avrete notato che sto utilizzando questa tecnica in questo stesso articolo. Quegli spazi che aggiunge Medium tra un paragrafo e l’altro non sono certo casuali: servono a non far perdere il vostro occhio mentre scorre la pagina. Mentre scrollate. Si, perché lo ripeto, su internet si scrolla, non si sfoglia.

Blocchi di testo come quello qui sopra risultano molto poco leggibili, soprattutto quando continuano per più di una viewport come spesso succede.

A favore di Everyeye devo dire che nelle ultime recensioni hanno iniziato ad inserire box informativi, che spezzano un minimo la lettura, ma rimangono tutti i problemi sul corpo principale purtroppo.

Mancano poi completamente stili accessori, vedo solo un timido titolo utilizzato per spezzare le diverse parti dell’articolo, certo, meglio di niente.

I competitor in realtà non fanno certo di meglio, ecco il corpo della stessa recensione di Multiplayer.it:



Tornano i titoli per spezzare l’articolo, ma rimangono i paragrafi infiniti e senza spaziature se non quando inserite a forza come nel caso sopra. Arrivano anche timidamente immagini allineate a bordo paragrafo, che aiutano sicuramente la lettura e l’individuazione della riga durante lo scroll.

Ancora pochissimo insomma.

Vediamo anche Spaziogames.it come presenta le sue recensioni:

Tornano i banner giganteschi in apertura, comprensibili per un sito ad altro traffico. Meno comprensibile è il titolo dell’articolo e il suo sottotitolo, troppo piccoli e annegati tra i diversi banner.

Lo avevate visto voi il titolo e il suo sottotitolo nello screenshot sopra? Probabilmente no:

Arriva poi il corpo che offre gli stesso errori già visti e rivisti. Blocchi di testo infiniti senza nessuna spaziatura tra i paragrafi e nessun stile dedicato.

Neanche un titolo a spezzare in questo caso purtroppo: i titoletti che vedete lungo l’articolo sono infatti stati fatti a mano, boldando la scritta e dando un <br>, e non hanno quindi i necessari tag HTML per essere riconosciuti come titoli.

I primi tre siti italiani dedicati ai videogame non utilizzano quindi un editor visuale (o non lo sfruttano minimamente, non saprei) e presentano i loro articoli sotto enormi blocchi di testo con nessuno o pochissimi stili dedicati alla leggibilità.


Concludiamo che è tardi

Abbiamo visto insieme quanta strada devono ancora fare i siti italiani per offrire una buona leggibilità ai loro articoli. Più attenzione a questo aspetto è fondamentale secondo me, così come all’organizzazione dei contenuti, aspetto questo che è meglio trattato dai siti che abbiamo visto oggi.

Ci sono mille altre “questioni” da affrontare quando si progetta un sito del genere ovviamente, non ho parlato di spazi banner e della loro integrazione con il contenuto, di lanci speciali, di aree speciali e archivi, e poi dei tool e informazioni a corredo che è possibile inserire in un articolo.

Spero che comunque i temi dell’organizzazione degli spazi e dell’impaginazione del contenuto vi siano interessati e magari scriverò altri articoli dedicati agli altri argomenti in futuro.