Non che serva a qualcosa, ma è un buon esercizio

Nell’header ho scritto “italian web designer” ma poi raramente scrivo qui di web & design. Il perchè è presto detto: fare un post tecnico richiede tempo, tanta voglia e la probabilità di risultare banali è piuttosto elevata; per cui il più delle volte tendo a rinunciare e piuttosto preferisco condividere i link che leggo e che mi interessano. (A proposito, dopo le recenti modifiche a google reader li trovate tutti a questo indirizzo)

Stavolta è diverso perchè ho apportato qualche modifica al blog e penso che potrebbe interessare quello che ho fatto e come l’ho fatto. Ho utilizzato delle funzionalità dello standard CSS3 chiamate media queries per modificare l’aspetto del blog in base alla risoluzione. Per semplicità ho deciso che tutti i device con una risoluzione minore di 1024px avrebbero visto la seconda versione, più amichevole per ipad, smartphone etc etc.

Fare lo stesso è molto semplice, nel vostro css aggiungete:

@media screen and (max-width: 1024px) {
/** qui vanno messi i
selettori di cui volete 
cambiare attributi e proprietà */
}

Potete sbirciare il css di questo blog per saperne di più.
NB: L’ho fatto in pochi minuti e non è esente da imperfezioni, scorciatoie e scelte stilistiche discutibili, ma l’effetto che fa su uno smartphone non è niente male. Potete vedere il risultato anche semplicemente ridimensionando la finestra del vostro browser preferito.

Questa attenzione ai diversi device con cui viene visualizzato un sito è detta Responsive Web Design. Se ancora non avete familiarità con questo tipo di tecnica, un buon modo per saperne di più è fare un giro su smashing magazine:

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/