Responsive webdesign: le basi

Conoscenze necessarie: Buona preparazione su html e css

Richiesti: Editor, browser

Nel tempo il web si è trasformato così come la tecnologia è avanzata. Ad oggi esistono molti modi e molti strumenti per navigare sul web e questo comporta la creazione di un sito che si adatti a varie situazioni.

A questo proposito nasce il responsive design il quale non ha una vera e propria traduzione in italiano in quanto riguarda molteplici aspetti. Questo articolo sarà il primo di una serie che mi permetterà di illustrare passo dopo passo html5 e css3, l’evoluzione di due linguaggi che hanno portato internet ai giorni nostri!

Cos’è il responsive design

Questa è una delle prime domande a cui proverò a rispondere. Non posso non partire da colui che ha coniato questo termine Ethan Marcotte. Nell’articolo da lui scritto su A List Apart discute sulle idee principali che portano al responsive design. Non voglio dilungarmi oltre su questo articolo perchè vorrei invitarvi a leggerlo e nel caso discuterne assieme a voi nei commenti. Sicuramente merita la lettura anche il suo libro: Responsive Web Design. Quest’ultimo non deve assolutamente mancare nella vostra libreria in quanto è molto utile per affrontare per la prima volta l’argomento del responsive design.

Ora cercherò di spiegarvi grosso modo cosa significa il termine responsive. Come esempio utilizzerò l’acqua. Questo elemento presente in natura ha la possibilità di adattarsi al proprio contenitore. Infatti l’acqua può scorrere lungo il letto di un fiume, stare in un bacino idrico, in una bottiglia e così via di seguito. Questa sua flessibilità ci permette di poterla utilizzare come meglio crediamo.

Ora paragonate l’acqua al design del sito. Il contenitore in questo caso è lo strumento che utilizziamo per navigare sul sito. Il design del sito si adatta alle varie risoluzioni di schermo riposizionando gli elementi in modo tale da essere usabili e accessibili in un particolare contesto. Un esempio? L’avete proprio sotto gli occhi… ebbene si… questo sito è stato ottimizzato per varie risoluzioni. Basta che prendete la finestra del vostro browser, la ridimensionate e vedere cosa accade! Se avete l’opportunità potete anche guardare questo sito dal vostro smartphone o dal vostro tablet così da sperimentare come cambia la navigazione sui vari dispositivi.

Tutto chiaro? Semplice vero.

Tecniche e idee

Il responsive design, come definito dallo stesso Ethan Marcotte, è un insieme di tecniche e di idee. Perchè questo? Pensate a quanti dispositivi abbiamo, alla vastità di hardware a cui abbiamo accesso, alle varie risoluzioni di schermo, alla tipologia degli schermi ecc. Credo che il solo pensiero vi faccia riflettere.

All’inizio, quando uscivano i primi dispositivi mobile in grado di navigare su internet si era pensato di creare una versione ottimizzata del sito per ogni dispositivo. Farlo adesso credo che sia a dir poco una pazzia e se ne sono accorti anche i più grandi sviluppatori e designer di tutto il mondo. Occorreva qualcosa che permettesse di essere flessibile e quindi di adattarsi ai vari cambiamenti in modo semplice e veloce.

Come primo passo si è tornati ad utilizzare i layout fluidi, ovvero qui layout che si allargavano o stringevano a seconda della risoluzione dello schermo. Questo è reso possibile dall’utilizzo di unità di misura come le percentuali o gli em. Questi layout in passato non sono mai stati troppo apprezzati soprattutto perchè il loro sviluppo richiedeva anche molto tempo e molta preparazione.

Ovviamente solo l’utilizzo di percentuali o di altre unità di misura flessibili non bastano per creare un layout veramente flessibile. A questo punto entrano in gioco i css3 con le media query. In questo articolo non entro nel dettaglio tecnico della media query in quanto lo farò prossimamente. Ora voglio solo darvi una definizione che vi permetta di capire semplicemente le potenzialità.

In breve le media query espandono il ruolo del attributo media introdotto con i CSS 2 che controlla come vengono applicati gli stili in base al differente supporto utilizzato.

Diciamo che prima potevate solo dividere i css, uno per la stampa, uno per gli schermi dei pc, uno per la tv, ecc. Ora invece potete decidere di ottimizzare quel css per una determinata risoluzione di schermo, oppure per l’orientamento dello schermo dei dispositivi mobile (orizzontale o verticale) e così via di seguito.

Capite bene che le media query permettono di far diventare la nostra struttura html molto flessibile e quindi capace di adattarsi alle varie situazioni. Come ho già detto vi mostrerò ampiamente le loro potenzialità nei prossimi articoli dove avrò modo di entrare nel tecnico e approfondire passo dopo passo le varie sfumature.

Conclusioni

Questo primo articolo voleva essere un primo approccio al responsive design. Oggi se ne sente parlare sempre più spesso ma purtroppo ancora c’è molta confusione in giro. Spero solo di averti aiutato a capire meglio questa terminologia e se non l’ho fatto esponi le tue domande nei commenti. Sarò molto felice di risponderti!

Alla prossima!

6 Commenti
  1. Sicuro che servano i media query? sicuro che con il solo utilizzo delle percentuali non si possa creare un layout responsive?

    Guarda qui:

    http://www.1stwebdesigner.com/css/create-a-responsive-website-video-tutorial/

    e qui c’è video con tanto di spiegazione…:

    http://www.youtube.com/watch?v=eOG90Q8EfRo

    Avvolte le cose semplici funzionano sempre! ;o)

    • Ciao LordSamuel.

      Certo che sono sicuro che servano le media query. Nell’esempio da te citato si fa proprio uso delle media query e se non ti fidi basta che guardi il codice sorgente della demo: http://1stwebdesigner.com/demos/Theme/style.css

      Sicuramente esistono altre tecniche per il responsive design, per esempio l’utilizzo di javascript, però l’uso dei css permette di alleggerire il codice, è più semplice da gestire e da mantenere.

      Se provi a cercare qualsiasi articolo o tutorial sul responsive design trovi sempre il riferimento alle media query. Non puoi utilizzare solo le percentuali per realizzare un layout che si adatti alle varie risoluzioni in quanto devi tener conto di moltissime cose. Per esempio un menù si deve comportare in modo diverse sui dispositivi mobile rispetto alle risoluzioni per il desktop!

      Nella demo da te citata si fa uso delle percentuali perchè è una scelta del webdesigner. Si possono usare anche i pixel. Tutto dipende da ciò che vuoi ottenere e dal lavoro che bisogna svolgere

      • Mi sono espresso male, la mia indicazione era sul fatto che non serva fare uso in modo massiccio di media query, vedi i vari framework etc….

        Dimostrazione ne è quel video e il tutorial che, usando una sola dichiarazione e 230 righe di css si ha lo stesso risultato di chi usa media query in abbondanza… ;o)

        P.s. Se usi valori in px non puoi seguire quel tutorial…. a meno che di usare media query a go go

        • Tutto dipende sempre dal progetto sul quale stai lavorando. Tanto per citare un framework, c’è bootstrap. È appena uscita la versione nuova ma se vai ad analizzare il codice potrai notare tu stesso che fa largo uso delle media query. Questo perchè ci sono moltissimi elementi e a varie risoluzioni si devono comportare in modo diverso.

          Un altro esempio che ti posso portare sono i temi per wordpress, joomla, drupal, ecc. Se sviluppi un tema ci sono moltissime variabili in gioco, molti elementi e quindi è normale che farai un grande utilizzo delle media query.

          Non puoi prendere come esempio un banalissimo layout con pochissimi elementi per poter dare una valutazione concreta. Per renderti conto di questo basta che navighi in rete e analizzi il codice dei grandi siti come smashing magazine.

          Per quanto riguarda i pixel invece non concordo pienamente. Sicuramente utilizzerai più media query ma non è detto che ne farai un uso massiccio!

  2. Premesso che non voglio aprire una polemica, io ti dico che non serve fare un uso massiccio di media query e tu mi proponi, i vari framework per joomla, wordpress, etc…compreso l’ultimo “nato” bootstrap? Tutti questi framwork sono creati per tutti coloro che non sanno realizzare nemmeno una paginetta come quella che ti ho fatto vedere. Che cosa non può gestire quella paginetta che invece pensi possano gestire solo i framwork per i vari cms etc…?

    Il banalissimo layout come lo chiami tu è uno scheletro dentro metrici quello che ti pare. Il fatto e che oggi giorno si vuole sempre di più la pappa pronta e non si vorrebbe mai scrivere una riga di codice… Eh poi magari ci si spaccia per programmatori – parlo in generale – copiando e incollando codice di qua e di la.

    Il sviluppare un tema ha come presupposto che altre persone potranno combinarselo come meglio crede ecco perché viene riempito di media query, per le varie scelte che potranno fare. Ma un sito e un sito, fallo da zero e vedrai che sono poche le istruzioni che ti servono.

    • Non voglio neanche io aprire una polemica. Io ho “preso” soltanto le tue parole. Hai nominato i framework ed io ho solo preso in considerazione uno fra i tanti. Utilizzare un framework non significa aver la pappa pronta. Sicuramente vengono utilizzati da moltissime “persone” che si reputano web designer e/o programmatori ma ciò non significa che non siano utili. Io stesso li utilizzo per alcuni progetti perchè in fase di realizzazione in un team possono fare la differenza.

      Di ogni framework comunque puoi utilizzare una minima parte a seconda di ciò che occorre. Avere una griglia funzionale ti garantisco che snellisce il lavoro. Con cìò non voglio assolutamente dire che bisogna per forza utilizzarli. Molte aziende preferiscono svilupparli in casa.

      Per quanto riguarda la realizzazione di siti a me capita molto spesso di dover realizzare progetti dove il cliente chiede sempre di più di poter modificare i vari parametri e poter quindi lavorare autonomamente. Questo non succede su piccoli progetti dove ovviamente ottimizzo il codice utilizzando solo lo stretto indispensabile.

      Quello che voglio dire che sparare a zero come stai facendo tu lo vedo un tantino azzardato. Ogni progetto va valutato di caso in caso e io non trovo nulla di male nell’utilizzare come strumenti framework come bootstap.

      Io personalmente mi sono sviluppato un mio personale progetto simile a bootstrap e questo mi ha aiutato a capire come funzionano le media query e come poterle ottimizzare. Mi ha aiutato ad ottimizzare il mio lavoro così da non dover di volta in volta riscrivere nuovamente del codice.

      Non sono d’accordo sul fatto che siano poche le istruzioni che tu debba scrivere quando sviluppi un sito. Dipende sempre cosa devi fare. Se hai un sito e-commerce non puoi dirmi che ci sono poche linee di codice da scrivere. Quest’ultimo vuole essere solo un esempio!

      Comunque se vai a leggere il mio secondo articolo sulle media query anche io ho portato un piccolo esempio utilizzando veramente pochissimo codice. Appena riprendo a scrivere porterò altri esempi, parlerò anche dei framework e, secondo me, come devono essere utilizzati.

      Sia ben chiaro una cosa: io odio come te le persone che si spacciano per professionisti. Non hai idea di quante volte mi ci sono scontrato. Non hai idea di quante volte mi hanno detto: “Ma esistono template già fatti? Perchè lo devi sviluppare? Che differenza c’è tra il tuo codice e quell’altro?”. Ti posso garantire che queste cosse accadono molto spesso e da aziende che si reputano professionali e quello che è peggio è che i clienti non si rendono conto soprattutto qui in Italia.

      Reputo i framework css, i cms ecc degli ottimi strumenti ma come ogni cosa deve essere utilizzata professionalmente. Purtroppo il mondo dell’open source non ha solo aiutato ma ha favorito anche la nascita di certi “individui”.

      Concludendo: io sono partito da un tuo commento che per come lo hai scritto sembrava provocatorio. Io ho cercato di risponderti con tutta tranquillità. Come ho sempre scritto io ho aperto questo blog per poter discutere con altri utenti in quanto mi piace il confronto di opinioni e soprattutto credo nello scambio reciproco di informazioni perchè porta ad una crescita culturale. Restare chiusi e non confrontarsi è una mentalità che a me non piace!

      Spero di aver chiarito la mia posizione e le mie idee. Non voglio assolutamente che i commenti diventino una sorta di discussione inutile.

      Se vuoi discutere con me, scambiare opinioni, puoi scrivermi tranquillamente per e-mail oppure ti posso anche lasciare il mio contatto skype oppure mi trovi su google+ e da li possiamo chattare! 😀

Rispondi a LordSamuel Annulla risposta

Attenzione

Se dovete postare del codice utilizzate uno di questi tool online (o un altro che preferite): pastebin.com - gist.github.com - jsfiddle.net