Guida per Principianti al Responsive Web Design
Indice
- Cos'è il responsive design?
- Cos'è un sito web responsive?
- Perché è importante avere un sito responsive?
- Come rendere responsive il tuo sito web
- Vantaggi del sito Web responsive
- Strumenti per testare se il sito web è responsive
- Il responsive web design: conclusioni
Cos'è il responsive design?
Il responsive design è una tecnica di web design che prevede la realizzazione di siti reattivi, il cui layout si adatta in automatico al dispositivo di visualizzazione, desktop, tablet o dispositivo mobile, in modo che la lettura non richieda ridimensionamenti, ingrandimenti e scorrimenti, o che li riduca al minimo, senza diminuire la qualità visiva e garantendo la leggibilità.
Il design responsive non va confuso con l'adaptive design. Infatti, nel responsive web design (RWD), ogni pagina o articolo del sito o del blog ha un unico url, a cui appare il sito con la stessa veste grafica, ma con larghezza e proporzioni compatibili alle dimensioni dello schermo del device da cui si sta visualizzando il sito. Invece, con l'adaptive web design, quando un utente entra nel sito, viene rilevato il dispositivo da cui sta accedendo e il sito appare nella versione migliore per quel dipositivo: esistono quindi più template, in modo da fornire la risposta migliore per ogni device, ma spesso non sono in grado di soddisfare la visualizzazione da dispositivi di nuova generazione o con dimensioni dello schermo intermedie.
Per concludere, il responsive web design adatta il rendering di una sola versione di una pagina a tutti i dispositivi, mentre l'adaptive web design fornisce versioni diverse per ogni dispositivo.
Quindi, non si deve pensare che il responsive design sia solo un modo per avere una versione mobile-friendly. Progettare un sito col responsive web design è concettualmente molto diverso rispetto al progettarlo con l'adaptive design: è un particolare tipo di approccio allo sviluppo dei siti internet, olistico e concepito per fornire un'esperienza utente coerente e immersiva.
Cos'è un sito web responsive?
Cosa significa sito responsive? Innanzitutto, la responsiveness (o reattività, in italiano) è la capacità di reagire alle potenzialità del display dei diversi dispositivi mobile e non, facilitando l'usabilità. A volte, potrebbero esserci delle differenze di visualizzazione da un dispositivo all'altro (ad esempio due colonne da pc e una da mobile), ma è garantita una coerenza dei contenuti.
Anche i motori di ricerca apprezzano il responsive web design, tanto che Google lo definisce “il modello di progettazione più semplice da implementare e gestire”. Oltre che una migliore user experience, i siti web responsive sono molto più veloci, e tengono conto delle esigenze di accessibilità degli utenti diversamente abili.
I siti con un design responsive sono accessibili e comodi con qualsiasi dispositivo si acceda, dal desktop al cellulare, dal tablet allo smartwatch, dalle smart tv e persino da alcune console da gioco. Chi progetterà il sito dovrà, quindi, tenere presente che molti utenti useranno il sistema touchscreen per interagire col sito internet.
Perché è importante avere un sito responsive?
In passato i siti web erano statici, e si dava massima cura a come un sito web veniva visualizzato dal monitor del computer. Oggi dobbiamo tener conto del fatto che la maggior parte del traffico, ben oltre il 50%, non avviene da pc, e questa percentuale cresce se parliamo degli accessi tramite motore di ricerca.
A confermare questa tendenza ci sono anche gli investimenti pubblicitari sul mobile, sempre più consistenti (hanno raggiunto i 91 miliardi di dollari). La pubblicità su mobile permette una maggiore targettizzazione, perché capta le persone che gravitano nella tua zona. Per chi desidera sfruttare questo canale di visibilità, il sito responsive diventa un must have.
Avere un responsive site non è solo un modo di permettere un comodo accesso qualunque sia il dispositivo utilizzato dall'utente, ma anche un modo di migliorare il posizionamento SEO dei proprio sito.
Innanzitutto, moltissimi utenti oggi preferiscono accedere da dispositivi mobile o addirittura usano solo quelli, e un sito senza responsive design perderebbe quindi una grandissima fetta di traffico, poiché molte persone, senza una versione mobile confortevole, smetterebbero di visitare il sito, allontanati da una cattiva user experience. Sappiamo già che anche un design adattivo potrebbe catturare questa fetta di mercato, ma avere tante versioni molto diverse della stessa pagina disperde le energie di ottimizzazione e progettazione.
I siti responsive piacciono moltissimo ai motori di ricerca e ci sono statistiche che lo dimostrano. Infatti, già una decina di anni fa, il 61% degli utenti dichiarava di non voler tornare su un sito visitato non mobile-friendly e senza un design responsivo. Inoltre, poiché Google esegue la scansione del sito Web principalmente con GoogleBot per smartphone, è importante assicurarsi che la pagina sia ottimizzata per i dispositivi mobile.
Come rendere responsive il tuo sito web
Per rendere un sito responsive, bisogna utilizzare una particolare impaginazione grafica, che utilizza alcuni importanti princìpi. Ecco una panoramica degli elementi più importanti che contraddistinguono il responsive web design.
Layout responsive e sistemi a griglia
I sistemi a griglia sono strumenti che i web designer utilizzano per progettare il contenitore delle informazioni. Vi sono vari tipi di griglia:
- modulare
- gerarchica
- multicolonna
Il web design di un sito che utilizza la griglia si basa su un principio: ogni elemento occupa la stessa percentuale di spazio su ogni dispositivo e viene reimpaginato per occupare lo spazio qualsiasi siano le dimensioni dello schermo.
Non si tratta di scalare e basta: scalare il contenuto, oltre che limitare la leggibilità, è l'esatto contrario di "pensare responsive".
In passato, quando si progettava una tabella, si inserivano i pixel che ne definivano la larghezza: oggi si definiscono le percentuali delle colonne. Questa caratteristica è presente in un layout fluido, anche se alcuni sviluppatori sono andati ancora oltre, utilizzando o creando layout flexbox, maggiormente dinamici e flessibili nel riempire lo spazio "giustificando" il contenuto.
Esistono cinque modelli di layout responsive:
- Modello "Mostly fluid": è un layout molto diffuso che scala le foto e impila le colonne quando la larghezza diminuisce.
- Schema "Culumn drop": è un modello che "perde" progressivamente le colonne man mano che lo schermo si restringe.
- Layout "Shifter": è un sistema dotato di grande adattabilità, che utilizza layout diversi e massima reattività, ma richiede un grande sforzo di progettazione e una gestione dei contenuti complessa, e per questi motivi è poco utilizzato.
- Modello "Off canvas": sfrutta lo spazio esterno allo schermo per nasconderlo quando ci si trova in un dispositivo dallo schermo piccolo. Il contenuto riappare sui dispositivi a schermo ampio.
- Sistema "a Lista": questo layout organizza i testi in un numero di colonne compatibile alla larghezza dello schermo in cui viene visualizzato.
Immagini scalabili/responsive
I siti che si basano sul responsive design utilizzano soprattutto immagini non fotografiche in formato SVG, perché questo formato leggero e vettoriale permette di raggiungere la dimensione ottimale per il dispositivo usato senza alcuna perdita di qualità.
Media query per definire i punti di interruzione, dal mobile alla web tv
Le media query sono sistemi che rilevano il tipo di dispositivo che sta accedendo al sito per fornire la risposta migliore. Ci sono dei breakpoint (chiamati anche resolution breakpoint), in italiano punti di interruzione, che rappresentano un confine tra una versione e l'altra e che sono indicati nei fogli di stile CSS del sito.
Quando questi punti vengono attraversati, il layout cambia: alcuni elementi vengono "scalati", alcune colonne cambiano posizione e la font size cambia.
I breakpoint si basano sulle dimensioni dello schermo più comuni. Ecco alcuni esempi:
- Mobile: 360 x 640
- Mobile: 375 x 667
- Mobile: 360 x 720
- iPhone X: 375 x 812
- Pixel 2: 411 x 731
- Tablet: 768 x 1024
- Laptop: 1366 x 768
- Laptop o desktop HD: 1920 x 1080
Vantaggi del sito Web responsive
Facciamo un riepilogo dei vantaggi di avere un sito web dotato di responsive design. Questi punti sono particolarmente importanti per siti che ospitano molte immagini, per gli e-commerce e per siti che integrano software di pianificazione, perché ne migliorano notevolmente la funzionalità.
Velocità e tempo di caricamento della pagina
Uno dei più grandi vantaggi del responsive web design è la velocità che dona alle pagine: il sito si carica molto più velocemente, sia da computer, sia da tablet, sia da smartphone o da web tv, aumentando le conversioni.
La velocità del sito influisce positivamente anche e soprattutto sulla SEO. Rispetto al design adattivo, non è inoltre richiesto un reindirizzamento alla versione dedicata al dispositivo utilizzato, e questo rende tutto più agile e veloce.
Una scelta fatta in alcuni casi è quella di AMP (Accelerated Mobile Pages), che, su wordpress, si installa con un semplice plugin e il cui corretto funzionamento può essere monitorato tramite la Search Console.
Migliore User Experience
Google mette al primo posto l'utilità e l'accessibilità delle informazioni, perché il motore di ricerca deve fare in modo di rendere soddisfatti gli utenti intercettando il loro intento di ricerca. Questo è più facile se la pagina utilizza il responsive web design, creando un'esperienza di navigazione che mette al centro l'utente.
Usabilità
La velocità e l'accessibilità generano una migliore usabilità, che favorisce la permanenza degli utenti sulle pagine del sito e il loro ritorno in futuro. Il maggior tempo trascorso sul sito è un fattore che favorisce la SEO e la possibilità di conversioni, perché più è il tempo trascorso in una pagina, più è facile che l'utente prosegua nel suo customer journey e compia le azioni previste da chi ha progettato il sito: infatti, gli ostacoli, come una cattiva leggibilità, dovuto a un sito non reattivo, scoraggiano l'utente e lo allontanano dal funnel di vendita.
Bassa frequenza di rimbalzo
Così come il responsive web design aumenta il tempo trascorso sulla pagina, allo stesso modo fa diminuire la frequenza di rimbalzo (bounce rate, la rapidità con cui l'utente lascia il sito e "rimbalza" altrove). Una navigazione semplice e veloce spinge l'utente a rimanere.
Approccio "mobile first!"
Il responsive web design mette al primo posto il mobile, andando incontro ad uno dei più importanti valori che Google ha indicato nel 2019: il mobile first indexing. Rispetto all'adaptive design, che genera tante diverse versioni, il responsive web design fa risparmiare crawl budget ai motori di ricerca, perché non è necessario indicizzare contenuti con url diverse, visto che per ogni contenuto esiste un'unica url.
Va ricordato che, tendenzialmente, tutto ciò che piace agli utenti piace anche ai motori di ricerca, ed è per questo che bisognerebbe investire sulla mobile optimization, proprio per avere i vantaggi di una corretta visualizzazione mobile responsive.
Assenza di contenuti duplicati
Come già accennato, essendo presenti URL univoche per tutti i dispositivi, Google non rileva contenuti duplicati, uno dei fattori meno amati dai motori di ricerca
Aumento delle condivisioni sui social network
Una fruizione migliore favorisce le condivisioni sui social media. Inoltre, il web design responsivo di solito prevede già dei comodi pulsanti che permettono la condivisione, qualsiasi sia il dispositivo da cui si sta visitando il sito.
Maggiore visibilità sui motori di ricerca
Una ricerca di Semrush afferma che solo il 11% dei siti hanno la stessa posizione nella ricerca da mobile e in quella da desktop. Il 30% dei siti in prima pagina, siti web poco o per niente "mobile friendly", finisce nelle pagine successive se cercato da un dispositivo mobile.
Strumenti per testare se il sito web è responsive
Quando si crea un sito responsive bisogna fare dei test per assicurarsi che il contenuto si presenti in modo armonico su tutti i device. Uno dei metodi più diretti è la verifica tramite accesso da vari dispositivi. Un altro metodo è utilizzare alcune funzioni speciali presenti in molti browser, come ad esempio Google Chrome e Mozilla Firefox, che permettono di usare la funzione "ispeziona" usando il pulsante F12 o il tasto destro e la relativa voce per visualizzare come il sito verrebbe visto da tablet, da smartphone, da computer, a seconda di come cambiano le dimensioni dello schermo.
Per blogger e giornalisti che utilizzano wordpress ma con temi predefiniti, può essere utile sapere che i temi recenti di wordpress sono tutti responsive, ma a volte non lo si percepisce, soprattutto se sono temi a una colonna, e quindi sembrano simili su desktop e dispositivi mobili.
Possono essere utilizzati strumenti interessanti come Chrome Developer Tools, che permette di testare il vostro sito "simulando" varie dimensioni dello schermo. Per utilizzare questo strumento, è sufficiente premere CTRL + Shift + I su Windows, o Command + Option + I su Mac. A questo punto è necessario verificare la grandezza dei font, il numero di colonne su ogni dispositivo e come gli elementi del layout si armonizzano su ogni dispositivo. La tipografia reattiva non va sottovalutata, perché una corretta visualizzazione e lettura dei testi è fondamentale per la user experience e questi tool aiutano ad individuare i font sproporzionati.
Un'altra possibilità è il test mobile-friendly di Google, che richiede semplicemente di inserire la URL per verificare. Altri strumenti significativi per verificare se il web design di un sito è responsive sono Google Lighthouse, un tool gratuito, fornito da Google, per monitorare ed ottimizzare la velocità e reattività del proprio sito web, oltre che la user experience, e Pagespeed Insights, uno strumento che attribuisce a un sito web un punteggio da zero a cento per testare la responsiveness, la velocità e l'esperienza di navigazione.
Questi strumenti possono essere usati in tandem per assicurarsi della qualità del proprio sito web o per monitorare la concorrenza allo scopo di rendersi maggiormente competitivi e rendere più performante il proprio sito.
Il responsive web design: conclusioni
Ricapitolando, il responsive web design mette al primo posto l'utente e la sua esperienza di navigazione. I vantaggi per chi adotta questa tecnologia sono i seguenti:
- maggior traffico e un maggior pubblico raggiunto
- risparmio nello sviluppo perché il progetto ha un'unica versione per tutti i device
- coerenza del marchio, che si presenta allo stesso modo su tutti i dispositivi
- ottimizzazione seo
Per concludere, il responsive web design è ormai una necessità per ogni sito web che si rispetti: è la base per avere risultati su ogni piattaforma in cui il sito verrà visualizzato, adattandosi a tutti gli schermi e a tutte le risoluzioni, dalla web tv allo smartphone, dal pc al tablet, rendendo leggibile il testo e fruibili i contenuti e le immagini, riducendo al minimo i problemi, riposizionando gli elementi e consentendo un'esperienza di navigazione di qualità.