Creare pagine web compatibili coi dispositivi mobili
Negli ultimi anni abbiamo assistito ad una vertiginosa crescita della cosidetta navigazione mobile cioè alla richiesta di dati e di pagine web attraverso dispositivi come smartphone e tablet. Questo fenomeno, ovviamente, ha "obbligato" gli sviluppatori di siti web a considerare le peculiarità di questi dispositivi, sia in fase di progettazione che di sviluppo, al fine di creare servizi e pagine web fruibili anche in mobilità.
Rinunciare ad offrire una soddisfacente esperienza di navigazione agli utenti che navigano attraverso smartphone e tabet, infatti, significa rinunciare ad una grossa fetta di traffico e quindi rinunciare ad una parte sempre più consistente di utenza. Oggi non c'è scelta: un buon sito web deve poter essere fruibile indifferentemente tramite un normale computer, un tablet o un "telefono intelligente".
Purtroppo raggiungere una reale compatibilità cross-device non è sempre semplice perchè si ha a che fare con una molteplicità di dispositivi (ciascuno dotato di caratteristiche peculiari) e di browser mobili (Safari Mobile, Firefox Mobile, IE Mobile, Android Browser, ecc.) non sempre omogenei tra loro nelle operazioni di rendering delle pagine web.
Ma quali sono gli accorgimenti da seguire per realizzare un sito web fruibile tramite smartphone e tablet? Gli aspetti da considerare in fase di progettazione e sviluppo di interfacce mobili sono sostanzialmente tre:
- Design Mobile-Friendly
Le pagine web devono essere dimensionalmente adatte ad essere visualizzate su display più piccoli dei comuni monitor: bisogna, ad esempio, prevedere un'impaginazione differente per i contenuti (difficile fare ricorso ai classici layout su più colonne) e realizzare testi e pulsanti più grandi. - Interazione con l'utente
Fino a qualche tempo fa il principale strumento di interazione tra una pagina web ed un utente era il mouse: attraverso il click, l'utente si poteva spostare tra le pagine del sito ed accedere alle sue funzionalità. Pensando in ottica "mobile" dobbiamo scordarci il mouse e pensare alle varie gestures che l'utente può compiere su uno schermo touch screen, primo fra tutti il tap (il corrispondente del click del mouse). Questa differenza ci obbliga a ripensare la forma delle interfacce ed a gestire in modo differente taluni eventi. - Velocità di caricamento
Altro fattore determinante da tenere nella dovuta considerazione è la velocità di caricamento delle pagine: se fino a ieri pensavamo di poter fare affidamento su processori sempre più performanti e su connessioni mediamente veloci (come le comuni ADSL), oggi dobbiamo pensare che l'hardware degli utenti che navigano attraverso smartphone e tablet è meno potente di quello di un normale computer ed anche le connessioni non sono sempre stabili e veloci come quelle "via cavo".
Tenendo bene a mente queste caratteristiche potremo sviluppare pagine web realmente fruibili ed offrire ai nostri utenti una soddisfacente esperienza di navigazione anche attraverso dispositivi mobili.
Tecniche di web-design di pagine web ottimizzate per dispositivi mobili
Abbiamo detto che uno dei punti fondamentali quando si progettano siti web destinate ad un pubblico "mobile" è, ovviamente, il design delle pagine. Per quanto concerne questo aspetto, i web-designer possono scegliere tra tre diverse metodologie di lavoro:
- Responsive Design
E' una tecnica basata sui CSS (più precisamente sulle sull'utilizzo delle media-queries di CSS3) che consente di creare interfacce che si adattano automaticamente alle dimensioni (ed all'orientamento) del display dell'utente: in pratica il web-designer deve definire diverse regole di stile per ciascuna delle risoluzioni possibili. Tutte queste operazioni avvengono lato client senza alcun coinvolgimento del server. - Sito Mobile (M-Site)
Questa tecnica prevede la creazione di un sito web separato (ottimizzato per dispositivi mobili) sul quale "dirottare" automaticamente il traffico mobile identificato mediante l'analisi di alcune caratteristiche come l'user-agent o le dimensioni dello schermo. In questo caso si hanno due siti web con URL differenti. - Dynamic Serving
Questa tecnica (anche detta "responsive design lato-server") prevede che il sito web cambi dinamicamente il suo aspetto adottando un template ottimizzato per dispositivi mobili identificati lato server mediante l'analisi dello user-agent dell'utente. In questo caso la medesima URL viene servita in modo differente attraverso una modifica dinamica di HTML e CSS eseguita server-side.
A differenza di quello che molti dicono, non esiste una tecnica migliore delle altre. La scelta, infatti, dipende dalle caratteristiche peculiari del sito web che si desidera tradurre in mobilità.
Risorse utili per un design mobile-friendly
Di seguito alcune risorse utili dove potete approfondire le tecniche citate in precedenza:
- Guida allo sviluppo di un m-site
- Guida Bootstrap (un potente framework che consente di creare facilmente pagine web responsive)
Potenzialità (e limiti) del nostro emulatore di smartphone
Durante la fase di sviluppo di un sito mobile friendly, ovviamente, è necessario effettuare opportuni test al fine di verificare la resa visiva e funzionale del nostro lavoro. La soluzione migliore e quella di visualizzare il sito direttamente all'interno di un dispositivo mobile, ma se per qualche ragione ciò non è possibile, possiamo ovviare facendo ricorso ad un
Il nostro emulatore offre una resa visiva molto fedele sia per i siti sviluppati con la tecnica del responsive design che per gli m-site mentre potrebbe risultare inadatto per i siti web gestiti mediante la tecnica del dynamic serving. Alcuni problemi di visualizzazione potrebbero presentarsi, inoltrew, qualora il vostro sito web abbia delle limitazioni in merito alla visualizzazione all'interno di frame (l'emulatore si basa su un frame in linea) oppure integri funzioni Javascript che effettuano redirect dell'utente in base a talune variabili d'ambiente.
Come funziona il nostro emulatore di browser mobili?
Il funzionamento del nostro emulatore di browser mobili è davvero molto semplice:
- si inserisce la URL del sito web o della pagina che si vuole verificare;
- si sceglie il modello di dispositivo che si desidera emulare;
- si inserisce il codice di verifica.
Dopo aver premuto sul pulsante di conferma si avvia il test che nel giro di pochi secondi restituirà un'anterpima dell'aspetto del nostro sito web su smartphone e/o tablet.
