Responsive Web Design. Visualizzare siti web sui diversi tipi di media

Uno dei temi più affrontati, ormai da qualche anno, in fatto di Web Design, è la possibilità di visualizzare un sito web "in mobilità". Con la diffusione, sempre crescente, di smartphone e tablets, è nata la necessità di creare siti web che potessero adattarsi a qualsiasi tipo di device, attraverso il quale essi fossero richiamati.

Il presente articolo, e quelli a seguire, non vogliono sostituirsi alle tante guide già presenti nel web. Più che un "classico corso online", vorrei contribuire, per quanto possibile, e spiegare, con esempi e demo, come arrivare a realizzare un sito web responsive.

Conoscenze di base

Verranno trattati esempi, dai più semplici a qualcuno più complesso, fino a realizzare un sito "demo". Motivo per cui sarebbe bene avere conoscenze di HTML e HTML5, CSS in generale e CSS3.

Di fondamentale importanza sono le Media Queries. Sono l'ABC da cui partire per costruire un "layout responsive".

Poter testare quanto verrà realizzato, avendo a disposizione smartphone, tablets e pc, è una buona base di partenza. E' vero anche che i primi riscontri verranno dati dal restringimento della finestra del browser. Però potrebbero esserci leggere differenze di visualizzazione, per esempio, tra il monitor del pc ed uno smartphone.

Mobile First!

Quante volte abbiamo letto questo termine, quando ci siamo soffermati a leggere qualche articolo inerente il Responsive Web Design. Ebbene si. Il concetto non è per nulla sbagliato. Con la realizzazione di siti web "responsive", cambia in maniera abbastanza radicale il principio di Design di un sito. Se fino a qualche tempo fa, la grafica era "pensata" per il desktop, da qualche anno a questa parte la situazione si è invertita. Si deve pensare prima in termini di "mobile" e poi, salendo la scala delle dimensioni dei media, al monitor del pc.

Se inizialmente un sito era realizzato in pixel (px), con il Responsive Web Design non esiste più una unità di misura "fissa", bensì si deve lavorare con pagine "fluide" o in "percentuale". Da questo scaturisce il fatto che siti web molto "pieni graficamente", come quelli che venivano costruiti fino a 4 - 5 anni fa, difficilmente potrebbero adattarsi ad una sito per dispotivi mobile. Lungi da me pensare che un sito "responsive" deve essere graficamente "scarno". Si deve trovare un buon compromesso tra contenuti, grafica e velocità di navigazione dei diversi devices mobili.

Una immagine che potrebbe rendere meglio l'idea di quanto scritto fino ad ora, potrebbe essere quella della mia header. Nello specifico quella in cui sono presenti tre tipi di media:

  1. Monitor
  2. Tablet
  3. Smartphone

Anche se in maniera "stilizzata", lo stesso sito web deve essere perfettamente adattabile al "media" attraverso cui lo si vede. Per inciso, anche se non vuole essere nessuna mossa pubblicitaria, il mio nuovo sito web è "Responsive". Prova a navigare tra le diverse pagine prima con un cellulare e poi con un tablet.

Il concetto di "fluidità" è da tenere sempre presente. Lo si deve adattare per quanto riguarda il box contenitore, per le immagini, eventuali video da inserire nelle pagine.

Conclusioni

Dopo questa "panoramica" sui concetti espressi in merito al Responsive Web Design, sono da tenere sempre in evidenza i seguenti:

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati