Corsi on-line

Responsive Design con syze e JavaScript

syze è il nome di una libreria realizzata in JavaScript che permette di targettizzare facilmente il design di un progetto Web based sulla base di diversi dispositivi e dei vari browser per la navigazione su Internet. Si tratta di una soluzione completa, e per molti versi alternativa all’utilizzo del CSS puro, per la creazione di layout compatibili per la visualizzazione su smartphone, tablet, Smart Tv e computer Desktop.

ResponsiveTecnicamente syze è stato concepito per attivarsi prima del caricamento della pagina nel quale è stato incluso, un accorgimento che consentirà di evitare latenze e, di conseguenza, rallentamenti dovuti all’adattamento dell’interfaccia grafica all’area di visualizzazione corrente. Si tratta in ogni caso di una libreria particolarmente leggera (meno di 1KB), cross-device, cross-browser e in grado di rilevare i diversi orientamenti di un dispositivo.

Come per la stragrande maggioranza delle soluzioni proposte su questo blog, anche in questo caso parliamo di una libreria rilasciata sotto licenza Open Source che potrà essere scaricata liberamente dal code hosting di GitHub. Sostanzialmente il suo utilizzo prevede l’inclusione di un file JavaScript minificato (syze.min.js) per garantire il minimo impatto sulle prestazioni.

<script src="//rezitech.github.com/syze/syze.min.js"></script>

Fatto questo si potrà invocare la funzione syze.sizes() a cui passare le risoluzioni che si desidera supportare:

syze.sizes(320, 480, 768, 1024, 1920);

L’ultimo passaggio prevede l’utilizzo di CSS, come accade per esempio con il codice seguente che associa le diverse risoluzioni a delle immagini di sfondo.

body { background: no-repeat center center; }
.is320  body { background-image: url(mobile-tall-128x128.png); }
.is480  body { background-image: url(mobile-wide-128x128.png); }
.is768  body { background-image: url(tablet-tall-256x256.png); }
.is1024 body { background-image: url(tablet-wide-256x256.png); }
.is1920 body { background-image: url(hdsize-wide-512x512.png); }

Syze non farà altro che impiegare le Media Query per rilevare le caratteristiche del device utilizzato e assocerà ad esso il foglio di stile più adatto. Chiaramente esistono metodi più avanzati per rendere un sito Web responsive, ma la libreria può rivelarsi molto utile per rendere velocemente mobile friendly delle pagine di vecchia data.

Via syze

Post correlati
I più letti del mese
Tematiche