Ingegner Martino Benzi

Il Responsive Web Design

Il web sul mobile senza dover creare siti o app specifici per ogni dispositivo possibile e immaginabile

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 mio sito professionale, quello con cui cerco di procurarmi nuovi clienti, vado subito al sodo: visita il tuo sito con un cellulare di ultima generazione o con uno small tablet — meglio ancora se fai le tue prove con dispositivi diversi: puoi sempre sfruttare amici e conoscenti per questi test, oppure usare uno degli emulatori che ti suggerirò al fondo di questo capitolo — e guarda l'effetto che fa.

Se sei completamente soddisfatto di come il tuo 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, ti faccio le mie congratulazioni e puoi anche interrompere qui la lettura di questo capitolo.

Se non ne sei soddisfatto, naviga in questo sito con gli stessi dispositivi, esaminalo dagli stessi punti di vista sopra suggeriti e guarda come si comporta alle varie risoluzioni. Oppure, molto più semplicemente, puoi ridurre a tuo piacere la larghezza della finestra del browser, non devi 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 mia comunicazione e che rischierebbe di restare nascosto.
  • Alcune funzionalità sono disponibili solo per i cellulari; ad esempio, la possibilità di chiamare direttamente il mio numero di telefono non è attivata sul fisso, visto che in questo caso è possibile comporlo automaticamente usando Skype (ovviamente se si è scelto di installare e usare Skype)  Se provi a modificare la larghezza della finestra del browser, vedrai che il numero qui sotto diventa attivo (solo) alle basse risoluzioni, quindi sugli smartphone basta un colpetto col dito per comporlo .
  • +39 0131 251915+39 0131 251915
  • 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:

  1. Realizzare, oltre al tradizionale sito internet, delle app specifiche per ogni tipo di dispositivo mobile.
  2. 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 ed impietosa 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.

Qualche sito di esempio

Il Responsive Web Design è una scelta talmente efficiente che adotto come testimonial nientepopodimeno che

http://www.barackobama.com/

E, nel mio minimo, dopo un precedente di tanto peso, ne puoi trovare qualche esempio nel mio portfolio

In un prossimo capitolo entrerò nei dettagli di come vanno analizzate le proprie esigenze di comunicazione per progettare un sito web secondo i principi del Responsive Web Design, qui sotto ti fornisco i link ad alcune delle risorse per testare le prestazioni del proprio sito sugli apparati mobili.

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.

Se hai trovato utile questa pagina, potrebbero interessarti anche:

Se desideri essere informato sulla pubblicazione di nuovi capitoli, puoi iscriverti alla newsletter, sarai sempre libero di cancellarti dalla mailing-list se quanto scrivo non ti piacerà.