Quando un sito web è responsive
Per spiegare cosa si intende con “sito web responsive”, o responsivo se vogliamo ricorrere all’espressione italiana, potremmo farlo utilizzando una famosa metafora di Josh Clarke, fondatore del CMS Big Medium, piattaforma di gestione contenuti molto famosa in America:
Content is like water. You put water into a cup, it becomes the cup. You put water into a bottle, it becomes the bottle. You put it in a teapot, it becomes the teapot.
Ecco, proprio come l’acqua, che assume la forma di qualsiasi contenitore in cui viene versata, allo stesso modo un sito web si definisce responsive quando è costruito con dei contenuti dinamici che cambiano automaticamente a seconda della risoluzione dello schermo su cui vengono visualizzati.
Un sito web è responsive, quindi, quando viene sviluppato sulla base di un template che cambia le modalità in cui vengono presentati i contenuti. Per questo motivo, infatti, la versione di un sito web consultata su uno smartphone può essere molto diversa da quella desktop. Viene mantenuto lo stesso design grafico, gli stessi colori e lo stesso font, ma tutto viene “semplificato” secondo un’interfaccia più chiara e immediata, definita, appunto, “mobile friendly”.
Il responsive può essere definito a tutti gli effetti come una tecnica di progettazione di un sito web, grazie alla quale ogni elemento della pagina si adatta automaticamente per essere correttamente visualizzato su qualsiasi dispositivo.
Ecco quindi che in un sito web responsive, la modalità di visualizzazione su desktop cambia significativamente rispetto a quella su uno smartphone, o un tablet. Vediamo un esempio:
- Prendiamo in considerazione il sito web marmomac.com, questa è la classica homepage che ti troverai di fronte da desktop:
- Consultiamo ora la stessa pagina, ma da uno smartphone. Ecco che tutto viene “compresso” e ridimensionato per adattarsi perfettamente al display di un telefono, nettamente più piccolo e con un risoluzione completamente diversa:
- Ripetiamo lo stesso esperimento anche da un tablet. Ecco che i contenuti cambieranno layout ancora una volta:
È importante non confondere il concetto di sito web responsive, con quello di sito web “adaptive”. Un sito responsive, infatti non è la versione mobile di un sito desktop: il sito è sempre uno, quello che cambia è il modo di presentare i contenuti. Quando parliamo di adaptive web design, invece, facciamo riferimento ad uno script sul web server che riconosce il dispositivo da cui ci si sta collegando e viene data, in risposta, la migliore versione del sito web stesso.
Nel caso quindi del sito adaptive vengono creati più template in modo da avere una risposta diversa per ogni device. In un sito web responsive, invece, il template è sempre lo stesso, ma capace di modificarsi a seconda del dispositivo utilizzato.
Ed è proprio in quest’ultima differenza che risiede il punto debole dell’adaptive design. Se nei prossimi anni dovessero uscire nuove tipologie di dispositivi, i siti web adaptive non saranno in grado di adattarsi e sarà necessario creare una nuova versione per ciascuna novità. Ecco, quindi, che in periodo come quello attuale, dove la tecnologia evolve ogni giorno sempre più, è importante avere una struttura web versatile, che sia in grado di restare al passo coi tempi anche nel lungo termine, e il responsive risponde perfettamente a questa esigenza.
Quali sono gli elementi che rendono un sito web responsive?
Verificare se il tuo sito web è responsive è più semplice di quanto potresti pensare! Puoi fare questo semplice “test” direttamente dal tuo pc: apri il tuo sito web, e attraverso il cursore riduci le dimensioni della finestra a tuo piacimento. Se il sito è responsive, vedrai che tutti i contenuti delle pagine si spostano, si ridimensionano e si adattano immediatamente ai cambiamenti di risoluzione della schermata.
Ma quali sono gli elementi che rendono possibile tutto questo? Quali caratteristiche deve avere un sito web responsive? Prendiamo ad esempio due siti web, globo.it e perlinidumpers.it, gli elementi essenziali per un sito responsive sono:
- Dimensione del testo abbondante, e contenuti essenziali per permettere una visibilità ottimale a qualsiasi risoluzione.
- Elementi selezionabili come link, bottoni e CTA devono essere ben distanziati tra loro: la navigazione su uno schermo touch deve essere semplice e immediata.
- Menù “hamburger”, ovvero identificato da tre linee sovrapposte (come un panino e i suoi strati di farcitura).
Se il tuo sito soddisfa tutte queste tre condizioni essenziali, allora è perfettamente responsivo!
Ora che hai scoperto come funziona un sito web responsive, potresti perdere ore a “giocare” con il cursore modificando le dimensioni della pagina per vedere cosa succede. Ma al di là di questo, perché il responsive è così importante per il tuo sito web? Concentriamoci su questa domanda!
Sito responsive: un requisito fondamentale nell’ottimizzazione SEO
Realizzare un sito in ottica responsive è una strategia efficace sotto molteplici punti di vista:
- È un requisito fondamentale per la navigazione da dispositivi mobili, sempre più diffusi e utilizzati per consultare un sito web, che diventa in questo modo più interessante rispetto ad altri siti concorrenti.
- È una dimostrazione di attenzione e cura all’esperienza di navigazione dell’utente.
- Permette di risparmiare tempo e costi per la gestione dei contenuti. Un sito responsive, a differenza di uno adaptive, non presenta una versione dedicata per ogni singolo dispositivo, ma sono gli stessi contenuti che si adattano ai cambiamenti di risoluzione.
- È un requisito sempre più importante in termini SEO.
Proprio su quest’ultimo vantaggio vogliamo soffermare la nostra attenzione. Negli ultimi anni si parla sempre più di frequente di “mobile-only indexing”, ossia i software deputati all’analisi dell’indicizzazione SEO delle pagine dei siti sono sempre più attenti e danno priorità ai contenuti ottimizzati per il mobile. Questo significa che un sito ben ottimizzato, responsive appunto, ha una maggiore probabilità di raggiungere un posizionamento organico più alto nella SERP rispetto ad un sito realizzato unicamente per dispositivi fissi. La motivazione di questo cambiamento sta nelle nuove tendenze di navigazione da parte degli utenti con cui abbiamo aperto questo articolo: oltre la metà consulta siti internet da dispositivi mobili, di conseguenza, solo quelli responsive ottengono un ranking elevato e vengono premiati in termini SEO.
La mobile-only indexing rappresenta, quindi, l’obiettivo principale a cui ambire nella progettazione e realizzazione del tuo sito web. Soltanto quei siti che offrono una user experience avanzata e responsiva saranno in grado di ottenere risultati sempre più soddisfacenti, in linea anche con gli obiettivi e le strategie individuate in fase di SEO audit.
In conclusione, se è vero che “i contenuti sono come l’acqua”, e devono essere in grado di adattarsi a qualsiasi dispositivo in maniera dinamica, parlando sempre in senso metaforico, è altrettanto valido anche il famoso proverbio “la classe non è acqua”. Ecco, il responsive rappresenta a pieno titolo quel tocco di classe, quel valore aggiunto che deve stare alla base dell’intero lavoro di studio, disegno e realizzazione del tuo sito web.
*¹Risultati estrapolati dall’analisi sull’utilizzo dello smartphone condotta da statista.com
