GDPR Cookie Consent by Free Privacy Policy Generator Responsive Web Design: cos’è? Ecco alcuni esempi di siti responsive | CreaCity
responsive web design cos'è

Il tuo sito internet deve adattarsi allo schermo di ogni dispositivo. Il Responsive Web Design ti aiuta a fare è proprio questo! Nel mio articolo di oggi ii racconto come e perché.

1. Responsive Web Design: cos’è?

Il RWD (responsive web design) è uno particolare tipo di approccio allo sviluppo dei siti web che ti permette di puoi raggiungere e convincere molti più clienti e ottenere il massimo successo dalle tue pagine web. 

Si tratta di progettare e costruire il sito internet in modo che sappia adattarsi e trasformare il proprio layout in base al dispositivo di visualizzazione. 

Grazie al design web responsive nascono siti dinamici e multiformi, sempre piacevolmente consultabili, ottimizzati per ogni cioè schermo, piccolo o grande che sia.

Ma un sito reattivo ed adattabile non si ottiene semplicemente riducendo “a scalare” la grandezza dei contenuti. Anzi, direi che questo è proprio l’esatto contrario di “pensare responsive” e progettare un sito dal design responsivo.

Usabilità e visualizzazione ottimale da tutti gli schermi.

Il responsive design sforna pagine web reattive, dal layout dinamico. E così il sito web diventa usabile da ogni display, riducendo al minimo la necessità dell’utente di “pizzicare” e ingrandire i contenuti oppure scorrerli. La grafica si aggiusta in base alle dimensioni e al’orientamento del display:

  • senza che l’effetto grafico perda efficacia;
  • evitando che il sito rallenti il caricamento di testi e immagini.

Sviluppare un sito responsivo significa riarrangiare la grafica, ma anche le funzionalità, per ottenere un effetto impeccabile, con:

  • pagine snelle e ordinate
  • testi leggibili
  • immagini evidenti e ben distribuite

Gli elementi visivi e testuali devono essere pensati, insomma, per riorganizzarsi di volta in volta. Quando la pagina si restringe, le parole potrebbero riunirsi in una colonna unica con caratteri ingranditi per facilitare la lettura da schermi piccoli. Le gerarchie di navigazione potrebbero invece essere nascoste in un menù da esplorare, collocato in alto e facilmente individuabile.

E’ esattamente così che abbiamo progettati il nostro sito web!

Ecco come appare la nostra home page nelle diverse versioni: desktop, tablet e mobile:

creacity esempio di sito web responsive

Clicca sull’immagine per farti un giro a CreaCity!

Ecco la nostra idea di “adattamento dinamico” e web responsive.

Come puoi notare, ci sono modifiche sensibili modifiche tra una versione e l’altra. Si notano appena e non stravolgono la nostra grafica, anzi la ottimizzano e rendono il sito più fruibile e semplice da esplorare. Cioè decisamente user friendly!

Anche navigando le altre pagine del sito vedrai che i nostri contenuti si riorganizzano sempre con molta elasticità per un effetto gradevole e ordinato.

E’ così che lavoriamo per i nostri clienti. 

trasforma il tuo sito in un’esperienza responsive!

Layout responsive: modelli.

Ci sono diversi espedienti tecnici per adattare l’assetto grafico a  tutti i dispositivi.

Ecco alcuni schemi che si possono seguire per organizzare le pagine in chiave design responsive:

Modello “Mostly fluid”

Si tratta di un layout a più colonne che aumenta la dimensione dei margini su schermi di grandi dimensioni. Spesso ci sono griglie fluide, immagini a scalare e colonne di testo impilate, quando lo spazio si restringe.

Schema “Column drop”

Assetto grafico a più colonne che “perde” progressivamente colonne, quando le dimensioni dello schermo si riducono. La dimensione degli elementi  tende a mantenere una certa coerenza;

Layout di tipo “Shifter”

 Questo modello è estremamente adattabile. Layout diversi sono usati su schermi grandi, medi e piccoli. Secondo quanto affermato da lukeW, si tratta del modello meno popolare perché richiede un maggiore sforzo di progettazione.

Modello“Off canvas”

 E’  un assetto grafico che sfrutta lo spazio fuori dallo schermo per nascondere quello che non entra nella pagina e che viene invece reinserito per i dispositivi  più grandi.

Sistema “a lista”

I testi si riorganizzano in semplici elenchi di elementi (liste), visualizzate su un numero di colonne proporzionali alla larghezza dello schermo.

Layout responsive: esempi.

Ecco alcune immagini che aiutano a capire come i siti responsive possono riorganizzare gli elementi in base alle dimensioni e all’orientamento dello schermo.

1. Nel primo schema vedi un sito web “poco lavorato” in ottica responsive, predisposto per scalare solo la grandezza dei contenuti, mentre il layout resta identico:

layout responsive esempio 1
fonte dell’immagine: https://www.lukew.com/ff/entry.asp?1514

 

2. Ecco invece il modello di un sito internet che si riorganizza perdendo progressivamente colonne:

layout responsive esempio 2
fonte dell’immagine: https://www.lukew.com/ff/entry.asp?1514

 

3. Infine, un layout che offre massima adattabilità, trasformandosi all’occprrenza:

layout responsive esempio 3
fonte dell’immagione: https://www.lukew.com/ff/entry.asp?1514

 

2. Esempi di siti web responsive

Stai ancora leggendo? Allora ti mostro alcuni esempi di siti responsive!

Ecco come warehouseusatodiqualita.it si trasforma sui vari device:

Si tratta di un blog ma anche di un motore di ricerca dove trovi usato ricondizionato, con filtri di ricerca avanzati.  E’ particolarmente importante che tutto sia ordinato e ben consultabile, con i prodotti in evidenza. La dimensione delle foto è particolarmente importante: devono essere ben visibili e non perdere qualità.

Dai un’occhata alla versione tablet e mobile: hai notato che il menù si posiziona al centro e le sue voci sono nascoste? Il logo si sposta ed è centrato. Così può restare grande, visibile e ben in evidenza.

Poco sotto, la nostra pagina del Listino servizi di Creacity.

creacity pagina listino servizi

Come vedi è una pagina di forte impatto visivo. Trattandosi di una landing page ci sono pochi elementi grafici, studiati per colpire l’attenzione. Adattarne disposizione e grandezza è estremamente importante. Da desktop tablet o mobile, tutto è ben disposto in un insieme grafico armonioso, coerente ed efficace.

Un altro esempio di layout web responsive è questo qui: Zerogermil.it

L’immagine rimane sempre in evidenza, come anche il pulsante che invita il cliente all’azione. L’assetto grafico è molto efficace nei diversi layout. Personalmente mi piace moltissimo la versione mobile, con l’immagine al centro e la scritta principale allineata in alto.

Sei arrivato alla fine del mio articolo dedicato a capire cos’è il design web responsive.

Cosa ne pensi, ti è stato utile? Ho scelto gli esempi giusti per rendere l’idea di cosa sia il design responsivo? Oppure hai altro da suggerirmi? Perdi due minuti del tuo tempo per lasciare un commento!

Se invece vuoi realizzare un sito responsive o di rendere responsivo il sito  che hai, già contatta i nostri esperti per un consiglio! Chiamaci, whatsappaci oppure

 vai qui 

Summary
Perchè è importante avere un sito web responsive?
Article Name
Perchè è importante avere un sito web responsive?
Description
Un sito responsive è adattabile, reattivo e in grado di offrire sempre una buona esperienza utente. Cerchiamo di capire di preciso perchè il responsive web design è così importante!
Author
Publisher Name
Creacity
Publisher Logo
Tag: , , , , ,

Lascia un commento

Your email address will not be published. Required fields are marked *