Ho rubato qualche giorno di vacanza alle ferie estive per ripensare il layout del blog. L’opera non è ancora completa (direi che è ancora in beta – se non fosse un termine ormai abusato), ma le novità – a partire dalla veste grafica – non mancano.
La prima novità di cui è necessario parlare riguarda la presentazione dell’elenco dei post più recenti nella pagina principale: invece che presentare i post per intero, costringendo chi non fosse interessato agli argomenti trattati nei primi post a lunghe “scrollate” per raggiungere quelli successivi (nel caso venisse mai concessa una prova d’appello nel frenetico mondo del web 2.0), ho preferito lasciare solo le prime righe di ciascun post in modo da facilitare la selezione dei contenuti di maggior interesse fra quelli pubblicati. Per proseguire nella lettura di un post dalla pagina principale ora è necessario fare click sul titolo del post o sulla voce [continua] al termine della sua presentazione.
Altra novità è l’allargamento dello spazio pagina e la sua suddivisione in tre colonne. La dimensione è ottimale a partire da una risoluzione di 1024×768; per i lettori che utilizzano una risoluzione di 800×600 (circa il 4% dei lettori secondo Google Analytics) le prime due colonne sono comunque interamente visibili senza la necessità di scroll laterali.
Per aiutare i lettori nell’individuazione dei contenuti di maggior interesse ho inserito nella barra laterale di sinistra i titoli dei quattro post più recenti per ciascuno dei temi principali del blog: Business Intelligence, Marketing, Web 2.0 e TV 2.0. Ho poi intenzione di introdurre anche una sezione Software (attualmente in fase di sviluppo). Nella barra destra ho inserito invece i richiami ai contributi provenienti dall’esterno come le faccine degli utenti/lettori di MyBlogLog, le News (sperimentalmente affidate al canale Business Intelligence di Wikio) e i commenti degli utenti (speriamo sempre più numerosi).
Dal punto di vista tecnico/tecnologico sono passato a WordPress 2.2.2, il che ha comportato la sostituzione della maggior parte dei plugin utilizzati. Il tema wordpress è stato interamente riscritto partendo da quello di default mentre il CSS è stato fatto da zero. Proprio il CSS mi ha dato diversi problemi. Il layout originale prevede le due barre laterali e il “piè di pagina” dello stesso color senape del banner. Attualmente il layout grafico è stato testato con diversi browser su Windows (se qualche Mac User potesse farmi avere un feedback su come si vede con Safari …): Firefox 1.5, Firefox 2, Opera 9, Internet Explorer 7 e Internet Explorer 6. Fra tutti solo IE6 ha presentato un anomalo comportamento nel dimensionamento degli oggetti che mi ha costretto a rinunciare alla colorazione delle barre laterali (ma solo per gli utenti IE6 – circa il 35% dei lettori – chi usa un browser più moderno beneficia del CSS avanzato!).
Per consentire a tutti di confrontare i due layout segue uno screenshot del blog nel formato differente a quello attualmente visualizzato dal vostro browser (non ho idea di cosa venga visualizzato per chi sta leggendo il post tramite un news reader o da una email!).
La magia è resa possibile sfruttando proprio lo scarso supporto di IE6 per il CSS avanzato: le impostazioni dei colori (o la scelta dell’immagine come nell’esempio precedente) viene effettuata con una direttiva CSS non supportata da IE6 (child selector – direttiva introdotta con le specifiche del CSS level 2 nel 1998). IE6 ignora tale direttiva mentre gli altri browser la interpretano correttamente integrando tali specifiche con il resto dello stile. Segue il codice utilizzato per la visualizzazione dell’immagine precedente.
/* Impostazioni generali */
<style>
div#img
{
background-image:url(/images/posts/48/nuovo-css2-500.png);
width: 500px; height: 305px;
}
/* Impostazioni specifiche non supportate da IE6 */
div#wrapper>div#img
{
background-image:url(/images/posts/48/nuovo-ie6-500.png);
}
</style>
<div id=”wrapper”>
<div id=”img”></div>
</div>
Per dovere di cronaca devo ammettere che inizialmente il layout doveva essere tutto bianco (più o meno come appare con IE6), poi a mano a mano che procedevo con lo sviluppo (su Firefox 2 e IE7) ho provato a colorare le due barre laterali e la soluzione, forse meno elegante, mi ha convinto in quanto differenzia maggiormente i diversi spazi facilitando (almeno spero) la lettura del blog.
Buon proseguimento…