Tempo di lettura stimato: 4 minuti
Dopo aver analizzato le differenze tra lo sviluppo di un sito personalizzato e uno realizzato tramite CMS, oggi valutiamo un’altro aspetto altrettanto importante nella realizzazione di un sito web: la visualizzazione su smartphone e tablet.
Il panorama del web è in continua evoluzione, e, nel corso del tempo, gli sviluppatori hanno cercato di fornire una soluzione semplice e pratica ai problemi di visualizzazione dei siti web sui dispositivi portatili, spesso dotati di schermi di piccole dimensioni e pertanto poco adatti a navigare un sito web costruito per gli schermi dei PC.
Il sito mobile
Nella seconda metà degli anni 2000 molte aziende, per far fronte a queste difficoltà, hanno affiancato il sito web principale ad una versione studiata apposta per gli smartphone, che fornisse almeno le funzionalità principali del sito, in maniera semplice e intuitiva. Sono nati così i siti mobile.
Il sito mobile si presenta all’utente in maniera simile ad un’applicazione che, anziché essere installata sul dispositivo, è accessibile da browser come Safari o Chrome.
L’homepage del sito identifica il tipo di dispositivo e, nel caso questo sia uno smartphone o un tablet, indirizza automaticamente l’utente al sito mobile, che solitamente presenta un’indirizzo leggermente diverso, es. m.sitoweb.com o www.sitoweb.com/mobile/
L’indirizzo diverso è dovuto alla principale caratteristica dei siti mobile: il sito principale e quello mobile sono, a tutti gli effetti, due siti distinti. Anche se simili, il sito mobile è un sito studiato ad hoc per i dispositivi portatili, per cui anche la presentazione dei contenuti è ottimizzata per essere visualizzata su tali dispositivi, sacrificando talvolta contenuti ritenuti superflui.
Il layout, come già accennato, richiama quello delle applicazioni scaricabili dai vari Stores e Markets. In alto, lo spazio denominato Header contiene il titolo della pagina e i pulsanti di navigazione. Spesso all’interno dell’Header troviamo il pulsante che attiva, a scorrimento o a comparsa, il menu del sito. Al centro troviamo il contenuto, ottimizzato per i dispositivi mobili. Lo spazio a fondo pagina, o Footer, può contenere pulsanti di navigazione o di interazione con il contenuto, o le informazioni dell’azienda presentata sul sito web.
Per facilitare lo sviluppo di siti web mobile, jQuery, una delle principali librerie Javascript in circolazione, ha pubblicato una versione specifica per i siti mobile: jQuery mobile. Questa libreria fornisce tantissimi componenti, facilmente personalizzabili tramite l’editor di temi integrato, tra i più utilizzati all’interno di un sito mobile.
Tra questi troviamo, ad esempio:
- Griglie:
- Liste:
- Pulsanti:
e tante altre funzionalità.
Il sito responsive
La crescente diffusione dei dispositivi mobili ha spinto la comunità web a trovare soluzioni più semplici, che permettessero agli sviluppatori di modellare il sito web sia per gli schermi dei computer sia per smartphones e tablets. Per quanto il sito mobile permetta a tutti gli utenti di navigare facilmente tra i contenuti del sito, questo richiedeva un doppio sforzo a chi doveva sviluppare il sito nelle due versioni.
Nel 2010, un articolo di Ethan Marcotte, introduce una nuova tecnica che permette di “adattare” il sito web principale a diversi layout, uno per ogni dispositivo, o classe di dispositivi.
Questa tecnica si basa su particolari istruzioni, chiamate media query, che permettono di selezionare per quali dispositivi applicare determinate regole grafiche, creando così un sito responsive, o capace di adattamento.
Tramite l’utilizzo delle media query è possibile definire stabilire come disporre i contenuti in base alle dimensioni dello schermo utilizzato, tramite i breakpoints.
Ogni volta che le dimensioni dello schermo vengono modificate superando un breakpoint, il layout della pagina viene modificato, spostando i contenuti in modo da sfruttare al meglio lo spazio disponibile.
Per esempio possiamo definire, per il layout classico illustrato nell’articolo precedente, tre diverse visualizzazioni:
- Schermi larghi fino a 999 px (es: smartphones):
- Schermi tra i 1000 px e 1199 px di larghezza (es: tablets):
- Schermi larghi più di 1200 px (es: computers):
Come si può facilmente notare, le sidebars destra e sinistra vengono incolonnate insieme al contenuto man mano che lo schermo si restringe, fino ad arrivare a una visualizzazione a una colonna sugli schermi degli smartphones.
Tramite questa tecnica è possibile adattare un unico sito ai diversi dispositivi disponibili oggi sul mercato, senza grosse difficoltà, rispettando le linee guida espresse dal W3C (World Wide Web Consortium), la community che sovrintende lo sviluppo dei linguaggi Web, che scoraggiano la realizzazione di più siti web con lo stesso contenuto.
Sito mobile o sito responsive?
Ora che abbiamo visto entrambe le tecniche possiamo quindi valutare quale soluzione fa più al caso nostro. Come sempre non esiste una scelta migliore dell’altra in assoluto. Immaginificio si occupa, per i suoi Clienti, di studiare e proporre la soluzione più adatta.
Un esempio? Se volete fornire un’esperienza unica dai dispositivi mobili un sito mobile può essere quello che fa per voi, altrimenti, se volete ridurre i costi e facilitare la navigazione dei vostri utenti sui dispositivi portatili, il sito responsive è il più indicato allo scopo.