Esistono tre tecniche principali per realizzare un sito per dispositivi mobili o meglio un sito web che sia visibile su ogni tipo di dispositivo e su schermi di ogni tipo e dimensione. Ognuno di questi approcci presenta aspetti positivi e negativi.
Se vi interessa l’argomento, in un precedente articolo abbiamo parlato di siti web mobile friendly per e-commerce.
Questo modello di progettazione, in italiano detto anche design reattivo, permette al sito web di “reagire” al tipo di dispositivo utilizzato per la visualizzazione.
Il sito web risponde allo stesso indirizzo (URL) ed il codice HTML pubblicato è lo stesso; ciò che cambia è la modalità di presentazione dei contenuti che, solo per fare un esempio, su uno smartphone vengono in qualche modo “incolonnati” per essere più facilmente visibili, maggiormente fruibili e fornire all’utente una migliore esperienza d’uso.
Unico codice da realizzare, gestire e aggiornare; soluzione più semplice ed economica rispetto alle altre; riposizionamento automatico da parte del browser (client side) degli elementi della pagina basato sul dispositivo utilizzato per la visualizzazione del sito web.
Possibilità limitate di fornire un’esperienza diversificata in base a diverse necessità degli utenti desktop e mobili; generalmente i tempi di caricamento sono superiori rispetto all’approccio con indirizzi web distinti.
In italiano viene detta anche pubblicazione dinamica, questa tecnica di progettazione e realizzazione di un sito per dispositivi mobili prevede, come nel caso precedente, l’utilizzo dello stesso indirizzo (URL) a prescindere dal dispositivo utilizzato per la visualizzazione. Ciò che cambia rispetto al modello precedente è che viene fornita all’utente una versione HTML diversa per ogni tipo di dispositivo, in base alle informazioni che il server ottiene sul browser utilizzato dall’utente.
Abbiamo quindi la necessità di realizzare e gestire la manutenzione di codice diverso per ogni tipo di dispositivo con ovvio impatto sui costi.
Esperienza d’uso fortemente ottimizzata e differenziata in base alle dimensioni dello schermo, al dispositivo e al sistema operativo dell’utente; generalmente tempi di caricamento migliori rispetto all’approccio responsive con generazione del codice da parte del server (server side).
Due o più versioni diverse di codice ed interfaccia utente da progettare, da realizzare, gestire e aggiornare con sensibile impatto sui costi di realizzazione e gestione.
Con questo tipo di approccio nella progettazione di un sito per dispositivi mobili viene pubblicato un codice HTML diverso per ogni dispositivo, ed anche gli indirizzi web (URL) sono diversi. In questo caso si tenta di rilevare il dispositivo utilizzato dall’utente per poi reindirizzare il browser alla pagina (indirizzo URL) appropriata.
E’ l’approccio utilizzato da applicazioni web con milioni di utilizzatori come ad esempio Facebook o Twitter quando si accede al sito da browser su dispositivi mobili.
www.facebook.com m.facebook.com
www.twitter.com mobile.twitter.com
Nel caso in cui sia necessario si può fornire agli utenti una completa esperienza d’uso diversa tra sito mobile e desktop; generalmente i tempi di caricamento sono inferiori rispetto all’approccio responsive.
Due o più versioni diverse di codice da realizzare, gestire e aggiornare; maggiori difficoltà nel fornire una buona esperienza su tablet e smartphone; funzionalità limitate rispetto alla versione desktop.
Prossimamente vorrei riuscire a scrivere qualcosa anche su AMP (Accelerated Mobile Pages) e PWA (Progressive Web Application) che sono delle tecnologie più avanzate e relativamente nuove per migliorare ulteriormente l’esperienza dell’utente nell’utilizzo di applicazioni web da dispositivi mobili. Queste tecnologie hanno come scopo principale il miglioramento delle prestazioni (reattività e velocità) durante l’utlizzo di un sito web per dispositivi mobili.
Ad oggi (ma dobbiamo ancora parlare di AMP e PWA), è bene tenere a mente che il modello di progettazione consigliato da Google per la realizzazione di un sito per dispositivi mobili è il responsive design (RWD).
Ne avevamo già parlato un bel po’ di tempo fa nell’articolo Google premia i siti web responsive.