Responsive design, un nuovo modo di progettare

Il responsive design è un concetto già esistente da anni che ha però avuto il boom solo negli ultimi mesi, a causa del notevole aumento del traffico mobile. La tecnica responsive ha come obbiettivo quello di progettare e realizzare un unico layout che si adatti in modo reattivo alle dimensioni del dispositivo sul quale il sito verrà visualizzato.

In questo modo non dovranno essere create versioni desktop e mobile, ma una sola ed unica versione che si adatterà in maniera automatica alle varie situazioni.

Tra le diverse tecniche utilizzate le più significative sono le “Media Queries CSS”, che permettono di chiamare differenti stili a seconda delle dimensioni di visualizzazione del dispositivo. Per desktop, tablet e mobile verranno settati diversi stili css grazie alla modifica della proprietà “max-width”. In questo esempio il settaggio di 999px indica che stiamo progettando il layout per la visualizzazione su desktop.

@media screen and (max-width: 999px) {
.container {width: 740px;}
.logo{ width: 55%;}
.menu {width: 55%;}
.menu ul {width: 85%;}
}

Il responsive design è una tecnica completamente diversa rispetto a quella standard per la realizzazione di siti internet; necessita di una programmazione più lunga ed articolata, poiché bisogna progettare 2/3 diversi layout.

WordPress, il famoso CMS open source, ha rilasciato tempo fa un template gratuito realizzato con le regole del responsive design: Responsive Tweenty Ten (scaricabile da qui, demo).Template Tweenty Ten WordPress

Non solo piccoli siti/sviluppatori hanno iniziato ad utilizzare questa tecnica. L’esempio qui sotto rappresenta le diverse visualizzazioni del sito della Sony USA sui vari dispositivi. Vedere il funzionamento è facile: andate sul sito www.sony.com, allargando e restringendo la finestra possiamo notare i cambiamenti di stili tra un dispositivo e l’altro.

Responsive design sul sito di Sony USA

 

Bizonweb ha sviluppato già diversi siti internet con la tecnica del Responsive Design, tra questi ve ne presentiamo due:

Risto Bio Pollicino

Vineria Dolce Vite

Qui sotto gli screenshot di tutti e due i siti internet, sviluppati con la tecnica del responsive design. Il visitatore ha la possibilità, sia che acceda da pc, tablet o smartphone, di prenotare per pranzo o per cena scegliendo tra i molti piatti del giorno inseriti in autonomia dai gestori dei due locali.

Design mobile per prenotazione pranzo

Responsive design pollicino

Responsive design dolce vite