Sito Web

Responsive Design: Quando Adattarsi Non Basta

4 Settembre 2021

6 min lettura

Creare prodotti digitali che garantiscano una User Experience soddisfacente per ogni tipo di device. Questo è il Responsive Design. Non è di certo una definizione tecnica, ma sicuramente racchiude bene il concetto. A breve approfondiremo tutti gli aspetti inerenti all’argomento e capiremo anche come mettere in pratica quanto letto.

Daniele Lunassi

Creare prodotti digitali che garantiscano una User Experience soddisfacente per ogni tipo di device. Questo è il Responsive Design.

Non è di certo una definizione tecnica, ma sicuramente racchiude bene il concetto.

A breve approfondiremo tutti gli aspetti inerenti all’argomento e capiremo anche come mettere in pratica quanto letto.

Ecco cosa andremo a scoprire in questo Blog Post:

  • Che cos’è il Responsive Design?

  • Qual è la differenza tra Responsive Design e Adaptive Design?

  • Best practice per creare un sito web responsive

Partiamo!

Che cos’è il Responsive Design?

Il Responsive Design è una sfida lanciata dagli utenti di internet al mondo dei designer.

Negli ultimi 10 anni, sempre più persone hanno incominciato ad utilizzare device differenti per accedere ai siti internet.

Pian piano il mondo dei mobile-user è cresciuto, grazie alle innovazioni portate avanti da Apple ed Android.

Siamo arrivati ad una situazione in cui, parlare di “cross-device” non è più una questione che affrontano solo i grandi e-commerce, ma una preoccupazione che accomuna chiunqua abbia un sito internet online.

Ormai, gli utenti di internet innoriddiscono quando si trovano davanti un sito non adatto ai loro smartphone o tablet.

Scommetto sarà capitato anche a te!

Accedi ad un sito col tuo smartphone e ti trovi davanti ad una fotocopia della versione desktop del sito. Ovviamente, non riesci a leggere nulla perché i testi sono troppo piccoli, il caricamento dura un’eternità e non riesci a cliccare su alcun tasto.

Il risultato è ovviamento un’oscenità e che fa scappare le persone!

Qui sotto puoi vedere un tipico esempio di quanto cambia l’esperienza utente quando si ha un sito web responsive.

Perché un sito web responsive è un must!

Una cattiva User Esperience porta sempre a perdite per l’azienda.

Secondo Think With Google, quando si ha un sito web non-responsive, la probabilità che i visitatori vengano convertiti in lead o clienti cala del 95%!

Il motivo è semplice: la pagina si carica molto lentamente a causa dei troppi elementi presenti nella schermata, il risultato è che gli utenti scappano a gambe levate.

I pochi che lasciano caricare il sito, si trovano davanti a testi illegibili perché troppo piccoli ed a CTA (call-to-action) incliccabili.

Ma il dramma non finisce qui!

L’assenza di un sito web responsive peggiora le tue entrate e migliora quelle dei tuoi competitor: ben 60% dei mobile-user si sposta su un altro sito web quando non trova quel che cerca entro qualche secondo.

In sintesi: il tuo bounce rate aumenta, il conversion rate dei tuoi compitor cresce!

A questo punto ti chiederai: “Come fare ad evitare tutto ciò? Come creare un sito che possa soddisfare le esigenze degli utenti di ogni device?”

Tranquillo, ci arriviamo in un attimo, ma prima permettimi di introduttirti l’Adaptive Design, il cugino “inflessibile” del responsive design. (Tra poco capirai la freddura ?)

Qual è la differenza tra Responsive Design e Adaptive Design?

L’Adaptive Design è molto simile al Responsive Design: entrambi permettono al tuo sito di adattarsi alle dimensioni del device dell’utente, ma lo fanno in modo differente.

Nell’Adaptive Design il contenuto del sito segue una dimensione fissa del layout, mentre si muove in modo dinamico nel Responsive Design.

Se questo ti ha dato più domande che risposte, prova ad inquadrare la situazione in questo modo: l’Adaptive Design utilizza alcuni layout fissi del sito, per poi selezionare il miglior layout per la dimensione dello schermo del device utilizzato dall’utente.

Il Responsive Design invece, utilizza un unico layout, che poi viene ridimensionato in base alle dimensioni dello schermo del device utilizzato dall’utente.

Nel caso del Responsive Design, i designer tendenzialmente progettano 3 tipologie di User Experience: una per mobile, una per tablet ed una per desktop.

Nel caso dell’Adaptive Design, un team di designer può arrivare a progettare la User Experience per ben 6 larghezze di schermo più comuni (320, 480, 760, 960, 1200 e 1600 pixel).

Quale scegliere?

La soluzione è sempre la stessa: dipende.

L’Adaptive Design permette ai designer di creare soluzioni ottimali per lo specifico schermo dell’utente.

Ovviamente però, creare 6 UX differenti comporta una mole di lavoro enorme, quindi i costi del progetto aumentano.

In aggiunta, i device cambiano dimensioni in continuazione e spesso gli utenti si trovano davanti ad un design non ottimizzato per i loro schermi.

“Quindi a che fare? Responsive Design o Adaptive Design?”

Come scegliere tra Responsive Design ed Adaptive Design

Ci troviamo quindi davanti alla questione fondamentale: “Quale approccio scegliere?

Se hai poco budget, sei in fase di lancio e voi andare online il prima possibile: scegli il Responsive Design. Lavori meno e spendi meno.

Se fai questa scelta, potrai utilizzare anche molti template dei vari CMS (Content Management Systems) come WordPress, che ti accorceranno ulteriormente il lavoro.

Tieni sempre a mente che ci sono degli aspetti negativi: i tempi di caricamente variano tra i device.

Un sito che viene caricato in tempi brevi su un portatile, richiede più tempo (e anche più dati) per poter apparire sullo smartphone.

Sei pronto a fare questa scelta?
Per poter rispondere dovresti conoscere bene i tuo utenti, dai un’occhiata a questo nostro Blog Post per avere più informazioni sul tema.

Una lancia a favore dell’Adaptive Design: quest’approccio garantisce un’esperienza più pertinente per l’utente moderno; il Responsive Design, invece, risulta essere più desktop-centrico e conferisce altri device un aspetto secondario.

A questo punto dovresti avere chiaro:

  • Cos’è il Responsive Design

  • Cos’è l’Adaptive Design

  • Quali sono le differenze tra i due

Adesso possiamo passare ad una fase successiva: ovvero, possiamo andare a comprendere quali sono le best practice per creare un sito web sfruttando l’approccio del Responsive Design.

Responsive Design: alcune best practice

Passiamo all’aspetto pratico del Responsive Design: “Come implementarlo? Come gestire l’esperienza utente su device così differenti tra loro?”

Andiamo a scoprirlo.

Sfrutta l’approccio Mobile-First

L’approccio Mobile First, richiede di focalizzarsi prima sulla progettazione dell’esperienza utente degli smartphone, per poi andare ad adattare l’esperienza utente sugli schermi più larghi.

In questa fase ricordati che la regola da seguire è quella di fare creare un’experience il più intuitiva possibile.

Quando lo schermo si riduce, concentrati solo sui contenuti rilevanti

Il mobile è un device a parte. Lo utilizziamo nei posti più disparati: cucina, bagno, macchina, ufficio, al parco, ecc..

Queste disparate location, mettono l’utente in condizione di perdere l’attenzione molto facilmente. Senza parlare del fatto che spesso la connessione può essere non ottimale.

Questo porta i mobile-user a preferire interazioni brevi e semplici.

Che fare?

  • Negli User Interface degli utenti mobile, devono apparire solo i contenuti rilevanti: come titoli, hero image e CTA. I testi lunghi uccidono l’attenzione.

  • Analizza attentamente i contenuti che mostri sui vari device e prova a snellire (quanto più possibile) l’esperienza di coloro che utilizzano lo smartphone.

  • Negli schermi più piccoli, sfrutta la possibilità di poter condensare i contenuti (come ad esempio, il classico Hamburger Menu) per poter poi espanderli con un click.

Sfrutta i Design Pattern

Secondo Internation Design Foundation, i Design Pattern della User Interface sono delle componenti ricorrenti che i designer sfruttano per risolvere i problemi di progettazione.

Ad esempio, i breadcrumbs danno la possibilità agli utenti di ripercorrere i loro passi. Questo pattern lo trovi spesso negli e-commerce oppure nel processo di completamento di un percorso.

Attento alla Typography

Quando si tratta di creare un sito basato sul Responsive Design, si deve fare particolare attenzione ai testi ed a come questi vengono mostrati all’utente.

Piuttosto che mettere del testo sulle immagini, sfrutta il testo reale. Altrimenti, ottieni una perdita di qualità non appena l’utente prova a zoommare sui contenuti.

Per andare nel tecnico, in fase di sviluppo si dovrebbe utilizzare “em” nel codice CSS, piuttosto che i pixel. In questo modo, si possono impostare le proporzioni dei font in modo rapido grazie alle dimensioni del font corrente.

Conclusioni

Siamo arrivati alla conclusione di questo Blog Post. Ormai, dovresti avere ben chiaro cos’è il Responsive Design e come mettere in pratica quest’approccio nei tuoi prossimi progetti.

Se vuoi vedere quali sono i risultati che quest’approccio può portare e se cerchi un po’ di ispirazione, ti consigli di dare uno sguardo a questo link in cui trovi l’analisi di 11 siti creati secondo i concetti del Responsive Design.

Alla prossima!


Daniele Lunassi

Design Lead

Su di me:

freccia arancione che indica il titolo della sezione

Mettiamoci al lavoro

Hai un’idea pazzesca?Trasformiamola in realtà.

Prenota una call con il team

Diventa la persona più
informata sul design

Più di 15 mila iscritti alla newsletter che in soli
10minuti a settimana si aggiornano con
tante novità e consigli sul mondo della UX/UI
design e product design. Non male, vero?