Guida Responsive Design: risorse e tool utili


responsive-design


Oggi trattiamo un argomento abbastanza scottante: il responsive design. Scopriamo che cos’è in una breve panoramica ed alcuni tool e risorse molto utili.

Diciamo fin da subito che il responsive design è una materia nata dall’esigenza di coniugare un sito per diversi (e differenti) dispositivi, in modo da progettare un solo layout “responsabile” per tutti i device, automaticamente e senza troppi sforzi.

01. Come si faceva (o si fa anche oggi)

Prima del responsive design un’idea per adattare il proprio sito per gli smartphone era quella di adottare un codice php che “smistava” a seconda del device a una sotto-directory precisa: ad esempio /mobile per la versione mobile. Questo oltre ad essere notevolmente laborioso e complesso, era anche parecchio scomodo (si dovevano creare come minimo 3 versione: mobile,tablet,desktop!). Questo metodo è usato anche oggi, anche se è una pratica parecchio in disuso. Ecco un esempio di code:

<?php
require_once('mobile_device_detect.php');
mobile_device_detect('http://tuosito.it/mobile','http://tuosito.it/mobile','http://tuosito.it/mobile','http://tuosito.it/mobile','http://tuosito.it/mobile','http://tuosito.it/mobile','http://tuosito.it/mobile','http://tuosito.it/mobile',false);
?>

Per usare questo code personalmente mi sono sempre trovato bene usando questo engine: SCARICA

02. Framework Responsive e funzionamento

Un framework responsive è semplicemente una griglia (di solito 960px) adattata che a seconda della risoluzione del device si auto-adatta grazie all’uso di determinati offset e di un vasto uso di media queries (CSS3) impostabili. Il migliore dal mio punto di vista è sicuramente Skeleton, molto potente malleabile e sopratutto gerarchico.

skelton

Per usare il framework vi basterà impostare una classe in ogni div (ad ogni classe corrisponde una larghezza di griglia prestabilita via CSS). Grazie invece all’ID potrete facilmente specificare posizione (float:left/right), e altezza, nonchè tutti i vari stili a cui siete abituati. Per vedere il framework in azione andate sul sito ufficiale e agite sulla finestra del browser ridimensionandola.

Ecco un esempio:

<div id="left" class="five colums">CONTENUTO</div>
"Five" da un width automatico responsive di 280px (ved grid sul sito uff).

02. Tool e risorse Utili

Per testare le vostre pagine responsive:

TEST ONLINE1

TEST ONLINE2

Altri Tool utilissimi (indispensabili):

IMMAGINI RESPONSIVE

SLIDER (FLEXSLIDER)

MENU AUTO-DROPDOWN

MENU RESPONSIVE

TEXT FIT

03. Un pò di libri!

libro-responsive

Per la sezione libri vi consiglio questo molto interessante e curato… unico difetto (per alcuni): è in inglese!

04.  Conclusioni

Sicuramente il responsive design è la tecnica del futuro sopratutto a causa dello sviluppo esponenziale dei vari device connessi a internet. Insomma tenetevi aggiornati su questa tecnica (innovativa) e molto potente qui su Targetweb.it!

Riccardo Mel

Sono un Web Designer/Developer italiano che vuole condividere le sue personali esperienze sul Web Design e sullo sviluppo WEB. Se vuoi collaborare al mio progetto inviami il tuo articolo o seguimi sui social network ! Se hai bisogno di un sito web funzionale e curato: | Contattami | +


Lascia un Commento

I campi con *sono obbligatori.


È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>