Cos'è il Responsive Web Design
Il Responsive Web Design è un approccio alla progettazione che permette a un sito web di adattarsi alle diverse dimensioni dello schermo, offrendo una navigazione efficace su computer, tablet e smartphone.
Non significa semplicemente ridurre una pagina desktop fino a farla entrare nello schermo di un telefono. Un sito realmente responsive deve riorganizzare contenuti, spazi, immagini, menu e altri elementi in funzione dello spazio disponibile.
L'obiettivo è permettere all'utente di utilizzare il sito comodamente indipendentemente dal dispositivo scelto.
Perché il Responsive Web Design è necessario
Le pagine web vengono visualizzate su schermi con dimensioni e proporzioni molto differenti.
Un layout progettato esclusivamente per un monitor desktop può diventare difficile da utilizzare su smartphone: testi troppo piccoli, elementi che escono dallo schermo, pulsanti difficili da selezionare e continui spostamenti orizzontali.
Il Responsive Web Design permette di evitare questi problemi progettando il comportamento della pagina anche per gli schermi più piccoli.
Non basta che il sito entri nello schermo
Un sito può tecnicamente adattarsi alla larghezza dello smartphone e offrire comunque una pessima esperienza.
Se i caratteri sono troppo piccoli, i pulsanti troppo vicini, il menu difficile da utilizzare o i contenuti disposti male, la pagina non è stata realmente progettata per il mobile.
Responsive significa rendere il contenuto utilizzabile, non semplicemente visibile.
Un layout che cambia in base allo spazio disponibile
Su un monitor ampio è possibile disporre più elementi uno accanto all'altro. Su uno smartphone la stessa disposizione potrebbe non avere più senso.
La stessa pagina deve rimanere semplice anche quando cambia lo spazio.
Colonne affiancate possono quindi diventare elementi disposti verticalmente, immagini e testi possono cambiare dimensione e alcune parti dell'interfaccia possono assumere una disposizione differente.
Il contenuto rimane sostanzialmente lo stesso, ma cambia il modo in cui viene presentato.
Le media query
Uno degli strumenti fondamentali del Responsive Web Design sono le media query CSS.
Permettono di applicare determinate regole grafiche soltanto quando si verificano particolari condizioni, come una determinata larghezza dello schermo.
È possibile, ad esempio, modificare dimensioni dei caratteri, spaziature, disposizione degli elementi o comportamento del menu quando lo spazio disponibile diminuisce.
I breakpoint
I punti nei quali il layout cambia vengono comunemente chiamati breakpoint.
Non dovrebbero però essere scelti soltanto pensando a modelli specifici di smartphone o tablet.
È più utile osservare il comportamento del contenuto e intervenire quando la disposizione corrente smette di funzionare correttamente.
In questo modo il progetto rimane più flessibile anche rispetto a dispositivi con dimensioni non previste inizialmente.
Testi leggibili anche su smartphone
La leggibilità è uno degli aspetti più importanti della progettazione responsive.
Dimensione dei caratteri, interlinea, lunghezza delle righe e spaziatura devono essere adeguate allo schermo.
Costringere l'utente a ingrandire continuamente la pagina per leggere significa aver perso uno degli obiettivi fondamentali del responsive design.
Menu e navigazione
Un menu orizzontale che funziona perfettamente su desktop potrebbe non avere spazio sufficiente su uno smartphone.
La navigazione deve quindi essere ripensata in funzione dello spazio disponibile, mantenendo comunque semplice l'accesso alle sezioni principali.
Il menu mobile non dovrebbe diventare un ostacolo: deve permettere di raggiungere rapidamente le informazioni esattamente come quello desktop.
Pulsanti e link devono essere facili da utilizzare
Su desktop utilizziamo un puntatore molto preciso. Su smartphone interagiamo direttamente con le dita.
Pulsanti, link e altri elementi interattivi devono quindi avere dimensioni e distanze sufficienti per poter essere selezionati comodamente senza premere accidentalmente un elemento vicino.
Questo migliora l'esperienza di navigazione e si collega direttamente anche ai principi dell'accessibilità web.
Le immagini devono essere responsive
Anche le immagini devono adattarsi correttamente alle dimensioni disponibili.
Un'immagine non dovrebbe uscire dal contenitore o costringere la pagina a diventare più larga dello schermo.
Ma adattarne semplicemente la larghezza non basta: è importante anche evitare di trasferire file inutilmente grandi quando vengono visualizzati su dispositivi più piccoli.
Responsive e velocità devono andare insieme
La navigazione mobile avviene spesso in condizioni molto differenti rispetto a quella desktop.
Un sito può essere utilizzato attraverso reti mobili, dispositivi meno potenti o connessioni non sempre ottimali.
Per questo Responsive Web Design e velocità del sito web dovrebbero essere affrontati insieme.
Responsive significa progettare lo spazio, non soltanto ridurlo.
Una pagina perfettamente adattata allo schermo ma molto lenta da caricare offre comunque un'esperienza mediocre.
Mobile first: cosa significa
Con l'espressione mobile first si indica un approccio nel quale la progettazione parte dalle condizioni e dagli spazi più limitati per poi evolvere verso schermi più grandi.
Questo costringe a stabilire fin dall'inizio quali siano i contenuti e le funzioni realmente importanti.
Non significa però che la versione desktop debba essere trascurata: entrambe devono essere progettate con attenzione.
Responsive non significa rendere tutto più piccolo
Questo è probabilmente uno degli errori più frequenti.
Ridurre proporzionalmente ogni elemento della versione desktop produce spesso testi minuscoli, pulsanti difficili da utilizzare e spazi insufficienti.
Su uno schermo piccolo alcuni elementi devono invece diventare relativamente più grandi, altri devono cambiare posizione e altri ancora possono richiedere una struttura differente.
Nascondere elementi su mobile: attenzione
In alcuni casi può essere utile semplificare l'interfaccia nascondendo elementi secondari, ma questa scelta deve essere effettuata con criterio.
Se un'informazione è importante per l'utente desktop, potrebbe esserlo altrettanto per chi utilizza uno smartphone.
Il responsive design dovrebbe quindi soprattutto riorganizzare e adattare, non eliminare indiscriminatamente i contenuti.
Come verificare se un sito è realmente responsive
Ridimensionare la finestra del browser è un primo controllo utile, ma non è sufficiente.
Il sito dovrebbe essere provato direttamente su smartphone e tablet, verificando menu, testi, pulsanti, immagini, moduli e tutte le principali interazioni.
È importante controllare diverse pagine e non soltanto la homepage, perché ogni tipologia di contenuto può presentare problemi differenti.
Responsive Web Design e SEO
La fruibilità da dispositivi mobili è importante anche per la presenza del sito nei motori di ricerca.
Una corretta progettazione responsive contribuisce a offrire pagine accessibili e utilizzabili sui dispositivi attraverso i quali oggi avviene una parte consistente della navigazione.
Va però ricordato che il responsive design rappresenta soltanto uno degli aspetti di un progetto ben costruito e non sostituisce contenuti, struttura e SEO tecnica.
Responsive fin dall'inizio, non alla fine
Adattare a posteriori un progetto pensato esclusivamente per desktop può obbligare a numerose correzioni.
Un buon sito non ha una dimensione preferita.
È preferibile considerare fin dall'inizio come testi, immagini, navigazione e componenti dovranno comportarsi al variare dello spazio disponibile.
Il responsive design diventa così una caratteristica della struttura e non una correzione applicata quando il sito è già terminato.
Un requisito di un sito professionale
Oggi considero il Responsive Web Design una caratteristica fondamentale di un sito web professionale.
Non dovrebbe essere presentato come una funzionalità aggiuntiva o un optional: fa parte della normale progettazione di un sito destinato a essere utilizzato su dispositivi differenti.
La qualità si vede su ogni schermo
Un sito dovrebbe mantenere chiarezza, leggibilità e semplicità di navigazione indipendentemente dalle dimensioni del dispositivo.
È uno degli aspetti che contribuiscono alla qualità complessiva di un sito web.
Un buon sito responsive non è una versione ridotta del sito desktop: è lo stesso progetto capace di adattarsi correttamente allo spazio in cui viene utilizzato.
