• Gian Marco Ventura

Responsive Web Design: come rendere il tuo sito adattabile su tutti i dispositivi

Cos’è il Responsive Web Design (RWD) e perché può essere importante per il sito web della tua azienda. Analisi e Best Practices.


INDICE


Il responsive web design è il processo di progettazione di un sito web devices-friendly, ovvero che si adatta a seconda del dispositivo del visitatore: desktop, tablet, smartphone.


Gli sviluppatori utilizzano strumenti (media query) per impostare punti di interruzione per ogni dimensione dello schermo in modo che gli utenti possano navigare in un sito Web entro i limiti del proprio dispositivo.


Questo modo di progettare permette di cambiare il layout delle colonne, le dimensioni della tipografia, le dimensioni delle immagini, ma anche di nascondere contenuti superflui sul mobile. La funzionalità del sito Web rimane la stessa, ma il contenuto e le strutture si adattano a dimensioni dello schermo diverse.


Layout di sito web adattabile in più dispositivi. Smartphone, tablet, desktop


Perché è importante il responsive web design?


Il primo fattore da considerare è che il responsive design permette di progettare un’esperienza utente perfetta per la navigazione includendo l'ottimizzazione delle interfacce per adattarsi al dispositivo di chiunque. Questo garantisce che gli utenti, pur utilizzando dispositivi diversi (smartphone, tablet, laptop e desktop), potranno godere degli stessi criteri di navigazione semplicemente adattati alle dimensioni del nuovo schermo.


Inoltre un web design reattivo è essenziale se vuoi che i motori di ricerca indicizzino e classifichino il tuo sito web. L'indicizzazione mobile first di Google dà la priorità ai siti web reattivi per i risultati di ricerca mobile.


Già nel 2012, secondo Google Search Central, "Negli Stati Uniti, il 94% delle persone con smartphone cerca informazioni locali sui propri telefoni . È interessante notare che il 77% delle ricerche mobili avviene a casa o al lavoro, luoghi in cui è probabile che siano presenti computer desktop".


"Il 94% delle persone con smartphone cerca informazioni locali sui propri telefoni."

In breve, la maggior parte delle persone utilizza i propri dispositivi mobili per effettuare ricerche sul Web acquistando direttamente prodotti e servizi, quindi diventa di vitale importanza avere un sito web con comportamento adattivo in modo da trarre vantaggio da questi clienti.


In sintesi i fattori che dovrebbero spingere verso l’adozione di un comportamento responsive sono i seguenti:

  • Google favorisce le versioni mobile friendly dei siti internet e, visto che vogliamo essere ‘trovati’ dai motori di ricerca, risulta inutile applicare tutte le tattiche SEO possibili se non si risponde alla prima richiesta di sua maestà Google.


  • La navigazione su un sito responsive permette di vivere esperienze utenti semplici e facilitate in base al dispositivo elemento che potrebbe diventare fattore di scelta tra il vostro sito e quello di un vostro concorrente.


  • Il fatto che adottiate un una progettazione responsive testimonia la vostra attenzione per le esigenze dei visitatori del vostro sito.


  • Un sito responsive contribuisce a rendere la vostra immagine su internet più moderna, aggiornata ed in linea con i tempi.

Google offre un Mobile-Friendly Test gratuito che valuta se il tuo sito web è ottimizzato per i dispositivi mobili.





Approccio al Responsive Design e funzionalità.


Sono due i fattori essenziali che i designer devono considerare per il responsive web design:

  • Punti di interruzione (breakpoint)

  • Contenuto visivo


Punti di Interruzione


Come progettisti identifichiamo punti di interruzione (dimensioni in pixel dello schermo) per ottimizzare i layout in modo che corrispondano a più dispositivi durante il processo di progettazione dell'esperienza utente.


Nella maggior parte dei casi vengono considerate solo tre finestre:


  • Smartphone/cellulare

  • Tablet

  • Desktop


Tuttavia, affinché un sito Web sia completamente reattivo, è bene considerare anche i layout verticali e orizzontali per dispositivi mobili e tablet, oltre che dimensioni intermedie, per un totale di sei punti di interruzione:


  • Smartphone / verticale

  • Smartphone / paesaggio (orizzontale)

  • Tablet / verticale

  • Tablet / paesaggio (orizzontale

  • Laptop

  • Desktop


Solitamente si utilizzano delle griglie fluide. Tutti gli elementi della pagina vengono ridimensionati in proporzione, e posizionati in maniera differente al variare delle dimensioni disponibili.


Per un web designer significa lavorare sulla metamorfosi del layout del sito internet, a seconda del dispositivo utilizzato.


Contenuto visivo


Il contenuto visivo include immagini, video e GIF. Questi elementi visivi necessitano di molte risorse e possono richiedere più tempo per essere caricati sui dispositivi mobili.

Per questo i progettisti devono comprimere e ottimizzare il contenuto visivo per ridurre le dimensioni del file.


Il sito responsive, invece, dispone in maniera diversa gli elementi della pagina adattando il contenuto al contenitore. Dunque lo stesso sito con tre colonne, sul tablet ne potrebbe sfruttare solo due e sullo smartphone ridisporre tutto il contenuto su di un’unica colonna suddivisa in righe.


Allo stesso tempo il contenuto, adattato allo spazio disponibile, risulterà leggibile e facile da navigare mentre immagini e video risulteranno ridimensionati e adattati perfettamente allo spazio a disposizione.

Talvolta il design responsive viene studiato in base alle necessità tipiche del dispositivo ed alcuni elementi, superflui o di decoro, possono essere nascosti per permettere al navigatore di trovare immediatamente quello che sta cercando; questa pratica viene usata soprattutto per le versioni dedicate al mobile dove banda e tempo risultano elementi essenziali nella navigazione di un sito internet.





Responsive Design: facciamo un esempio.

Volete avere una prova di quello che vi stiamo dicendo?

Andate sulla home page del nostro ultimo lavoro per Pigiama Kasama B.V (il sito ha un comportamento responsive ovviamente) e noterete come i vari elementi che compongono la pagina (il logo, i blocchi di testo, le icone, le immagini) si sposteranno e modificheranno al ridimensionamento della finestra del browser (su desktop è sufficiente agganciate con il mouse la finestra del browser nell’angolo in basso a destra e trascinarla verso sinistra ridimensionandola) o cambiando la risoluzione del vostro monitor.




Non male vero? Questo è quello che accade visualizzando un sito web responsive da desktop, tablet o smartphone.


La progettazione di fantastiche esperienze sul sito Web inizia con l'assicurare a te e alla tua organizzazione di disporre degli strumenti giusti anche in fase di gestione.

In VAV Studio utilizziamo strumenti di progettazione e prototipazione avanzati come Editor X, Webflow, Adobe XD e Figma per creare siti Web e applicazioni reattive permettendo una gestione autonoma e indipendente riducendo costi e curva di apprendimento. Iscriviti per non perdere i prossimi aggiornamenti e consigli.


 


Tutto inizia con una conversazione


Se sei interessato ai nostri servizi puoi richiedere un incontro conoscitivo. Un membro della nostra squadra sarà a tua disposizione per una consulenza gratuita di 30 minuti.





Unisciti alla community 
e sblocca nuove conoscenze

Resta aggiornato suoi nostri movimenti.

Pubblichiamo periodicamente news, articoli e molto altro che potrebbero aiutarti a realizzare il tuo progetto e a gestire la tua attività.

Design & Creative Studio

Studio di Progettazione

e Comunicazione Visiva

Pescara - 65120 - Italia

behance-logo_edited.png
  • Bianco LinkedIn Icon VAV Design and Creative Studio
  • Bianco Facebook Icon VAV Design and Creative Studio
  • Bianco Instagram Icona VAV Design and Creative Studio

2022 - ALL RIGHTS RESERVED