Il tuo sito deve 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 alla progettazione e allo sviluppo dei siti internet che permette di creare pagine web reattive ed 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” a grandezza dei contenuti. Anzi, direi che questo è l’esatto contrario di “pensare responsive”.
Una buona esperien visualizzazione perfetta da tutti i dispositivi
Il responsive design garantisce una buona esperienza di navigazione a prescindere dalle dimensioni e proporzioni dello schermo.
Il responsive design aggiusta la grafica del sito web che è in grado di adattarsi in base alle dimensioni e alle proporzioni dello schermo:
- senza diminuire la qualità visiva;
- riducendo al minimo la 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 sarà 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 per gestire lo spazio a disposizione.
1. Questo è lo schema di un sito web che possiamo definire non-responsive, predisposto semplicemente per scalare la grandezza dei contenuti, con un layout che praticamente resta identico.
In questo caso può accadere che i testi e le immagini siano rimpiccoliti per rientrare nelle varie dimensioni dello schermo con un effetto che, in alcuni casi, finirà per offrire una pessima leggibilità dei testi e una scarsa godibilità delle immagini.
2. Ecco il layout di un sito web che riorganizza le colonne in senso verticale (column drop), fino ad impilarle tutte nei layout dei dispositivi più piccoli.
3. Infine, un esempio di massima reattività (layout “shifter”), con modifiche funzionali alla gestione di forme e spazi, con evidenti cambiamente 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 dai dispositivi più piccoli, soprattutto 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 contenuti sono poco leggibili dagli schermi più piccoli in pochi secondi chi vi atterra lo abbandonerà. E difficilmente si prenderà la briga di tornare a visitarlo dal pc. Non avrai una seconda occasione!
L’esperienza di navigazione che le persone vivono sulle tue pagine web in particolare da cellulare ha un grosso peso e incide sul ranking del tuo sito.
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 recente è emerso che solo il 13% dei siti web ha la stessa posizione su Google ricerca per i diversi dispositivi.
Il 30% dei siti in prima pagina da pc (oltre i primi 10 posti) precipita in basso 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 tende anche a posizionare prima la versione mobile del sito e con questo dimostra di tenere in grande considerazione le persone che tentano 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 bob è solo un approccio alla 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 mobile, pubblicando annunci pay per click che si attivano solo quando i potenziali clienti sono nella tua zona.
Targhettizzando i tuoi annunci per i cellulari la tua pubblicità su Google diventerà più specifica e avrai maggiori probabilità di ricevere clic 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 per capire come si dovrebbe gestire lo spazio per 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 pagina con una grande immagine centrale. Da desktop, tablet o mobile la grafica risulta piacevole, armoniosa e ordinata.
Potrebbe interessarti anche: 18 esempi di landing page efficaci.
3. Zerogermil
Ecco un altro esempio di sito responsive, dal design adattabile e fruibile: un forte impatto visivo che non perde efficacia dai device più piccoli.
L’immagine del prodotto 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 esempio di estremo ordine ed efficacia visiva:
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 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 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 ridotti a scalare e risultano poco leggibili dagli schermi più piccoli. Anche la barra di navigazione diminuisce di dimensioni nella versione mobile e i caratteri sono davvero troppo minuti per permettere un’agevole lettura.
Siamo in chiusura. Questo articolo ti è stato utile? Hai altri buoni esempi da suggerire?
Se vuoi realizzare un sito responsive o di rendere responsivo il sito che hai già
CONTATTACI per una consulenza gratuita
