Il web sul mobile senza dover creare siti o app specifici per ogni dispositivo
I dispositivi mobili stanno diventando la principale via di accesso al web.
E non c'è niente di strano o di sorprendente in tutto ciò, vista la rapidissima diffusione di tablet e smartphone anche e soprattutto negli ambienti di lavoro.
La più evidente caratteristica comune a tutti i dispositivi mobili, è di avere schermi piccoli, molto più piccoli di quelli che oggi possiamo avere su ogni scrivania ad un costo irrisorio ed a cui ci siamo immediatamente abituati, sia per il lavoro sia per la navigazione in rete.
Sebbene un sito internet ben progettato sia navigabile anche sul monitor di uno smartphone, chiunque abbia visitato un sito complesso sfruttando un dispositivo a bassa risoluzione, sa quanto possa essere frustrante dover ricorrere continuamente alle funzionalità di zoom per cercare di leggerne le pagine, soprattutto se la risoluzione è quella — davvero minima — di 240 x 320 pixel. In molti casi lo zoom impostabile è insufficiente anche solo per ricavare dal sito visitato un numero di telefono o un indirizzo e-mail, per non parlare delle specifiche di un prodotto o delle caratteristiche di un servizio che si sta cercando.
Una semplice prova ...
Visto che questo è il nostro sito aziendale, quello con cui proponiamo le nostre soluzioni, veniamo subito al
sodo: visitate il vostro sito con un cellulare di ultima generazione o con uno small tablet - meglio ancora se fate
le vostre prove con dispositivi diversi: potete sempre sfruttare amici e conoscenti per questi test,
oppure usare uno degli emulatori che vi suggeriamo al fondo di questo capitolo - e guardate l'effetto che fa.
Se siete completamente soddisfatto di come il vostro sito si comporta alle basse risoluzioni, della facilità con cui si può accedere alle informazioni in esso contenute e della velocità di apertura delle pagine, vi facciamo le nostre congratulazioni e potete anche interrompere qui la lettura di questo capitolo.
Se non ne siete soddisfatti, navigate in questo sito con gli stessi dispositivi, esaminatelo dagli stessi punti di vista sopra suggeriti e guardate come si comporta alle varie risoluzioni. Oppure, molto più semplicemente, potete ridurre a vostro piacere la larghezza della finestra del browser, non dovete nemmeno tirare fuori di tasca il cellulare o disturbare gli amici.
Questo sito è stato progettato e realizzato secondo i principi del Responsive Web Design
Ciò vuol dire che l'aspetto del sito, le caratteristiche e la collocazione delle barre di navigazione e l'incolonnamento dei testi cambiano e si adeguano alle caratteristiche dello schermo su cui le si sta guardando.
Vuole soprattutto dire che questo sito è stato accuratamente progettato in modo che ciò accada nella maniera più naturale e trasparente per gli utenti, che devono poterlo usare con la massima facilità e semplicità, qualsiasi siano le caratteristiche del monitor che usano.
Ma non basta:
- I contenuti che possono essere letti non sono esattamente gli stessi a tutte le risoluzioni. In alcune pagine, sugli schermi molto piccoli, le informazioni meno significative non vengono presentate, per portare immediatamente all'attenzione dei visitatori solo ciò che è realmente importante per la comunicazione e che diversamente rischierebbe di restare nascosto.
- Le immagini sono caricate dinamicamente con dimensioni adeguate alla risoluzione dello schermo, in questo modo si riduce il traffico di rete - che sui cellulari avviene a una velocità molto inferiore rispetto a una linea ADSL e con costi nettamente superiori - le pagine, quindi, si aprono con la massima celerità possibile riducendo quelle attese che fanno perdere visitatori.
Sono solo alcuni esempi ma aiutano a capire ...
Perché conviene realizzare un sito secondo i principi del Responsive Web Design ?
Perché è il modo più semplice ed economico di rendere
perfettamente visibile ed usabile il proprio sito internet sugli apparati mobili, senza perdere nessuna
prestazione nella navigazione dalle postazioni fisse.
Infatti, nel momento in cui ci si rende conto che il proprio sito deve essere navigabile anche con smarphone e tablet, se non si vuole perdere quella fetta di visitatori appartenenti alla fascia più elevata per reddito e aggiornamento tecnologico, ci si trova di fronte a due soluzioni possibili:
- Realizzare, oltre al tradizionale sito internet, delle app specifiche per ogni tipo di dispositivo mobile.
- Sviluppare un unico sito web, perfettamente compatibile sia con la navigazione dalle postazioni fisse sia da ogni dispositivo mobile.
La prima soluzione è sicuramente la più completa ma è anche la più complessa, difficile e, soprattutto, costosa da realizzare. In particolare richiede l'aggiornamento costante delle app già sviluppate e la creazione di nuove ad ogni evoluzione tecnologica di Apple, Samsung, Nokia e degli altri produttori. Tutto ciò implica sia una costante attenzione alle novità, sia di far accogliere e distribuire ogni nuova app, o nuova versione di una esistente, negli opportuni marketplace.
La seconda soluzione richiede solo una progettazione del sito web estremamente accurata e precisa, che faccia seguito ad un'analisi dettagliata delle esigenze di comunicazione del committente. La tecnologia sottostante è quella classica di realizzazione dei siti web, aggiornata allo stato dell'arte, e non richiede nessun server, nessun dispositivo particolare per essere implementata, nessuna regola imposta da terzi per essere messa on-line.
Siti e programmi per i test
Gli emulatori sono utili sia per svolgere test su un sito responsive sia, soprattutto, per esaminare un sito "normale" con lo sguardo di chi vi accede con un dispositivo mobile senza disporre di uno smartphone o di un tablet.
Il più semplice da usare è Opera Mini Simulator, basta accedere alla pagina, aspettare che venga caricato l'emulatore (richiede Java), inserire l'indirizzo del sito che si vuole esaminare e vi si può navigare come se si disponesse di uno smartphone con la risoluzione di 240x320 pixel.
In alternativa è possibile scaricare Fennec, la versione mobile di Mozilla Firefox, in una versione di emulazione per MS Windows. È possibile cambiare le dimensioni della finestra del browser per simulare qualsiasi risoluzione di un dispositivo mobile.