Come Migliorare il Layout del Blog – Allineamento Post e Sidebar

Questo articolo è stato inizialmente ispirato da Katrina che ha scritto un guest post per il blog A Beautiful Mess offrendo 10 consigli per migliorare il layout del blog {10 Blog Layout Tips} e che prometteva di trasformare un blog disordinato e ‘clutterato’ in un blog di piacevole lettura. Io ho preso i primi due tip  della lista e li ho elaborati aggiungendo le mie considerazioni personali, dando il via ad una serie di articoli per ‘Migliorare la Home Page’.

In effetti, l’esempio del 'Before' non è proprio carino da guardare, sembra una pagina ‘buttata li’ e farebbe rabbrividire qualsiasi web e blog designer che si rispetti. Se vi ricorda anche solo in parte il vostro blog, forse è arrivato il momento di tirarsi su le maniche e darsi da fare. Ci sono tanti piccoli accorgimenti che messi in pratica possono rendere in pochi minuti un blog più pulito, ordinato, piacevole da sfogliare, facile da leggere e veloce da caricare. Oggi vedremo il discorso allineamento, delle foto e dei testi, sia negli articoli che nelle colonne laterali. Partiamo?

ALLINEAMENTO

I singoli elementi che compongono il design di un blog dovrebbero rientrare in un confine naturale, una specie di bordo rettangolare immaginario, ‘trasparente’ ai nostri occhi ma che viene comunque registrato dal cervello. Quando un elemento fuoriesce da quel bordo, viene subito notato dal nostro cervello che lo rileva come un errore, una irregolarità, qualcosa ‘fuori posto’ che non dovrebbe esserci e diventa quindi una distrazione.

Noi blogger desideriamo attrarre i lettori con i nostri contenuti e non certo con i nostri errori. Ma come fare?

ALLINEAMENTO  NEI  POST

In un mondo perfetto, testi e le fotografie di un post dovrebbero essere larghi uguali. Ok, utopia per molte di noi... allora diciamo che le fotografie non dovrebbero essere grandi la metà dei testi. Fattibile? Direi di si.

Le nostre immagini non dovrebbero essere né troppo piccole, tipo che per vederle bene serve la lente d’ingrandimento o cliccarci sopra per vedere l’originale, ma nemmeno fuoriuscire dalla colonna dei post. Eccovi degli esempi pratici:

 

Non sembra anche a voi che l’ultimo esempio, dove foto e testi sono larghi uguali, sia più ordinato? 

Suggerimento: Scegliete una dimensione adeguata alla larghezza del vostro post e usate sempre la stessa in tutti i vostri articoli. Infondo caricare un’immagine su PicMonkey e cliccare il pulsante Resize non prende più di 10 secondi, quindi niente scuse!  Per saperne di più su come ridimensionare le foto, leggete Come ottimizzare le immagini per i post da Silvia – Tine.

p.s. Se volete ridimensionare automaticamente le vostre foto dei post si potete seguire questo tutorial su Xomisse.

ALLINEAMENTO  NELLE  SIDEBAR

La stessa regola vale per le vostre colonne laterali. Se dovete inserire delle fotografie, preferite sempre il gadget ‘Html/Javascript’ invece di quello ‘Immagine’ e lasciate il comando al vostro codice che ridurrà le foto automaticamente.

Vedete qui sotto come è stato facile riparare ad un pasticcio? Ora non ditemi che non preferireste avere la seconda versione sul vostro blog.

Guardate come ho trasformato la sezione della sidebar che Ernestina aveva dedicato alle sue collaborazioni utilizzando il gadget ‘Immagine’. Ho estrapolato il codice diretto delle immagini da lei caricate nella sidebar {basta fare click col tasto destro e selezionare Copy Image Location} e usato un unico gadget html invece di 15, inserendo al suo interno un codice che rimpicciolisce automaticamente tutte le foto alla stessa larghezza.

Usate il codice html qui sotto per ridurre la larghezza delle immagini a 180 pixel.

<div align="center"><a href="INDIRIZZO WEB DELLA PAGINA"><img alt="" src="INDIRIZZO WEB IMMAGINE" width="180" height="auto" /></a></div>
<div align="center"><a href="NDIRIZZO WEB DELLA PAGINA"><img alt="" src="NDIRIZZO WEB IMMAGINE" width="180" height="auto"/></a></div>

Per aumentare la larghezza delle immagini basta sostituire il valore width="180" con quello che vi serve mentre per inserire un ulteriore spazio bianco tra una foto e l'altra basta intervallare i codici con <br />, come qui sotto:

<div align="center"><a href="INDIRIZZO WEB DELLA PAGINA"><img alt="" src="INDIRIZZO WEB IMMAGINE" width="200" height="auto" /></a></div>
<br />
<div align="center"><a href="NDIRIZZO WEB DELLA PAGINA"><img alt="" src="NDIRIZZO WEB IMMAGINE" width="200" height="auto"/></a></div>

IL MITO DEL BLOG ROLL – ELENCO  BLOG AMICI 

Anche di questo abbiamo già discusso visto che tantissime blogger italiane li usano. Personalmente non amo vedere i blogroll in una colonna laterale perché mi distraggono dai contenuti nativi della pagina. E se il mio cervello funziona come il vostro {e spero di si...!} inconsciamente i vostri lettori saranno distratti da link non appartenenti al vostro blog, non nativi per l’appunto.

Tempo fa ho curato il design di una blogger che preferisco dimenticare che aveva addirittura due blog roll nella sua home page, uno per i blog italiani e uno per quelli stranieri. Ogni blogroll conteneva almeno una settantina di link {non sto scherzando!!} e ogni volta che visitavo il suo sito mi si impallava internet e si congelava la pagina; una volta ho addirittura cronometrato il tempo di caricamento della home page e ci ha messo quasi 5 minuti a caricarsi.

Normalmente abbandonerei l’idea di visitare quel blog ma siccome dovevo lavorarci sopra...

La mia domanda è stata “ma ti servono veramente tutti questi blog nella tua home page? Tutti e 150 link????”. Chiedetevelo anche voi. Se anche la vostra risposta è si, forse dovreste intraprendere una carriera nella pubblicità o come Content Manager perché più che blogger siete dei pubblicitari.

Insomma, a cosa vi servono tutti quei link esterni se non a ridurre la velocità di caricamento del vostro blog?

- Se usate il blog roll perché pensate che aiuti a portare del traffico verso i vostri blog preferiti, chiedetegli piuttosto di fare uno scambio di banner o di link; almeno la pubblicità è reciproca!

- Se usate il blog roll per aggiornarvi sui blog amici, esistono strumenti disegnati apposta, come BlogLoving, Google+ e l’Elenco di Lettura di Blogger.

-Se proprio non volete rinunciare al vostro amato blog roll, riducete almeno il numero dei blog che vengono visualizzati andando direttamente  sul gadget e modificando il numero dei link da ‘mostra tutti’ a 5 blog.

Per esempio,  il mio blogroll l’ho caricato su un altro blog, vedi  cecrisi-links.blogspot.it. Se non trovate il vostro blog, non preoccupatevi, ho abbandonato questo blog roll tempo fa e sostituito con BlogLovin.

DITE LA VOSTRA 

Prima di lasciarvi, vorrei sentire i vostri pensieri a questo proposito. Vi siete mai chieste quanto sia veloce il vostro blog a caricarsi? E vi è mai successo di stufarvi di aspettare che una pagina finisse di caricarsi e passare oltre?

Andate subito sul vostro blog. C’è qualcosa che col senno di poi ritenete inutile o fuori posto? E cosa aspettare a rimediare?

RISORSE UTILI E SUGGERIMENTI:

L'importanza delle immagini grandi su Tine the Lazy

I migliori strumenti per diminuire il tempo di caricamento su Idee per Computer e Internet

4 Errori che ogni Blogger Dovrebbe Evitare

Come Ottimizzare il blog da Impostazioni, Metatag e Post

8 Consigli dagli Esperti del SEO per Attirare Visite sul Blog

15 Consigli per Gestire il tuo Blog {Creativo ma anche no!}