Nuovo layout per il blog di GiBiLogic
Quelli tra voi che ci leggono abitualmente avranno notato che abbiamo cambiato da qualche giorno il layout del nostro blog. Che ne pensate?
In questo articolo vi raccontiamo le motivazioni di questa scelta e i dettagli tecnici dell’esecuzione.
Più spazio!
Il nostro blog ha usato, per il suo primo anno di vita, il tema di default di WordPress, il famoso Kubrick, che ha una impostazione ideale. Ci siamo limitati ad aggiungere alcune personalizzazioni stilistiche quali:
- l’immagine usata nell’header
- lo schema di colori
- l’effetto “carattere ingrandito” sugli elementi <strong>
Visto il successo che abbiamo avuto, sicuramente a livello di qualità e leggibilità non c’era nulla da eccepire.
Da un po’ di tempo, tuttavia, sentivamo il bisogno di maggior spazio. La colonna destra, infatti, tra la inevitabile tag cloud, qualche articolo in evidenza e un paio di link significativi, era già più che piena. Era tempo di mettere una colonna in più, come ho visto fare su diversi altri blog. Potevamo permettercelo?
Più schermo!
Il layout precedente era contenuto in meno di 800 px. Le larghezze delle due colonne esistenti (quella degli articoli e la sidebar) erano già perfette, per cui aggiungere una colonna significava necessariamente allargare il layout fino a circa 1000px. Un’occhiata alle statistiche ci ha rivelato che i visitatori con una risoluzione compresa tra 800 e 1000 px, da quando è stato aperto il blog, sono circa l’1,7% del totale.
Considerando che, con ogni probabilità, tale numero è destinato a scendere ulteriormente, abbiamo deciso di procedere e sfruttare maggiormente lo schermo.
Più colonne!
Io e Sergio ci siamo messi a guardare un po’ il nostro blog, e a provare qualche modifica con un programma di grafica. La colonna in più, doveva ovviamente comparire a destra. E il logo sopra, ovviamente, espandersi fino a coprire tutte e tre le colonne. Davvero? Abbiamo invece provato a lasciarlo solo sopra le due sidebar, “alzando” la colonna degli articoli fino al vertice della pagina: e abbiamo scoperto che ci piaceva.
L’unico guaio è che avere il logo in alto a destra, anzichè in alto a sinistra, non è molto rispettoso delle abitudini degli utenti. Abbiamo quindi pensato di invertire simmetricamente il tutto, spostando le sidebar a sinistra e la colonna degli articoli a destra.
Ovviamente la sidebar più interna, essendo più vicina agli articoli, doveva contenere elementi più attinenti al testo: tag cloud, ricerca, e così via. L’altra, invece, poteva essere più “generica”, contenendo link al nostro sito, banner ad eventuali altri progetti, e in generale qualcosa che può avere meno relazione con gli articoli presenti.
Guardando gli articoli, invece, ci siamo resi conto che la separazione era poco evidente. Sembrava tutto una immensa distesa di testo. La prima idea è stata quella di una specie di cornicetta di separazione tra un post e l’altro… ma ci sembrava poco adeguata allo stile della pagina. Allora ci è venuto in mente di enfatizzare il titolo, applicando una piccola icona e aggiungendo una riga di separazione.
Pronti per il web designer
A questo punto la bozza era completa, e visto che siamo pieni di lavoro ci è sembrata una buona occasione per coinvolgere un nuovo collaboratore che abbiamo conosciuto recentemente, Pietro Montefusco. La realizzazione del codice HTML e CSS del template è opera sua, e diamogli quindi il dovuto credito per un lavoro fatto bene.
Più commenti!
Ovviamente, saremmo felici di sapere cosa ne pensate. Commenti tecnici, ma anche estetici. Siamo sempre felici di ricevere del feedback.