Cos'è il responsive web design e perché ne hai bisogno - Donato Margapoti Wed Designer e Front-end Developer

Iscriviti alla mia newsletter

Acconsento al trattamento dei miei dati personali in conformità al D.Lgs 196/2003. Leggi la Privacy Policy.

Cos’è il responsive web design e perché il tuo sito ne ha urgente bisogno

11 Settembre 2017

Responsive Web Design

Tutti parlano di responsive web design, ma non ti è ancora chiaro cosa voglia dire esattamente questo termine. In questo articolo ti spiegherò cos’è, usando qualche esempio pratico,  e perché è così importante e necessario per il tuo sito.

Nell’articolo che ho scritto qualche tempo fa sul restyling del sito web ho già parlato di questo argomento, spiegandone brevemente il concetto. Ma voglio approfondire il tema, perché ritengo sia di importanza fondamentale per te che hai un sito online dal quale ti aspetti di avere risultati concreti.

Se cerchi responsive design su Google, troverai la definizione di wikipedia.

Potrebbe bastare a soddisfare la tua curiosità.

Se non è sufficiente continua a leggere il mio approfondimento, nel quale ti parlerò di:

 

Fermiamoci un attimo!

Prima di continuare la lettura, apri il tuo sito in una finestra del browser, verificheremo più avanti se è responsive.

Hai fatto? Iniziamo!

Definizione di Responsive Web Design

Il responsive web design – per abbreviare userò RWD – comprende una serie di tecniche di sviluppo e accorgimenti di design, che servono a rendere la grafica di un sito automaticamente adattabile a schermi di dimensioni diverse.

Questo è utile a migliorare la leggibilità dei contenuti e la facilità d’uso del sito.

Un sito costruito con il RWD, in pratica è facilmente leggibile e navigabile sia che tu lo visiti da desktop, da tablet o da smartphone.

Per toccare immediatamente con mano di cosa stiamo parlando, ti invito a fare una prova pratica.

Vai con la freccia del mouse su un angolo della finestra del browser, tenendo premuto il tasto sinistro ridimensiona la finestra.

Dovresti vedere come si comportano tutti gli elementi di questa pagina man mano che cambi la dimensione della finestra.

Questo è il RWD in pratica.

Adesso prova con il tuo sito.

Hai notato qualcosa di strano?

Bene, ora continuiamo, del tuo sito ne riparleremo più avanti.

Cosa non è il RWD

Un sito responsive non è una versione alternativa del sito per i dispositivi mobili, non è nemmeno un app o cose simili.

Che tu stia visitando il sito da desktop o da smartphone non cambia nulla, il sito è sempre lo stesso, come anche l’indirizzo URL. L’unica cosa che cambia sono le dimensioni e le posizioni degli elementi grafici e dei contenuti, che si adattano allo schermo.

Immagina che io debba entrare in un cunicolo, mi dovrò inginocchiare e camminare a quattro zampe. Lo spazio si riduce e io mi adatto, ma sono sempre io, non sono mica diventato un cane solo perchè sono a quattro zampe. Il concetto del RWD è lo stesso.

È vero, in alcuni casi il layout per lo smartphone è molto differente da quello per il desktop; a volte addirittura mancano sezioni o elementi, ma questo è normale. Succede perché nei piccoli dispositivi alcuni elementi vengono nascosti o spostati, per dare spazio ad elementi e informazioni più importanti.

Vantaggi del RWD

I principali vantaggi che porta un approccio al design di questo tipo sono:

  • Hai un solo sito da amministrare per tutti i dispositivi, questo ti rende la vita più facile, non poco.
  • Hai un unico indirizzo, che rimane più facilmente nella memoria dei tuoi utenti. In più, non dovranno aspettare per un redirect da un indirizzo all’altro, cosa che avviene se hai un sito fatto per il mobile e uno per il desktop.
  • Gestione più semplice della SEO, dovrai ottimizzare un unico sito, ma avrai i benefici sia nelle ricerche da desktop che da mobile.
  • Gestione più semplice del marketing, vale lo stesso discorso fatto per la SEO.
  • Costi più bassi rispetto ad avere una versione desktop e una mobile…semplicemente un sito costa meno di due.

Svantaggi del RWD

Fare il sito responsive piuttosto che due distinte versioni, ha degli svantaggi che possono essere:

  • Hai un solo sito per tutti i dispositivi, questo potrebbe impedirti di sfruttare tutte le potenzialità di una o l’altra piattaforma per massimizzare le conversioni.
  • Difficoltà nel gestire un buona User Experience, perché a volte cercare di soddisfare i bisogni degli utenti mobile e desktop con la stessa interfaccia, può portare a non soddisfare nessuno.
  • I contenuti non si adattano sempre bene, perché sono creati per essere visualizzati su una sola delle piattaforme ed è difficile che vengano visualizzati al meglio su entrambe.

Mobile First

Riallacciandomi a quanto detto sopra, nelle controindicazioni del RWD, ti introduco il concetto di Mobile First.

Ne avrai sicuramente sentito parlare.

Non entrerò molto nei dettagli adesso, ma se vuoi approfondire fammelo sapere nei commenti, leggi l’articolo Mobile first: cos’è e come influisce sui tuoi guadagni.

Come ho detto prima i contenuti non si adattano bene a tutte le piattaforme, e di conseguenza la User Experience ne risente in negativo.

Per risolvere questo problema è stato introdotto l’approccio Mobile First.

Si parte dalla fase di progettazione del sito, nella quale si stabilisce se questo sarà visitato per la maggior parte da dispositivi mobili o no.

Il layout grafico di conseguenza verrà creato a partire dall’interfaccia per i dispositivi mobile, la User Experience e i contenuti ottimizzati per questo tipo di dispositivi.

L’interfaccia desktop, sarà disegnata successivamente come adattamento di quella mobile a schermi più grandi.

Con l’approccio Mobile First, il sito ha performance migliori con i dispositivi mobile rispetto ai computer desktop.

Quindi Donato, questo RWD è utile per il mio sito o mi conviene fare una versione mobile?

Dipende da che budget hai destinato al sito.

Molte grandi aziende scelgono di avere la doppia versione, perché possono permettersi di mantenerle entrambe e sfruttare al massimo le caratteristiche di una o l’altra versione. Ma la maggior parte scelgono l’approccio RWD, perché ha un costo più basso pur portando a buoni risultati.

In un modo o nell’altro una cosa è certa, facilitare la fruizione dei contenuti del tuo sito a tutti gli utenti, indipendentemente da quale dispositivo stiano usando, ti porterà ad avere un vantaggio in termini di conversioni.

Il tuo sito inoltre, se è ottimizzato per i vari dispositivi, riceverà maggior traffico organico dai motori di ricerca. Ricorda sempre che Google e gli altri motori di ricerca premiano la qualità del sito, sia per l’aspetto tecnico, cioè come è stato scritto il codice, che per l’aspetto dei contenuti, cioè immagini e testi.

Da uno studio di Audiweb sugli utenti internet in Italia, risulta che la maggior parte dei navigatori usa dispositivi mobile e questi ultimi passano più tempo su internet di chi usa un computer desktop.

 

accessi giornalieri a internet - dati audiweb

 

 

In conclusione, se vuoi che questi utenti visitino il tuo sito e compiano determinate azioni – ad esempio acquistare i tuoi prodotti, i tuoi servizi o contattarti – devi migliorare l’esperienza utente soprattutto per i dispositivi mobile.

Ritorniamo al tuo sito.

Se hai fatto la prova ridimensionando la finestra del browser e hai notato qualcosa di strano: ad esempio immagini o testi tagliati oppure talmente piccoli da essere illeggibili e altre cosucce del genere. Scrivimelo nei commenti o contattami, ti darò qualche consiglio.

Tags: mobile responsive

Per essere aggiornato sulla pubblicazione dei miei post e altre interessanti cose, iscriviti alla mia newsletter!

Acconsento al trattamento dei miei dati personali in conformità al D.Lgs 196/2003. Leggi la Privacy Policy.

Commenti