Responsive design: è la soluzione migliore per il mobile?

Ormai il termine “responsive design” è di uso comune: tutti vogliono il sito web responsive. Ma è la soluzione migliore per la navigazione mobile? O meglio.. è l’unica? E se non fosse l’unica, come scegliere?

Dopo il post della settimana scorsa dal titolo “Mobile SEO: il tuo sito è al passo con i tempi?” ho ricevuto numerosi messaggi in merito alle metodologie di strutturazione di un sito web necessarie a renderlo “Mobile-friendly“; ho deciso, quindi, di creare un post di approfondimento, interamente dedicato all’argomento.

 

Le linee guida di Google raccomandano le 3 seguenti configurazioni per la creazione di siti web ottimizzati per i dispositivi mobile.

Responsive Web Design (RWD)

Il web server restituisce il medesimo HTML ai client, a prescindere dalla loro natura (pc desktop, tablet, smartphone o browser non visuale). Sarà compito del foglio di stile (CSS) modificarne il rendering in base al dispositivo che l’utente sta utilizzando, o meglio alla dimensione dello schermo a disposizione.

Responsive design (RWD): come funziona?

Responsive design (RWD): come funziona? – Immagine di Google Developers.

Se le pagine ed i relativi assets (immagini, Javascript e CSS) possono essere scansionati da Googlebot (cioè non sono bloccati dalle indicazioni del robots.txt), Google sarà in grado di comprendere automaticamente (senza l’utilizzo di meta tag specifici da parte degli sviluppatori) che il sito web è caratterizzato da questa tipologia di configurazione.

> L’URL cambia tra la versione desktop e quella mobile? NO
> L’HTML cambia tra la versione desktop e quella mobile? NO

 

Dynamic Serving (italianizzato in “Pubblicazione dinamica“) / Adaptive Web Design (AWD)

Il web server invia, per rispondere allo medesimo URL, del codice HTML (con relativo CSS) diverso in base allo “user-agent” che effettua la richiesta.

Dynamic Serving (pubblicazione dinamica)

Dynamic Serving (pubblicazione dinamica) – Immagine di Google Developers.

Al contrario del caso precedente, non è immediatamente al crawler il comportamento del sito web al variare dello user-agent; se Googlebot scansionasse le pagine utilizzando uno user-agent desktop, ad esempio, i contenuti per dispositivi mobile rimarrebbero “nascosti“. Per questo motivo, è preferibile fare in modo di dare un suggerimento (utilizzando l’intestazione HTTP Vary) allo spider, indicando la tipologia user-agent aggiuntivo da utilizzare.

> L’URL cambia tra la versione desktop e quella mobile? NO
> L’HTML cambia tra la versione desktop e quella mobile? SI

 

URL distinti

Questa soluzione prevede che ogni risorsa, quindi ogni URL del sito web desktop,  abbia un corrispondente URL per mobile.

Mobile: soluzione con URL separati

Sito web Mobile: soluzione con URL separati – Immagine di Google Developers.

L’esempio classico è quello in figura: l’URL www.example.com, nella versione mobile diventa m.example.com (o mobile.example.com); in pratica viene creato un dominio di terzo livello ad hoc, con contenuti e assets specifici per lo scopo.

> L’URL cambia tra la versione desktop e quella mobile? SI
> L’HTML cambia tra la versione desktop e quella mobile? SI

Le riflessioni sulle soluzioni

L’ultima soluzione (URL separati) è stata utilizzata per anni in quanto fu la prima introdotta. Gli stessi YouTube e Facebook (per citare due colossi), ancora oggi utilizzano rispettivamente m.youtube.com e m.facebook.com per le versioni mobile.
Se tali URL vengono visitati da desktop, il primo controlla lo user-agent ed esegue un redirect verso l’URL desktop, mentre il secono permette di navigare la versione mobile anche da desktop.

Le versioni mobile di YouTube e Facebook

Le versioni mobile di YouTube e Facebook

In questi casi, chiaramente, bisognerebbe conoscere le motivazioni che hanno portato a questo tipo di scelte (potrebbe, ad esempio, dipendere dall’interazione con alcune applicazioni), ma ricordiamoci un concetto importante:

l’utente, in genere, non è un appassionato di architetture di sviluppo web e l’unico aspetto davvero importante per lui è ottenere delle informazioni accessibili, a prescindere dal dispositivo che utilizza.

 

Adaptive vs Responsive

Adaptive vs Responsive

La pubblicazione dinamica, ad esempio, è costituita da un insieme di metodi di progettazione che si focalizza sull’esperienza dell’utente in base al dispositivo ed al browser che utilizza. Tutti gli elementi che compongono le pagine web, dalle dimensioni del layout fino al CSS e al Javascript, vengono creati in relazione alla tecnologia alla quale saranno destinati (progressive enhancement).
E’ chiaro che questo approccio permette agli sviluppatori di sfruttare al meglio le caratteristiche dei dispositivi, nella “forma“, e nelle funzionalità.

Per quanto simili possano sembrare l’adaptive ed il responsive, si tratta di due mondi completamente diversi in termini di esperienza degli utenti e per il modo di rendere disponibili i contenuti nei diversi dispositivi.

Entrambi rispondono con un layout diverso in base alla risoluzione del client, ma utilizzando riferimenti diversi. Nel caso del responsive design, la larghezza dello schermo è l’unico criterio valutato per stabilire in che modo ottimizzare l’HTML per quella dimensione; nel caso del dynamic serving, invece, il web server comunicherà a Googlebot, attraverso l’intestazione HTTP Vary, la versione della pagina restituire in base a veri fattori, come il sistema operativo ed il browser.

Griglie "fluide e flessibili"? Mai provati Bootstrap e Foundation?

Griglie “fluide e flessibili“? Mai provati Bootstrap e Foundation?

Secondo me, provando a fare una sorta di generalizzazione, il responsive design ha un elevato rendimento quando dobbiamo trattare dei layout riconducibili a grigliefluide e flessibili“, per dare all’utente una esperienza che rimane costante in tutti i dispositivi. Tutto ciò è perfetto per i siti “semplici” e schematici. Tale tecnica, inoltre, garantisce un miglior sfruttamento del crawl budget (per approfondire l’argomento, consiglio di leggere il post dal titolo “Page Speed: come misurare ed aumentare le prestazioni di un sito web“): una pagina, infatti, necessita un solo passaggio di Googlebot e non di più passaggi utilizzando user-agent diversi.

Se, però, l’adattamento delle pagine per alcune risoluzioni facesse assumere posizioni “scomode” (come il fondo della pagina) o formati non adeguati ad elementi di rilievo per le conversioni (un banner pubblicitario, ad esempio)?

Bilancio in termini di prestazioni

Lo svantaggio più grande della “filosofiaresponsive riguarda le prestazioni. Dovendo “accontentare” ogni dispositivo con un unico HTML adattato, chiaramente l’ottimizzazione non può raggiungere il livello massimo. Pensiamo, ad esempio, alle immagini: utilizzare la stessa immagine per servire un grande ventaglio di risoluzioni, implica l’utilizzo di immagini molto grandi che vengono “scalate” con il diminuire delle dimensioni dello schermo. L’alternativa, consisterebbe nell’utilizzare una immagine ottimizzata per ogni risoluzione, ma ciò creerebbe un numero di richieste HTTP troppo elevato.

Al contrario, utilizzando un approccio adaptive, i designer e gli sviluppatori hanno il controllo completo del layout per ogni dispositivo, potendo ottimizzarlo al massimo. Potenzialmente, le pagine potrebbero essere completamente diverse!

Come scegliere

Google preferisce il responsive design.. perché?

Google preferisce il responsive design.. perché?

Anche avendo i PRO e i CONTRO sul tavolo, la scelta della del criterio di progettazione non è semplice. Google dichiara le proprie preferenze: l'”eletto” è il  responsive design! Come accennato in precedenza, il motivo è abbastanza semplice: le risorse necessarie per la scansione di siti web di questo tipo sono inferiori.

Ma se gli utenti cercassero un’esperienza diversa sui dispositivi mobile rispetto al desktop? Facciamo un esempio banale, ma estremamente efficace. Se la mia azienda fosse una compagnia assicurativa, potrei avere un sito web desktop istituzionale ed uno mobile “dedicato alla strada” che permette di creare un “ticket di segnalazione sinistro” in maniera rapida, direttamente in loco.
La scelta, in questo caso, sarebbe diversa: dynamic serving o URL separati.

Scegliere tra responsive e adaptive

Scegliere tra responsive e adaptive? Gli obiettivi sono la risposta!

 

Tirando le somme, per rispondere alla domanda che da il titolo al post, è inevitabile dire “dipende dagli obiettivi del progetto web“.

Indipendentemente da questo, però, che si scelga responsive o adaptive (la soluzione ad URL separati tendo a sconsigliarla in quanto introduce margini di errore elevati), suggerisco l’utilizzo, a monte, di una infrastruttura MVC  (Model-View-Controller, o Modello-Vista-Controllo) per il “motore” del sito web, la quale lo renderà molto più flessibile anche rispetto futuri “cambi di rotta“.

 

Loading Facebook Comments ...