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.
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:
Altri Tool utilissimi (indispensabili):
03. Un pò di libri!
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!
