Tutti i vantaggi SEO di un utilizzo corretto del responsive design

È il modello di design consigliato da Google, ma soprattutto è quello che può aiutare a migliorare l’esperienza dell’utente ed evitare alcune delle comuni insidie in cui ricade la progettazione della navigazione: parliamo del responsive design, ovvero la creazione di un sito in grado di adattarsi in modo dinamico al dispositivo da cui viene visualizzato, generando anche una serie di vantaggi per la SEO e il posizionamento.

Che cos’è il responsive design e cosa significa sito responsive

Responsive design, in italiano reso come design responsivo o reattivo, è una tecnica di progettazione web che prevede la realizzazione di siti e applicazioni Web il cui layout si adatta in modo automatico alle dimensioni dello schermo del dispositivo usato dall’utente, così da assicurare che la navigazione e la lettura siano ottimali, senza necessità di ridimensionare o scorrere i contenuti.

Più precisamente, responsiveness significa capacità di reagire e identifica un approccio al web design in cui l’interfaccia si adatta graficamente al layout e alle capacità dello specifico dispositivo con cui l’utente sta navigando, facilitando l’usabilità, la navigazione e la ricerca di informazioni. In pratica, il sito riesce a trasformare il suo template e le funzioni in base alle dimensioni del display, così che l’utente non debba intervenire per regolare e scorrere i contenuti (o limitando queste operazioni).

La reattività è assicurata dalle media query, che permettono al design di disporsi automaticamente in base allo spazio del browser, garantendo la coerenza dei contenuti tra i dispositivi e gli elementi di design che vengono dimensionati in unità relative (ovvero in percentuale); in tal modo, ad esempio, su un telefono gli utenti vedranno i contenuti in una visualizzazione a colonna singola, ma su un tablet lo stesso contenuto potrebbe avere una visualizzazione su due colonne.

Il design reattivo offre vantaggi significativi ai proprietari dei siti, è un’impostazione ormai di default nel web design per supportare lo switch tra dispositivi ed è anche l’opzione consigliata da Google, che definisce il responsive web design “il modello di progettazione più semplice da implementare e gestire”.

Avere un sito Web responsive va oltre la semplice regolazione delle dimensioni in base alla tipologia di device, perché in realtà significa anche riformattare il back-end per consentire un caricamento più velocemente rispetto ai siti semplicemente ottimizzati per i dispositivi mobili.

Uno smartphone ha lo schermo di dimensioni che sono in media un decimo di quelle di un laptop, forse anche un ventesimo rispetto a un computer desktop, e spesso anche l’hardware all’interno è una frazione dei computer: un sito responsive ne tiene conto e, ad esempio, semplifica il caricamento delle pagine richieste da navigazione mobile.

Si comprende, quindi, che parliamo di un elemento importante per la user experience generale – a prescindere dal tipo di dispositivo utilizzato, che può essere computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv eccetera – ma soprattutto per rispettare i criteri di accessibilità web, che sappiamo tener conto anche di numerosi altri fattori, per rispondere in modo adeguato anche a esigenze derivanti dalle caratteristiche dell’utente (come, tra le altre, capacità cognitive, vista o difficoltà fisiche).

Perché è importante il design responsivo

Praticamente, quindi, i responsive web designer sono in grado di assicurare una fruizione del sito che si adatta ai diversi modi in cui gli utenti accedono e interagiscono con le sue pagine, indipendentemente dal dispositivo e dalle dimensioni di schermi e finestre.

La fruizione del Web può avvenire da una moltitudine di dispositivi e schermi di diverse dimensioni su telefoni, “phablet”, tablet, desktop, console di gioco, TV e persino smartwatch e dispositivi indossabili: è cruciale impostare il layout del sito per assicurare la massima fruizione a prescindere dal tipo e dalle dimensioni dello schermo, odierne o future. Inoltre, i vari device hanno caratteristiche diverse di interazione: Ad esempio, alcuni dei tuoi visitatori utilizzeranno un touchscreen. Il moderno responsive design considera tutte queste cose per ottimizzare l’esperienza per tutti.

Implementare un responsive design è anche un primo passo cruciale per avere un sito mobile friendly, un aspetto sempre più importante al giorno d’oggi: da tempo, ormai, il traffico web da device mobili ha superato quello da desktop, e quindi non è più pensabile offrire alla platea di utenti che utilizza prevalentemente lo smartphone una pagina e un sito progettati per una visualizzazione sui più ampi display dei vecchi computer desktop, che sarebbe inevitabilmente difficile da caricare, da usare e da leggere, determinando frustrazione e cattiva esperienza.

E non è neanche più vantaggioso percorrere la strada del design adattivo (adaptive design), che fornisce più versioni completamente diverse della stessa pagina in base al dispositivo da cui proviene la richiesta: oggi i device sono sempre più numerosi e differenti, e questo comporta ovviamente un aumento dei carichi del lavoro di ottimizzazione.

Visti i volumi di traffico – anche per i motori di ricerca gli utenti mobile rappresentano la prima fonte di traffico e query – non possiamo limitarci a progettare per un singolo dispositivo (o disperdere tempo e risorse nello sviluppare diverse versioni per diversi device), ma è più utile sfruttare i vantaggi del design responsive e creare un sito reattivo, strutturalmente e visivamente.

Sono molte le statistiche che mostrano (e dimostrano) che la reattività produce un’esperienza utente migliore, ma forse il dato più interessante è ancora quello rivelato da Google ormai più di un decennio fa: il 61% degli utenti prevede di non tornare più su un sito Web non mobile-friendly e senza responsive layout, e oggi probabilmente la percentuale sarebbe ancora maggiore (a tutto vantaggio dei diretti competitor, pronti ad accogliere questi visitatori “insperati”).

Le differenze tra sito responsive e sito mobile-friendly

Per le sue caratteristiche, il responsive web design prevede l’utilizzo dello stesso URL e dello stesso codice per la pagina, e dunque il webmaster può gestire un’unica versione del sito anziché due (come capita invece per le versione per dispositivi mobili su URL separati). Una possibile alternativa, ma meno efficace, è il web design adaptive: in questo caso, uno script sul web server consente di riconoscere il dispositivo utilizzato dall’utente e dunque trasforma il sito nella “miglior versione”, eliminando immagini o testo per velocizzare il tempo di caricamento. In pratica, un sito adaptive ha più template per fornire una risposta diversa a ogni device, ma questo significa che non è in grado di predire i cambiamenti tecnologici (come nel passaggio da smartphone con display piccoli a quelli odierni, con la fase intermedia del notch che è stato di tendenza per alcuni anni, ad esempio).

Anche per questo, secondo molti esperti impostare un sito responsive significa andare un passo oltre al semplice sito mobile friendly: ottimizzato per i dispositivi mobili significa “vedere” le stesse informazioni dal desktop e da dispositivo mobile, mentre invece mobile-responsive significa “sperimentare” le stesse informazioni da desktop o da dispositivo mobile.

Questo perché i siti Web mobile-responsive sono pagine che sono state riformattate per riprodurre ciò che si verifica sul desktop: anziché ridurre tutto, gli elementi cliccabili e le immagini vengono ridimensionati e riformattati, in modo da salvaguardare anche l’esperienza dell’utente quando si passa da una visualizzazione verticale a una visualizzazione orizzontale.

Le tecniche per impostare un sito responsive

Dal punto di vista tecnico, il responsive design si basa su un modello di impaginazione grafica che usa griglie a proporzioni fluide e struttura (anche di menu) e immagini flessibili. Più precisamente, un sito responsive deve seguire tre principi fondamentali, come ben messo in luce da questo articolo di Interaction Design Foundation:

• Sistema a griglia fluida

I sistemi a griglia sono ausili che i progettisti utilizzano per costruire, progettare, organizzare le informazioni e creare esperienze utente coerenti: nell’interaction design, sono i tipi di griglie più utilizzati sono multi-colonna, gerarchica e modulare.

Il principio di una griglia è semplice: ogni elemento occupa la stessa percentuale di spazio, per quanto grande o piccolo diventi lo schermo, il che significa che i componenti possono essere scalati in alto o in basso mentre l’utente cambia dispositivo, e quindi il contenuto riempie lo spazio disponibile a seconda delle dimensioni del dispositivo.

• Immagini fluide

Nel design reattivo, le immagini fluide sono quelle che si ridimensionano per adattarsi al loro contenitore: quando il browser raggiunge un breakpoint, l’immagine si scala fino alla dimensione della finestra corrente. Per le immagini non fotografiche, come le icone, si suggerisce l’utilizzo dei file SVG, un formato leggero e capace di ridimensionarsi a qualsiasi risoluzione senza perdere la qualità.

• Media query e breakpoint

Le media query sono filtri che rilevano le dimensioni del dispositivo di navigazione e fanno apparire il design appropriato indipendentemente dalle dimensioni dello schermo. Per aiutare le media query, dobbiamo impostare dei breakpoint o punti di interruzione, ovvero valori in cui il contenuto del sito web verrà riorganizzato per fornire all’utente la migliore esperienza possibile.

Media query e breakpoint vanno di pari passo ed entrambi possono essere definiti nei fogli di stile CSS: per i progettisti, un punto di interruzione è un confine in cui il progetto cambierà per adattare le funzionalità alle nuove dimensioni. Di solito, i designer utilizzano tre dimensioni durante la progettazione di siti Web reattivi: 1024 e superiori, 1023-768 e 767-320 pixel.

Un effetto concreto è la riorganizzazione del posizionamento delle colonne in base allo spazio disponibile sullo schermo: ad esempio, possiamo decidere di mostrare un contenuto a una colonna sullo smartphone, due sul tablet e tre sul desktop.

Le media query funzionano meglio con un approccio “mobile first”, ovvero definendo prioritariamente ciò che desideriamo mostrare sui dispositivi mobili e poi eseguire la scalabilità da lì, testando il contenuto per vedere dove si verificano i punti di interruzione e pianificarli.

Responsive web design, 7 vantaggi per i siti

Queste informazioni dovrebbero bastare a spingerci a dare la priorità all’esperienza Web dell’utente e optare per un design più reattivo sui nostri siti, e come ci suggerisce Alex Valencia ci sono però almeno altri 7 benefici SEO che derivano dall’adozione del Responsive Web Design.

Questi consigli valgono per la stragrande maggioranza dei siti, e in particolare dovrebbero essere un must se il nostro modello di business prevede di guadagnare pubblico attraverso il sito o blog, usa corposamente immagini, ha una piattaforma di e-commerce per vendere prodotti e servizi o integra software di pianificazione come app di consegna o prenotazioni da calendario.

1. User experience

La missione di Google è “organizzare le informazioni del mondo e renderle universalmente accessibili e utili”, come abbiamo detto varie volte, e più precisamente questa filosofia si concretizza nel mostrare agli utenti i contenuti a cui sono più interessati e che intercettino il loro intent, rendendoli perciò soddisfatti.

Un web design reattivo è essenziale per creare un’esperienza positiva per gli utenti, che possono più facilmente diventare così abbonati, lead e clienti paganti; inoltre, soprattutto dopo la partenza del Page Experience, creare un’esperienza incentrata sull’utente e lavorare sulle prestazioni tecniche delle pagine a prescindere dal dispositivo può avere effetti positivi anche sul ranking nei risultati di ricerca.

2. Velocità delle pagine

Più precisamente, in termini di performance un sito responsivo e mobile-friendly in genere si carica più velocemente su dispositivi mobili e anche su desktop, con effetti positivi su traffico e conversioni.

Migliorare la velocità della pagina è, come noto, un altro fattore che influisce notevolmente sulla SEO e quindi sui posizionamenti nella ricerca: un sito con bassa velocità di caricamento del tuo sito Web può distruggere l’esperienza di un utente e spingerlo a scegliere di completare la sua journey sulle pagine di un concorrente.

Inoltre, come si legge nella guida di Google il design responsive “non richiede alcun reindirizzamento per offrire agli utenti una visualizzazione ottimizzata in base al dispositivo in uso e riduce quindi il tempo di caricamento”. Allo stesso tempo, riduce i rischi legati al reindirizzamento basato su user-agent, che è soggetto a errori e può peggiorare l’esperienza utente con il sito.

3. Usabilità

Il responsive design rende i siti più accessibili, veloci e facili da navigare: agevola quindi il compito degli utenti, che trovano le informazioni che stanno cercando prima e in maniera più immediata, e in genere li incoraggia a rimanere più tempo sul sito. Inoltre, assicurare una buona usabilità potrebbe incoraggiare gli utenti a tornare sul sito in futuro.

Il tempo trascorso sulla pagina può essere un’indicazione importante del fatto che i contenuti corrispondono a ciò che l’utente sta cercando e che questa persona ha avuto un impatto positivo con il sito: un utente insoddisfatto dei contenuti o dell’esperienza fornita dalla navigazione e dal layout, infatti, resta con minore probabilità sulla pagina. Non meno importante, non aumenta solo il tempo trascorso sulle pagine, ma anche la probabilità che l’utente si converta e si trasformi in clienti paganti o abbonati.

Dal punto di vista dei tassi di conversione, guidare in modo fluido un cliente nel funnel di vendita può migliorare la sua esperienza e rimuovere i possibili ostacoli che intervengono nelle transizioni tra le varie fasi, causate da un cattivo design mobile o da problemi di usabilità e navigazione.

4. Bounce rate

Come diretta conseguenza positiva del trattenere maggiormente gli utenti abbiamo la riduzione del bounce rate o frequenza di rimbalzo, espressione che si riferisce alla velocità con cui gli utenti visitano e poi lasciano immediatamente una pagina.

Questa metrica può essere un’indicazione sul fatto che un sito soddisfi (o meno) la ricerca dell’utente, e quando il valore è elevato ci può indicare che il sito non si è caricato rapidamente o non ha fornito l’esperienza positiva che gli utenti stavano cercando.

Il bounce rate non dipende solo dai contenuti, che possono essere fantastici, ma se non supportati da un web design che rende semplice la navigazione nel sito il rischio è che gli utenti abbandonino la pagina e cerchino informazioni altrove. Piuttosto intuitivamente, se un utente da smartphone, tablet o altri device mobili sono costretti ad attendere dieci secondi per il caricamento di una pagina, usciranno rapidamente dalla scheda, provocando un rimbalzo dal sito Web, rivolgendosi peraltro un sito Web competitor – aggiungendo quindi il danno alla beffa.

5. Mobile-first indexing di Google

È da anni che Google si sta spostando verso un approccio “mobile-first” al suo Indice e già dal 2019 l’indicizzazione mobile first è abilitata come impostazione predefinita per tutti i nuovi contenuti di siti Web scoperti da Googlebot.

In generale, poi, il motore di ricerca tende a fornire agli utenti contenuti di valore e accessibili, e può prediligere i siti ottimizzati per i dispositivi mobili che abbiano adottato un design Web responsive, così da accontentare le esigenze del numero sempre maggiore di utenti che effettuano ricerche da dispositivi mobili e che quindi vogliono visitare pagine adeguate, reattive e user-friendly.

Sempre in ottica Google, implementare pagine responsive web design consente di risparmiare risorse quando Googlebot esegue la scansione del sito – in pratica, di risparmiare crawl budget: il recupero di tutte le versioni dei contenuti richiede infatti una sola scansione di un solo user-agent Googlebot, anziché più scansioni di user-agent Googlebot diversi. Indirettamente, spiega sempre la documentazione di Mountain View, grazie a questa maggiore efficienza di scansione Google è in grado di indicizzare un numero maggiore di contenuti del sito e di mantenerli debitamente aggiornati.

6. Contenuti duplicati

Come effetto collaterale positivo del lavoro prioritario sulla responsiveness del sito c’è l’attenzione anche ai contenuti e alla UX in generale, che può portare a evitare di cadere nel frequente errore dei contenuti duplicati.

Una delle cause di questo problema, infatti, è la presenza di versioni separate delle pagine desktop e mobile create accidentalmente: gli URL sono fisicamente differenti, ma puntano allo stesso contenuto identico, e questo può confondere Google nel decidere a quale contenuto dare la priorità.

Seguendo le best practices di responsive web design invece possiamo creare un’unica versione responsiva delle pagine, servite in maniera immediata e univoca per dispositivi , e quindi prevenire la duplicazione degli URL su due versioni del sito.

7. Condivisioni social

Un sito Web reattivo consente agli utenti di interagire facilmente con le pagine, godersi a fondo i contenuti e quindi condividerli con maggiori probabilità sui social media, aumentando quindi le fonti di traffico e il pubblico online e, potenzialmente, rafforzando la visibilità del brand e del sito.

Molti responsive web designer creano siti pensando già in partenza alle funzionalità di condivisione sui social per consentire agli utenti di condividere facilmente i contenuti in lungo e in largo: con pulsanti facili da usare e ben visibili su ogni dispositivo, un sito mobile-ready incoraggia gli utenti a condividere i contenuti e li spinge verso un pubblico molto più ampio.

I benefici del design responsive per un sito

Appare chiaro, in definitiva, che stabilire una strategia mobile-friendly come base del design o di una riprogettazione del sito può rappresentare una leva per il successo.

Un design responsivo mette gli utenti al primo posto, consente loro di interagire facilmente con il sito e segnala immediatamente a Google che le pagine sono adatte alla visualizzazione su qualsiasi dispositivo, grazie a una struttura facilmente accessibile e ben ragionata.
Si tratta quindi di andare oltre ai principi di mobile-readiness e di valutare la possibilità di implementare il design reattivo e intuitivo, impostando una solida struttura che può aiutare il sito a raggiungere il successo SEO che desideriamo.

Come descritto, i potenziali benefici di questo approccio riguardano:

• L’incremento di traffico, con la possibilità di raggiungere un pubblico più ampio, vista la quota predominante di persone che accede al Web da mobile.
• Risparmio di tempo e sforzi di sviluppo, poiché designer e sviluppatori si possono concentrare e lavorare solo su una versione del progetto.
• Valorizzazione del brand, garantendo la coerenza del marchio e del design su tutti i dispositivi.
• Ottimizzazione SEO, poiché i motori di ricerca prediligono i siti mobile-friendly.

Ciò deriva dalle caratteristiche stesse del design responsive, che è robusto ed economico, anche se non dobbiamo farci ingannare dalla sua natura facile, perché ci sono alcune difficoltà e problemi in cui possiamo incappare se lo utilizziamo senza cautela. Ad esempio, potrebbe limitare il nostro controllo sulle dimensioni dello schermo del design, e gli elementi in pagina potrebbero spostarsi in modo indipendente se non impostiamo correttamente le media query in anticipo, oppure potrebbero sorgere criticità con i formati pubblicitari, in particolare sui dispositivi mobili.

Ciò nonostante, il design responsive resta una risorsa cruciale per avere una buona UX poiché, per impostazione predefinita, richiede uniformità, continuità e semplicità negli sforzi di progettazione. Inoltre, è SEO-friendly e i molteplici CMS e framework, come WordPress e Bootstrap, lo rendono molto economico da implementare.