1. Responsive Design: L’intuizione di Ethan Marcotte – 2^
Parte | Formazione Turismo
http://www.formaz ioneturismo.com/in- evidenz a/responsive- design- lintuiz ione- di- ethan- marcotte- 2- parte March 8, 2013
Turismo 2.0 – Navigando si Impara, di Muse Comunicazione® dedica una serie di articoli alle
nuove tematiche del Responsive Web Design, alla scoperta della sua “origine”, delle
caratteristiche fondamentali, delle opportunità, nell’era 3.0.
Oggi analizziamo punto per punto l’ormai celebre articolo di Ethan Marcotte sul Responsive
Web Design, a cui abbiamo fatto cenno nel post dedicato ai cambiamenti della rete.
Web: Media Elastico e Mutevole
Nel suo articolo del 25 maggio 2010, Responsive Web Design, E. Marcotte parte da un
assioma: la grande potenzialità del media web è costituita dalla sua Fluidità – il suo essere cioè
versatile e adattabile – anche se per anni la prassi di costruzione degli spazi web dedicati lo
hanno imbrigliato in pagine a dimensione fissa. Molto probabilmente ciò è accaduto perché,
soprattutto agli inizi, lo scopo era ottenere lo stesso “maniacale” controllo che si aveva sulla
carta stampata.
Con la diffusione di molteplici dispositivi di fruizione, però, diventa necessario liberare la nostra
pagina da quella rigidità progettuale nella quale per anni lo si è forzatamente costretto. Un
primo passo in questa direzione può essere fatto sostenendo l’utilizzo delle Griglie Fluide.
A differenza dell’Artichitettura, l’arte di riempire spazi con ingombri e volumi duraturi e univoci, il
Web Design ha sempre lavorato su uno spazio virt uale disegnando strutture, fruibili da diversi
utenti, con soluzioni e strumenti variegati. Il sito web è, o dovrebbe essere, aggiornato e
soggetto a restyling, se non vere e proprie riprogettazioni, con frequenza.
Il Web è un media flessibile per natura e molte sono le variabili che ne evidenziano la poliedricità:
1. moltitudine di “schermi” oggi disponibili
2. differenti sistemi operativi (desktop e mobile)
3. quantità via via crescente di dispositivi di connessione
4. varietà nelle velocità di banda (ADSL, H3G, UTMS, …)
L’impennata del Mobile ha catalizzato queste esigenze in modo esponenziale. Le aziende, per
questo, manifestano il bisogno di realizzare una versione del sito web per device mobile.
La rivoluzione è soltanto all’inizio… Una cosa però appare chiara: sarebbe pura follia la
creazione di diversi siti web quanti sono oggi i dispositivi attualmente diffusi o che stanno
emergendo ora nel mercato ICT.
Progettazione Flessibile
Per far comprendere meglio il concetto di Immagini Scalabili e di Griglia Fluida – struttura che si
adatta, modificandosi, alla dimensione della finestra di visualizzazione – Marcotte ha creato un
progetto di un e-zine immaginario.
Se proviamo a ridimensionare la finestra, simulando le dimensioni schermo di un Tablet o di uno
Smart Phone, vedremo come, al restringersi della finestra di visualizzazione, muti la
disposizione dei testi (originariamente su 2 colonne) e delle immagini.
Anche un Design Flessibile arriva però ai cosiddetti punti di rottura, nei quali l’immagine o i

2. contenuti risultano tagliati.
Lo screenshot dell’esempio creat o da Et han Marcot t e per individuare i punt i di rot t ura
nel ridimensionament o delle immagini.
Media Queries: Chiave di Volta per Rispondere ai Dispositivi
Alla flessibilità delle immagini e delle griglie, vengono in aiuto le media queries (novità introdotta
nei fogli di stile CSS3), il terzo ingrediente fondamentale nella progettazione Responsive.
Grazie ad esse le immagini e i contenuti diventano completamente “responsive” (= reattivi) al
tipo di dispositivo dal quale sono visualizzati (es: uno SmartPhone), perché permettono di
associare un diverso foglio di stile CSS in quei famosi “punti di rottura” e riposizionare (adattare)
i contenuti in modo più fruibile per le nuove dimensioni.
Il Motto di Ethan Marcotte diventa quindi:
“Adapt, respond, and overcome”
Adat t arsi, Reagire, Risolvere, con soluzione tecniche raffinate e progettate per rispondere
alle esigenze di navigazione, in tutta la sua complessità attuale e, per quanto possibile, futura.
Con questa nuova soluzione, il progetto diventa perfettamente rispondente alle esigenze dei
display più ridotti, anche con diverso orientamento (es iPhone). Prova a ridimensionare ora la
finestra del tuo browser con questa nuova soluzione e ti accorgerai della differenza.
Con questo approccio è anche possibile introdurre nuovi e alternativi layout – in cui alcuni
elementi non indispensabili con una Mobile Experience non sono visualizzati.
Inoltre possiamo attivare il responsive typesetting (composizione reattiva) – sistema per
modificare gradualmente la dimensione e l’interlinea del testo – adeguando la Reading
Experience al display su cui il sito web è navigato.
Responsive Web Design con griglie f luide e media
query: molt o lavoro per poliedrici risult at i
Il Segreto del Successo: Conclusioni
Griglie fluide, Immagini flessibili e Media queries: ecco i
3 ingredienti tecnici per un’eccellente ricetta – il
Responsive Web Design.

3. La tecnica però non è tutto: è rivoluzionata la
progettazione dell’intero percorso che si va
disegnando. Inoltre per un design realmente reattivo e a
prova di “futuro” bisognerà tener conto anche delle
capicità di banda e caratteristiche dei vari dispositivi,
nonché dei propri obiettivi di business. Le novità in
questo campo sono all’ordine del giorno… è d’obbligo
essere costantemente aggiornati.
Come vedi proget t are in Responsive Web Design non è un gioco da ragazzi. Sei
int eressat o a comprendere le nuove dinamiche di proget t azione per il t uo sit o web,
f ruibile da molt eplici disposit ivi?
Lascia un commento al post, manda una mail a info@musecomunicazione.it o fai domande ed
interventi sul forum.
E soprattutto non perderti le prossime puntate…