Web e Code Script

Responsive Web Design: cos’è, a cosa serve e come funziona

Chi lavora nel campo del web design e si tiene aggiornato sui cambiamenti che avvengono in questo settore (caratteristica imprescindibile per un designer che si rispetti) avrà sicuramente sentito parlare di Responsive Web Design, concetto strettamente connesso alla Realizzazione di Siti Web Mobile-Friendly e nato a partire dall’articolo Responsive Web Design di Ethan Marcotte.

E’ chiaro a tutti ormai che il mondo della telefonia sta prendendo sempre più piede, si è stimato che in un periodo che va dai 3 ai 5 anni la navigazione in Rete tramite questi dispositivi supererà quella dei dispositivi desktop (dotati di mouse e tastiera), per cui è necessario agire di conseguenza e pianificare un sito che sia facilmente fruibile attraverso dispositivi diversi, quindi smartphone, tablet e console di gioco.

Finora si era soliti realizzare siti web separati, uno in versione desktop, l’altro in versione mobile, confinando in tal modo l’esperienza mobile su sottodomini separati. Ma con l’aumento dei device ci si rende conto che non è possibile creare tanti siti, quanti sono le modalità per visualizzarli, ora quindi sta prendendo piede questa nuova tecnica, che consiste nel realizzare un sito unico adattabile alla dimensione dello schermo del dispositivo tramite il quale viene visualizzato, il tutto in maniera automatica attraverso l’utilizzo di codice CSS3 ed in particolare di MEDIA QUERIES, che permettono di coprire molteplici esigenze di visualizzazione.

Come funziona Media Queries per il Responsive Design

Media Queries permette di captare le dimensioni dello schermo del dispositivo che naviga il sito, quindi di assegnare del codice CSS in base alle varie tipologie di apparecchiature. Se ad esempio abbiamo realizzato un sito web su 3 colonne, quindi di larghezza eccessiva per uno smartphone (per cui l’utente fa fatica a fruirne), possiamo fare in modo che i contenuti dello stesso si adattino su una colonna in modo che diventi più usabile.

Questo il codice, volendo fare un esempio pratico:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      /* Stile CSS per Smartphone */
}

oppure ancora possiamo linkare direttamente a un foglio di stile:

@media only screen and (min-device-width : 480px) and (max-device-width : 640px) {
      /* link al foglio di stile CSS per Small Tablet */
}

Standard degli schermi dei dispositivi di navigazione

Di seguito un elenco degli standard delle misure degli schermi cui adattare il proprio layout:
» MOBILE: width (px) 240 – height (px) 320
» MOBILE: width (px) 320 – height (px) 480
» SMALL TABLET: width (px) 480 – height (px) 640
» TABLET – PORTRAIT: width (px) 768 – height (px) 1024
» TABLET – LANDSCAPE: width (px) 1024 – height (px) 768
» DESKTOP: width (px) 1200 – height (px) 800

Conclusioni

I dispositivi di navigazione della rete aumentano sempre di più e hanno le più svariate dimensioni, per cui diventa fondamentale imparare a creare siti flessibili e adattabili, cominciare anche a pensare diversamente in fase di progettazione. Le media query come avrete capito sono il punto di partenza per il responsive web design, servono solo a capire quali sono i device attraverso i quali si fruisce del sito. Accanto ad esse vi sono altri due fondamentali aspetti su cui porre l’attenzione, ossia le griglie fluide e le immagini flessibili, ma di quest’ultime ci occuperemo in un secondo momento.




emoticons

avatar
Autore: Valerio Del Re

Dott. in Comunicazione e Pubblicità per le Organizzazioni,
Grafico e Web Designer freelance, CEO presso Robadagrafici


Cosa ne pensi? Esprimi la tua opinione.
Scrivi un commento.

Loading Facebook Comments ...

Ti potrebbero interessare anche:


font-awesome

Icon Font Awesome. Come inserire sul sito icone tramite font

Le icone sono ormai uno standard per chi realizza siti internet. Permettono infatti un’ottima personalizzazione per lo stile […]


testare-sito-mobile-online

Testare sito mobile online. Effettua il test con Google

Se sei un webdesigner sicuramente nell’ultimo periodo ti starai dedicando allo studio della tecnica del responsive design. Un […]


orologio-esadecimale

What colour is it? L’orologio esadecimale

Oggi vi segnalo un sito creativo, da veri nerd, per appassionati di grafica e web. Si tratta del […]


sfumature-css3

Come creare una sfumatura con CSS3

CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di […]


css3-box-shadow

Ombra CSS3. Come aggiungerla a testo, div e immagini

CSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli oggetti presenti nelle nostre pagine web, […]


css3-border-radius

Come smussare angoli di immagini e div con CSS3 Border Radius

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca […]


mappa-vettoriale-jquery

Mappa del mondo con ingrandimento in jQuery

Creare una mappa navigabile per il sito internet è diventata ormai pratica comune, specialmente quando si tratta di […]


atlas

Arriva Atlas, la concorrenza di Facebook a Google

È ufficiale: Google ha un concorrente. Si chiama Atlas ed è di proprietà di Facebook. Quest’ultimo aveva acquistato […]


jquery-document-ready-function

La base della sintassi di jQuery: $(document) .ready()

Se vi state avvicinando da poco a jQuery e state iniziando a studiarlo, avrete notato che spesso il […]


php-if-else

PHP: gestire le condizioni con le istruzioni if e else

Se state realizzando un sito nel linguaggio di programmazione Php, magari con il CMS WordPress, imparare a gestire […]


Shares

Robadagrafici.com non è una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi prodotto editoriale ai sensi della legge 62/2001. Le immagini e i testi pubblicati sono valutati come di pubblico dominio: qualora il loro uso violasse diritti d'autore, lo si comunichi all'autore del blog che provvederà alla loro pronta rimozione.
Tutti i contenuti sotto Licenza Creative Commons. Marchi e loghi di soggetti terzi utilizzati in questo sito sono di proprietà esclusiva dei rispettivi proprietari.
Roba da Grafici © 2011-2016 - Progetto a cura di ServiziWeb Srl - Privacy & Cookies Policy