Questo articolo è stato aggiornato qui: Responsive Web Design

Questo sito è costruito in modo che possa essere letto agevolmente sia sugli schermi belli grossi che stanno sulle nostre scrivanie, sia sugli schermini piccoli dei dispositivi che stanno nelle nostre tasche.

danielepizzoni.it nel 2012

Tradizionalmente le versioni mobile dei siti Internet sono costruite in parallelo a quelle dei siti normali. Ad esempio il giornale La Repubblica si trova all’indirizzo www.repubblica.it. Se però accedete al sito con un telefonino c’e un meccanismo che vi manda automaticamente ad un altro sito, quello per i dispositivi tascabili, m.repubblica.it, dove “m” sta appunto per “mobile”. Il problema di questo approccio è che duplicando il sito i costi di manutenzione, gli errori ed i problemi in genere… raddoppiano.

Un metodo più raffinato è quello di mantenere identici contenuti ma di cambiare il modo in cui vengono mostrati sullo schermo. Ad esempio i blog basati sul programma Wordpress mostrano di default una “facciata” diversa per i telefonini.

La tecnologia più recente, quella che ho usato per questo blog, fa piuttosto in modo che la pagina si trasformi automaticamente, adattandosi alle dimensioni in cui viene visualizzata. Per capire cosa intendo basta che provi adesso a restringere o allargare la finestra del browser (o a girare il telefonino).

Cosa succede? Semplicemente il disegno del sito si trasforma in risposta alle mutate dimensioni. Le colonne si restringono e se non ne stanno più due, quella di destra viene spostata in fondo. Le intestazioni e i loghi si rimpiccioliscono, alcuni particolari vengono spostati o nascosti e i font cambiano leggermente di dimensione.

È quello che in inglese viene chiamato Responsive Design. Pare che l’idea sia nata, o meglio, sia stata per la prima volta esposta compiutamente, nel Maggio 2010 sull’articolo Responsive Web Design (link tradotto in italiano). All’inizio del 2011 la rivista Smashing Magazine con questo suo articolo ha sancito l’ingresso del Responsive Web Design nel mainstream del Web Design.

In realtà l’idea non è che sia poi così originale o rivoluzionaria; il fatto che si stia diffondendo così tardivamente è dovuto alla incapacità di usare le nuove tecnologie (HTML5 e CSS3) da parte di alcuni browser, in particolare quelli meno recenti di casa Microsoft che, come si sa, sono ancora molto diffusi.

Se sviluppi applicazioni per iPhone, è importante che il tuo sito funzioni bene sull’iPhone. Allora mi sono dato da fare ed ho costruito questo blog usando questi ingredienti:

Alla fine del Responsive Twenty Ten non è rimasto nulla, ho finito per riscriverlo usando gli ottimi HTML5 BoilerplateLess Framework.

(puoi contattarmi per una consulenza qui)