Responsive Design: come e perchè progettare siti responsive?
Il tuo sito è Responsive? I tuoi visitatori riescono ad accedere comodamente da qualunque dispositivo? La parola d’ordine è mobilità, il fornire applicazioni, soprattutto web, su qualunque dispositivo, in qualunque angolo dell’Universo.
Prima di parlare, però, direttamente di Responsive Design, ritengo necessario scrivere una premessa per rispolverare un po’ di passato, capire perché sia nato e come nel corso degli ultimi mesi questa tecnica si stia diffondendo.
Un po’ di storia… ieri
Nel 2003-2004 coloro che avevano un accesso al web possedevano un PC desktop o un notebook. La dimensione degli schermi più diffusi variava dai 14” ai 17” e le risoluzioni dai 1024 ai 1280 pixel in larghezza. Accantonata l’obsoleta risoluzione a 800x600px, realizzare un sito web divenne più “semplice”. Si puntò molto su un layout classico a 960px, il più diffuso, oppure su un design fluido, più difficile da gestire. E per 4-5 anni la situazione rimase stabile.
Dal 2007 in poi arrivarono con prepotenza e per qualunque tasca netbook, smartphone, tablet, schermi Full-HD e Retina Display, e Web-TV, stravolgendo il modo di navigare – immagino che per Jakob Nielsen si sarà accumulato molto materiale da analizzare per aggiornare i suoi studi sulla navigazione e sull’usabilità.
Oggi…
Le conseguenze le conosciamo di già. Imbottigliati nel traffico diamo uno sguardo alle email o alle ultime notizie. In vacanza ci siamo dimenticati dei passanti indigeni e ci facciamo consigliare dai sempre più numerosi portali che trattano di tutto o da Siri. In cucina non apriamo più il ricettario della nonna ma ora basta un app o un sito specializzato. E la sera in salotto annoiati dalle inutili trasmissioni televisive entriamo su Google e vagabondiamo per la rete.
Oggi gli accessi ai siti web da ciò che è diverso da un PC desktop o notebook sono in costante aumento e su alcuni siti sono addirittura superiori alla controparte meno mobile.
Cos’è il Responsive Design?
A questo punto concordiamo tutti, sia dal lato utente che dal lato progettazione, che un sito web debba essere realizzato per funzionare correttamente su più dispositivi. Nasce così il Responsive Design che, come Ajax, non è un nuovo linguaggio di programmazione ma l’integrazione di strumenti già a disposizione da qualche anno: JavaScript, in particolar modo la libreria jQuery, e il CSS3. Inoltre, io aggiungerei anche un pizzico di organizzazione e studio, prima di iniziare a scrivere il codice, per disporre correttamente i contenuti all’interno della pagine.
Il termine Responsive in italiano è traducibile come capacità di adattarsi, e nel caso del web è evidente che debbano essere i contenuti ad adattarsi in larghezza e altezza al proprio contenitore fisico, il display.
Se sei un grafico o un esperto di usabilità non dovrai fare altro che progettare il layout per gli smartphone, per i tablet, per i netbook, e infine per i comuni schermi da PC desktop e notebook (l’ordine non è casuale ma voluto). Per iniziare bastano quattro versioni per capire come il sito potrebbe comportarsi visto da schermi differenti. L’approccio migliore è pensare il sito prima per il mobile, e via via progettarlo per le risoluzioni più grandi.
Dal lato CSS e HTML, invece, non dovrai imparare quasi nulla di nuovo, ma devi partire dal fatto che il codice dovrà essere scritto per più dispositivi, o meglio per più tipologie di risoluzioni del display.
In che modo scrivere il CSS? Prima di iniziare a scrivere il codice è necessario analizzare i layout grafici del sito progettati per i vari dispositivi ed evidenziare gli elementi in comune e quelli più importanti. Questi elementi comuni possono essere il background, il colore dei testi e dei link, i bordi delle immagini, per citarne solo alcuni. I più importanti sicuramente il logo, la barra di navigazione, e il contenuto principale della pagina.
La strada migliore che potrai intraprendere per realizzare il tuo sito Responsive è usare il CSS3. In questo caso non sarà necessario scrivere più fogli di stile. Ne basterà uno. La prima parte di codice va riservata agli elementi in comune e poi occorre suddividere il resto del codice per tipologia di display.
In CSS3 il richiamo alla tipologia del display lo si fa semplicemente con la dichiarazione
@media only screen and (min-width: 960px), only screen and (min-device-width: 960px) {
.inner {
margin:0 auto;
max-width:1020px;
min-width:940px;
padding:0 10px 10px;
text-align:center;
}
/*altro codice css*/
}
Dal lato HTML non cambia nulla. Questo perché è il CSS a fare tutto il lavoro, e in teoria anche i siti più vecchi possono essere adeguati alle nuove esigenze.
L’uso solo ed esclusivo del CSS3 però comporta alcuni problemi di compatibilità. Quello che vogliamo dal nostro sito è che sia visibile da quante più persone possibili. Giusto? I selettori CSS3, tra cui i media queries, non sono compatibili con le versioni 6, 7 e 8 di Internet Explorer.
Occorre quindi ricorrere a jQuery. Usando la libreria Selectivizr possiamo attivare i selettori CSS3 anche nelle vecchie versioni di IE.
Se deciderai di utilizzare jQuery per rilevare la risoluzione del display, potrai scrivere in un foglio di stile – che per comodità chiamiamo screen.css – tutti gli elementi che accomunano le versioni del sito. Mentre in fogli di stile separati (mobile.css, 1920.css, …) dovrai scrivere le caratteristiche relative ad ogni singolo dispositivo. L’uso esclusivo del jQuey però può comportare alcuni problemi a chi ha disattivato volutamente JavaScript e le caratteristiche Responsive si perderebbero.
La libreria Adapt.js di 960.gs analizza la risoluzione e richiama il file css desiderato:
range: [
'0px to 760px = mobile.css',
'760px to 980px = 720.css',
'980px to 1280px = 960.css',
'1280px to 1600px = 1200.css',
'1600px to 1920px = 1560.css',
'1940px to 2540px = 1920.css',
'2540px = 2520.css'
]
Semplice, no?
Piccola curiosità…
E’ però interessante notare il fatto che un sito web che non usi nessun selettore CSS, in pratica uno di quei vecchi siti scarni degli anni ‘90, sia già Responsive. E anche a voler aggiungere qualche foto e video la libreria jQuery ci viene in nostro aiuto. Non sarà però il nostro caso visto che il sito che vogliamo progettare deve essere completo.
Conclusioni
Oggi abbiamo “chiacchierato” sulla nascita del Responsive Web Design, accennando agli strumenti usati per renderlo immediatamente fattibile, almeno dal punto di vista del codice.
Dalla progettazione iniziale del layout al codice finale, ai trucchi per estendere il supporto anche ai vecchi browser per poi passare infine ai test e agli strumenti basilari, l’argomento Responsive è davvero interessante e utile.
Durante la prossima lezione, invece, analizzeremo nel dettaglio i dispositivi da prendere in consederazione, come organizzare i contenuti e come progettare il layout.
E tu hai già realizzato qualche sito Responsive? Se sì, quali sono le principali difficoltà che hai incontrato?
Indice della guida
Gli argomenti che tratteremo sul Responsive Web Design saranno i seguenti:
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
46 commenti
Trackback e pingback
-
Corso grafica web: utilizzare le griglie | Your Inspiration Web
[...] all’evoluzione delle risoluzioni dei monitor maggiormente in uso e alla nascita del concetto di web design “responsive” – sempre… -
Twitter Bootstrap Scaffolding: come utilizzare le griglie? | Your Inspiration Web
[...] Bootstrap implementa il responsive design nelle nostre pagine attraverso le media-queries. Spulciando il codice, noteremo che quelle messe a… -
Responsive Design: Lo studio del layout e la gestione dei contenuti | Your Inspiration Web
[...] prima lezione abbiamo affrontato l’evoluzione del Responsive Web Design e del perché sia nato. E ci siamo resi [...] -
Come progettare un layout web responsive con le media queries? | Your Inspiration Web
[...] Introduzione: come nasce il Responsive Design, accenno ai linguaggi di programmazione usati [...] -
Responsive web design: compatibilità e testing | Your Inspiration Web
[...] Introduzione: come nasce il Responsive Design, accenno ai linguaggi di programmazione usati [...] -
Mobile First: la nuova tendenza | Your Inspiration Web
[…] Si è diffusa infatti la tendenza del responsive design, ovvero dello sviluppo di siti che si adattano alle dimensioni… -
Responsive Design: come e perchè progett...
[…] Il tuo sito è Responsive? I tuoi visitatori riescono ad accedere comodamente da qualunque dispositivo? La parola d’ordine è…
Aspetto con ansia le prossime lezioni! Quali tool utilizzi (o consigli) per verificare l’esatta visualizzazione sulle diverse risoluzioni?
Ciao Valerio, la tua domanda avrà una risposta proprio nel prossimo articolo. L’analisi dei dispositivi servirà a capire quali strumenti (o tools) possiamo adottare per testare i siti web.
Bravo Davide, non vedo l’ora di leggere le prossime lezioni ;) grazie!
Grazie, alla prossima!
Grande Davide, ottimo inizio! Dopo questa Preview non posso che aspettare con impazienza le prossime lezioni! :D
Puoi consigliarmi qualche Libro / e-Book valido per approfondire l’argomento Responsive?
Grazie.
Di libri ed ebook ce ne sono diversi, soprattutto in lingua inglese. Alcuni testi si occupano di usabilità del mobile, altri invece prettamente di codice.
Più che consigliare un libro in particolare, preferisco sempre dire che la cosa migliore sia seguire l’istinto. La prefazione e l’indice sono indicatori non di qualità ma di avvicinamento alle proprie competenze. Leggerne poi due o tre è sempre meglio di uno. Conoscere più punti di vista fa bene.
Poi c’è un’altra tecnica: il reverse engineering.
Con i cinque articoli che usciranno nelle prossime settimana e con le vostre domande, affronteremo tutti gli argomenti utili a realizzare i primi progetti responsive e a risolvere alcuni aspetti tecnici relativi per esempio alle immagini.
Ottimo articolo! Sei stato molto chiaro, complimenti!
Aspetto con ansia la seconda parte :-)
Grazie, alla seconda parte.
sono sempre ottimi/utili i vostri articoli! in attesa del prossimo! :-)
Grazie, si cerca sempre di dare il meglio.
veramente, bravi, questa è la vera soluzione per l’evoluzione del web: il confronto
Ottimo articolo! Grazie veramente per la vostra condivisione di nozioni! Non vedo l’ora che escano gli altri!
Grazie. La seconda parte, molto interessante, arriverà esattamente tra due settimane.
Ottimo lavoro, Davide. Buona anche l’idea di una guida strutturata.
Grazie. L’argomento è molto vasto e un unico articolo di certo non sarebbe bastato. Insieme al team si è quindi deciso di creare una guida più corposa. Alla prossima…
interessante articolo, complimenti!!!
sarò ripetitiva ma anch’io aspetto con ansia gli altri articoli….
Grazie, e l’essere ripetitivi non può che essere da stimolo per dare del nostro meglio. Quindi ben vengano! :-)
Penso che questi articoli saranno apprezzati da molti, tuttavia oggi una premessa sul responive design non dovrebbe prescindere da i “lati oscuri” della questione: un design responsivo non è mai “mobile-first” perché se uno ha davvero in mente i device mobili come target deve fare un sito ad hoc e non un sito responsivo. La questione dovrebbe essere nota a tutti quelli che si avviano ad utilizzare il resonsive design, che rimane una cosa ottima, ma se il target principale sono i desktop (o desktop like) questo articolo http://www.webdesignshock.com/responsive-design-problems/ (in inglese) è un ottimo punto di partenza.
Giusta osservazione Giuseppe. Alcuni siti web possono avere come target i desktop, altri il mobile. Ma ci sono casi in cui un sito debba essere progettato per tutti quanti i device.
Di lati negativi e positivi ce ne sono tanti, sia che si tratti di un sito Responsive sia che si tratti di un sito studiato ad Hoc. E’ ovvio che una piccola azienda può non aver bisogno di un sito appositamente studiato per smartphone ma allo stesso tempo desidera che sia correttamente visibile.
La questione è comunque molto spinosa e non può essere affrontata tramite un articolo o un commento.
La soluzione migliore, e questo deve essere un Project Manager o lo stesso Web Designer a capirlo, è analizzare caso per caso.
Facebook, La Gazzetta, o un sito universitario necessitano di un sito ad hoc. Ma uno studio dentistico o di architettura?
Era quello che intendevo. Il design responsivo non è il male, ma come ha detto qualcuno a proposito “there are no silver bullet” ovvero non c’è la soluzione ideale per tutti i casi. Una piccola azienda che vende un solo prodotto: una app per smartphone, probilmente non è saggio che si affidi al design responsivo. E’ un caso limite, certo. Il mio commento voleva dire che chi vi si avvicina al responsive design deve capire bene a chi serve e a chi no, per questo mi sembrava giusto dirlo in un contesto di premessa a questo argomento.
YIW si rivela davvero una delle migliori risorse online, articoli sempre interessanti e con tematiche realmente utili e nel momento giusto!
Complimenti e soprattutto grazie!
Grazie a te!
Molto interessante l’articolo, complimenti per il tutorial (che verrà).
Per il mobile bisogna nascondere una parte del sito, sembra che la soluzione migliore sia la regola css “display: none” – ma a Google non piace il contenuto nascosto, lo dice anche nelle sue linee guida…altre soluzioni?
Questa è una delle mie difficoltà :)
Si, c’è un’altra soluzione molto importante e comunque semplice che affronteremo nei prossimi articoli. Il banale display:none è la soluzione così comune. Affronteremo però il processo inverso. Cioè cosa rendere visibile in più rispetto al mobile, e non cosa nascondere.
Il fatto di nascondere qualche cosa nasce quando si progetta il sito partendo dal desktop e poi si passa al mobile. Il consiglio è partire dal mobile e poi aggiungere altri elementi per il desktop.
Hai ragione Davide, ma se io tolgo il display:none all’esempio sotto, il box6 mi lo fa vedere anche sul cellulare. Mah, si vede che da qualche parte sbaglio :)
.box6{
display:none;
}
@media only screen and (min-width: 768px) {
.box6{
display:inline;
width: 40%;
padding-left: 2px;
padding-right: 2px;
margin: 2px 2px 2px 2px;
float: left;
text-align: left;
}
Oh, veramente interessante :D Attendo con ansia i prossimi articoli!
A presto e complimenti per l’articolo!
Grazie Nicola.
Credo che il responsive design possa essere nocivo se si prende un sito costruito a 960px di larghezza e poi con il RWD lo si adatta per mobile….
L’unica soluzione è partire con l’approccio Mobile First (ovvero dal dispositivo più piccolo) e poi con le media queries ed il progressive enhancement adattiamo il layout del sito “allargando il browser”.
Il mobile first permette di costruire un sito ottimizzato, performante e che è future friendly… ho già alle spalle un paio di siti mobile first e vi garantisco che ne vale la pena.
Inoltre dobbiamo abituarci a lavorare sempre meno su photoshop (evitando le anteprime pixel perfect) e passare a lavorare maggiormente su browser.
Ciao Stefano, nell’articolo è stato fatto un accenno riguardo l’ordine di realizzazione, che sarà approfondito sul prossimo articolo. Come hai confermato, un sito Responsive va progettato prima per Mobile, e a seguire Tablet e PC Desktop.
Non credo però che si possa fare a meno del’uso di Photoshop o simili. Si deve, come avviene da un decennio, lavorare necessariamente su elementi grafici, perfetti. Perché il cliente deve sapere cosa compera esattamente. Lo sviluppatore web, in un team di lavoro, deve sapere come scrivere esattamente il codice senza ripetere più volte il processo.
Ciò non toglie che sul browser occorra lavorare di più. Serve eseguire molti test, ma occorre pensare ad una classificazione di massima attraverso la quale si può adattare un sito.
Questo però è il mio punto di vista, basato sull’esperienza.
Quello del Responsive è comunque un mondo “nuovo” arrivato con i CSS3 e ancora non perfettamente consolidato. E ogni nuovo punto di vista, ogni nuova soluzione, ogni esperimento, può essere condiviso per accrescere e migliorare il web.
Non dico di non usare più photoshop (questo mai), però quando lo apro per iniziare a disegnare il layout e lui mi chiede la grandezza del documento parto già in errore. Il web non è un foglio di carta con dimensioni fisse… il bello del web-browser è che non saprò mai con esattezza la sua dimensione!
Vi consiglio di vedere cosa dice Stephen Hay riguardo al Responsive Design Workflow ( http://www.slideshare.net/stephenhay/mobilism2012 ).
Ovviamente non c’è una strada giusta da seguire, poi ognuno di noi ha il proprio approccio…
io personalmente con photoshop faccio due layout: uno di larghezza 320px e poi uno a 1400px (insomma desktop) così il cliente potrà vedere il prodotto; il resto faccio tutto da browser mettendo dei breakpoint quando serve e lavorando in percentuale col css.
Mi intrometto: a proposito dello sviluppare direttamente su browser ho scritto tempo fa questo articolo, a cui è seguito un interessante dibattito ;)
(mi faccio propaganda da sola, ahahhah)
Grazie Sarah, il tuo articolo e l’intero dibattito risponde perfettamente agli ultimi commenti. Da notare che a distanza di due anni, c’è chi si pone ancora la stessa domanda ma l’uso di Photoshop o simili mi sembra in costante aumento.
Impressionante vedere che il tuo articolo ha già due anni…. e poi un’altra cosa a sfavore di photoshop è che coi font è proprio pessimo….
Ciao Davide,
grazie per l’articolo.
Volevo chiedere se a tuo parere è meglio creare un sito responsive oppure un sito per desktop e uno per smartphone.
A volte mi trovo a navigare alcuni siti dal mio smartphone che non hanno la possibilità di visualizzare il sito come sarebbe per desktop.
E’ un inconveniente dei temi responsive, come gli si può ovviare?
Andrea
Ciao Andrea, la scelta tra un sito Responsive o una suddivisione dipende da molti fattori, secondo me.
Per prima cosa i contenuti: saranno uguali o si vuole offrire un’esperienza completamente diversa? E’ importante definire questo primo punto.
In secondo luogo costi e tempi di manutenzione: modificare un contenuto su un sito Responsive significa lavorare solo un progetto. Nell’altro caso si lavora con due progetti diversi, ed è più costoso.
Altro fattore che non sottovaluterei è il posizionamento sui motori di ricerca. Anche in questo caso un sito Responsive consente di effettuare un unico lavoro di posizionamento. Nel caso di una suddivisione dei progetti, il lavoro è doppio. Ma due siti web che offrono lo stesso contenuto non rischiano di penalizzarsi a vicenda, dopo gli aggiornamenti agli algoritmi di Google? (Su questo punto è meglio avere una conferma o una smentita da parte di un esperto SEO).
Per quel che riguarda la visualizzazione estesa vista da Mobile, una soluzione ci potrebbe essere. Scrivere il codice CSS per ogni risoluzione scelta su fogli di stile separati. Selezionare quello adatto al display usando per esempio uno script di jQuery, e inserire all’interno della pagina (per esempio nel footer) un link alla versione desktop che annulla la scelta automatica del foglio di stile portandolo in manuale.
Ciao Davide,
grazie mille della risposta.
Molto esauriente ma sopratutto mi hai chiarito un po’ le idee su quale sia la scelta migliore da adottare.
Saluti
Andrea
Credo che la soluzione alla domanda meglio responsive o separato ancora non ci sia, ogni approccio ha i suoi pro e contro…
Ti consiglio di vedere sui vari blog di design la diatriba tra il sito di obama (responsive) e quello di Romney (mobile separato).
Io preferisco fare un sito unico, è più difficile (e talvolta ancora un pelo prematuro) ma è anche un vantaggio ed un investimento per il tuo futuro.
Tra due anni faremo un sito unico oppure dovremo fare un sito mobile.miosito.it + tablet.miosito.it + TV.miosito.it + google_glasses.miosito.it + desktop.miosito.it ?
Se ti chiedo di farmi un sito per mobile che dimensioni deve avere? Ok parto da 320px ma su iPad si deve vedere bene? Il tablet è mobile….?
L’unica certezza che ho è che il web è uno solo e non esiste il desktop o mobile web.
Ottimo articolo!
Una domanda…per sfruttare il css3 al meglio per un layout responsive è necessario avere un markup in HTML5 o va bene anche il classico xHTML?
Perchè lavorare in html5 vuol dire avere grossi problemi di compatibilità soprattutto con IE6,7,8…
Hmm it looks like your blog ate my first comment (it was extremely long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog.
I too am an aspiring blog writer but I’m still new to everything. Do you have any recommendations for beginner blog writers? I’d definitely appreciate it.