Il tuo sito internet dovrebbe adattarsi allo schermo di ogni dispositivo. Il Responsive Web Design riesce a fare proprio questo!
Cosa troverai in questo articolo:
Responsive Web Design: cos’è?
Il responsive web design (RWD) è un particolare tipo di approccio allo sviluppo dei siti internet che permette di creare pagine web estremamente adattabili.
Grazie al responsive design nascono siti dinamici, multiformi, sempre piacevoli da consultare perché ottimizzati per schermi di ogni forma e dimensione.
Un sito web “responsive” (responsivo) è in grado di trasformare e adattare il proprio layout in base al display da cui viene visualizzato.
Questo risultato non si può ottenere semplicemente riducendo “a scalare” la grandezza dei contenuti. Anzi, direi che questo è l’esatto contrario di “pensare responsive”.
Usabilità e visualizzazione perfetta da tutti i dispositivi
Il responsive design aggiusta la grafica del sito web in base alle dimensioni e all’orientamento dello schermo:
- senza diminuire la qualità visiva;
- riducendo al minimo necessità di ingrandire i contenuti da parte dell’utente.
Per garantire leggibilità quando lo spazio si restringe, i testi andranno a riunirsi in una colonna unica con caratteri più grandi per facilitare la lettura dai device più piccoli. Il menù di navigazione verrà nascosto posto all’inizio della pagina.
Ecco un esempio di design responsive: la ‘home page del nostro sito web nelle diverse versioni, desktop, tablet e mobile:
Come vedi ci sono differenze tra una versione e l’altra che non stravolgono la coerenza della grafica ma che rendono il sito user friendly: sempre ordinato e gradevole da esplorare.
Vuoi trasformare il tuo sito in un’esperienza responsive?
Contattaci per una consulenza gratuita
Responsive web design: modelli ed esempi
1. Layout responsive: modelli
Ci sono diversi modi di organizzare una pagina web per garantire la massima adattabilità. Ecco alcuni schemi generali che si possono seguire:
- modello “Mostly fluid“
- schema “Culumn drop“
- Layout “Shifter“
- Modello “Off canvas“
- Sistema “a Lista“
Modello “Mostly fluid”
Si tratta di un layout che aumenta la dimensione dei margini su schermi di grandi dimensioni.
Spesso si usa la griglia fluida (che permette al contenuto di scorrere in senso verticale sugli schermi di dimensioni ridotte), immagini “a scalare” e colonne di testo impilate quando lo spazio si restringe.
Schema “Column drop”
Si tratta di un assetto grafico multi-colonna che “perde” progressivamente colonne quando le dimensioni dello schermo si riducono.
La dimensione degli elementi tende a mantenere coerenza e le colonne si riordinano via via che lo schermo diminuisce la dimensione.
Nel layout per gli schermi di dimensioni ridotte il contenuto scorre in senso verticale e le colonne risultano impilate.
Layout “Shifter”
Questo modello offre massima adattabilità. Layout diversi sono usati su schermi grandi, medi e piccoli.
Si tratta del modello meno diffuso perché richiede un maggiore sforzo di progettazione. questo tipo di progettazione responsive offre la massima reattività, ma richiede una gestione dei contenuti molto complessa, che riadatta ogni elemento in maniera funzionale al nuovo assetto della pagina.
Modello “Off canvas”
Questo modello di layout responsive sfrutta, in un certo senso, lo spazio fuori dallo schermo per nascondere quello che non entra nella pagina quando lo schermo si riduce (e che viene invece reinserito per i display più grandi).
In questo caso il contenuto non si riordina verticalmente, ma colloca i parte del contenuto “fuori dallo schermo”.
Sistema “a lista”
In questo tipo di layout, i testi si riorganizzano in elenchi di elementi (liste), visualizzate su un numero di colonne proporzionali alla larghezza dello schermo.
2. Layout responsive: esempi
Ecco alcune immagini per capire come i siti responsive possono riorganizzare gli elementi del layout e gestire lo spazio a disposizione.
1. Questo è lo schema vedi di un sito web che possiamo definire non-responsive, predisposto per scalare solo la grandezza dei contenuti, con un layout che praticamente resta identico.
In questo caso può accadere che i testi e le immagini siano rimpiccolite per rientrare nelle varie dimensioni dello schermo con un effetto che, in alcuni casi, finirà per offrire un pessima leggibilità dei testi e una scarsa visibilità delle immagini.
2. Ecco il layout di un sito internet che riorganizza le colonne in senso verticale (column drop), fino ad impilarle tutte verticalmente nei layout dei dispositivi più piccoli.
3. Infine, un esempio di massima reattività (layout “shifter”), con importanti modifiche nella gestione di forme e spazi tra una versione e l’altra.
Perché è importante avere un sito responsive?
Se il tuo sito web non è responsive e mobile-friendly non riuscirai a raggiungere le persone che ti cercano online da smartphone. E perderai la possibilità di sfruttare un mercato vasto e ricco di opportunità.
1. Mobile first!
La responsività del sito da cellulare
Sapevi la maggior parte delle ricerche su Google ( più del 70%) provengono dagli smartphone? Il resto degli utenti si divide tra pc e tablet.
Se il tuo sito non è responsive da cellulare e i testi sono poco leggibili dagli schermi più piccoli che vi atterra non si prenderà la briga di tornare a visitare il sito accendendo da pc. Molto probabilmente non avrai una seconda occasione!
L’esperienza di navigazione che le persone vivono sulle tue pagine web in particolare da cellulare ha un peso: e incide sulla tua visibilità sui motori di ricerca.
Google ragiona in ottica mobile first, posizionando meglio e prima nella classifica dei risultati della ricerca organica i siti responsivi da cellulare, cioè ottimizzati visivamente per mobile e quindi “usabili” dai dispositivi di dimensioni ridotte.
Tutto quello che piace agli utenti piace anche a Google.
2. Responsive web design: più visibilità sui motori di ricerca
Da uno studio di Semrush è emerso che solo il 13% dei siti internet ha la stessa posizione su Google ricerca per tutti i dispositivi.
Il 30% dei siti in prima pagina precipita in basso (oltre i primi 10 posti) nella risultati della ricerca da mobile:
Perché accade questo?
Google posiziona meglio i siti che offrono una buona esperienza di navigazione dai dispositivi mobili. Il motore di ricerca più famoso al mondo tende anche a posizionare prima la versione mobile del sito e con questo dimostra di tenere in grande considerazione chi cerca di raggiungerti dal cellulare.
I siti veloci e web responsive ottengono più visibilità sui motori di ricerca.
Una buona visualizzazione da ogni dispositivo è gradita a Google, piace agli utenti ed è utile a te.
3. Responsive web design e Campagne annunci di Google per cellulare
Il responsive design è solo un aspetto di progettazione del sito ma una risorsa che puoi sfruttare a tuo vantaggio nella tua strategia di marketing digitale.
Potresti ad esempio destinare una parte del tuo budget alle campagne Google Ads per cellulare, pubblicando annunci pay per click che si attivano solo quando potenziali clienti sono nella tua zona.
Targhettizzando i tuoi annunci per i cellulari la tua pubblicità su Google diventerà più specifica e avrai maggiori possibilità di aumentare i tuoi click e convertire.
Ma cosa succederebbe se qualcuno cliccasse il tuo annuncio e atterrasse su un sito disordinato, lento nel caricamento o poco fruibile? Passerebbe immediatamente al risultato di ricerca successivo! E avresti perso un’opportunità.
Questo è un altro esempio di come la responsività del design del tuo sito o della tua landing page possono influenzare direttamente le tue opportunità di guadagno.
Esempi di siti web responsive
Mi hai seguito fin qui? Adesso ti mostro alcuni esempi di siti responsive utili per capire come gestire lo spazio in modo da garantire la massima reattività del design:
- Warehouse
- Creacity
- Zerogermyl
- Moleskine
- Egan
- IKEA
- Condenast
1. Warehouse
Ecco come warehouseusatodiqualita.it si adatta ai diversi device di navigazione:
Si tratta di un blog ma anche di un motore di ricerca dove trovi usato ricondizionato.
Il sito è facile da esplorare e le fotografie dei prodotti non perdono qualità da cellulare: un aspetto da considerare ancora più attentamente quando il sito web è un eCommerce, come in questo caso.
Nella versione tablet e mobile il menù si posiziona al centro e le sue voci sono nascoste, mentre Il logo è posto al centro, ce per rimanere grande e in evidenza.
2. Creacity
Questa è la nostra pagina del Listino servizi.
Si tratta di una landing page con una grande immagine centrale. Da desktop tablet o mobile la grafica risulta armoniosa ed ordinata.
Se vuoi vedere altre landing page vai qui: 18 esempi di landing page efficaci.
3. Zerogermil
Ecco un altro esempio di sito responsive, dal design ordinato e fruibile: un forte impatto visivo che non perde efficacia dai device più piccoli.
L’immagine di Zerogermyl rimane sempre sempre in evidenza, come anche il pulsante che invita il cliente a cliccare. Nelle diverse versioni l’assetto grafico è pulito efficace e ordinato.
4. Moleskine
Moleskine offre un altro esempio di ordine ed efficacia visiva, come di vede dall’immagine, che mette a confronto le versioni desktop e mobile del sito.
Le immagini sono tagliate e incolonnate e la struttura della pagina garantisce una buona esperienza di navigazione, anche da mobile.
5. Egan
Egan gestisce la versione da mobile riadattando l’area dedicata alle slide allo spazio ridimensionando le immagini, centrando il logo e nascondendo la barra del menù. Ottimo lavoro!
6. Ikea
Efficacia della grafica e usabilità per Ikea. Le modifiche tra una versione e l’altra sono perfettamente riuscite perché si notano appena, non infastidiscono ma sono estremamente funzionali.
7. Condenast
Il sito di Condenast non offre un buon esempio di responsività. I testi sono semplicemente ridotti a scalare e risultano poco leggibili. Anche la barra di navigazione è più piccola nella versione mobile e i caratteri sono troppo piccoli.
Sono in chiusura. Questo articolo ti è stato utile? Ho scelto gli esempi giusti per rendere l’idea di cosa sia il design responsivo, oppure ne hai altri da suggerirmi?
Vuoi realizzare un sito responsive o di rendere responsivo il sito che hai già?
CONTATTACI per una consulenza gratuita
