Responsive Web Design

Responsive Web ovvero siti adattivi.

February 19, 2012

La stampa ha un vincolo fisico: la dimensione del foglio. Il formato è fisso ed il progetto si adatta al formato scelto. Diversa è la situazione in ambito web. Non possiamo sapere in anticipo esattamente come qualcuno visualizzerà i nostri siti, non esiste un formato fisso, stabilito, unico.

E’ necessario invece creare siti web con la capacità di adattarsi e rispondere.

Progettare per il web significa essere aperti alla natura flessibile del supporto e progettare l’elaborato prevedendo l’uso su differenti devices.
Queste sono le idee alla base del “responsive web design“.

Come realizzare un sito adattivo

Al fine di creare un sito responsive abbiamo bisogno di usare:

  • Griglie flessibili - che si basano su misurazioni relative, siti idealmente elastici che sono relativi a qualcosa di interno al design. Vogliamo essere in via di sviluppo dall’interno verso l’esterno. Content out, not canvas in.
  • Immagini flessibili - in grado di adattarsi al nostro layout di adattamento. Vogliamo utilizzare immagini che possono ridimensionare il layout mantenendo un bell’aspetto.
  • Media Queries - per servire presentazione diversa (e il contenuto potrebbe essere diverso)al dispositivo differente, sistema operativo, browser, larghezza dello schermo, etc…

E’ sufficiente un solo documento HTML?

responsive web design
A Book Apart, Responsive Web Design
Ethan Marcotte è un po’ il guru del web design adattivo e ha creato un libro estremamente utile per chi voglia approfondire l’argomento. Nel suo libro Ethan afferma che il web adattivo deve fornire un documento HTML unico ai differenti browser e dispositivi per assicurare un design il più portabile possibile. Sottolinea anche che non tutti i web designer e developer sono d’accordo con questo approccio e le loro argomentazioni sono dovute sopratutto a due fattori:

  • Un dispositivo implica un contesto, dispositivi differenti hanno differenti capacità.
  • Le priorità e gli obiettivi dei visitatori sono diversi a seconda dei contesti di riferimento.

A causa di queste problematiche (assolutamente veritiere) c’è chi preferisce creare diversi documenti HTML per diversi dispositivi. Recenti ricerche di mercato suggeriscono però che l’uso più comune dei dispositivi mobile si verifica in casa. Il contesto, probabilmente non è così diverso come qualcuno potrebbe supporre. La visualizzazione del sto da un tablet probabilmente non ha obiettivi e priorità molto diverse dalla stessa visualizzazione da un browser, in particolare quando ci si distende sul divano :). Ovviamente alcuni siti avranno comunque ragione di avere una versione dedicata mobile. Ragioni come il costo di sviluppo e la necessità di fornire o meno alcune informazioni (fotografie in altissima qualità o diagrammi e schemi complessi).

Attualmente la soluzione migliore sembra la realizzazione di siti completamente adattivi, ottimizzando gli elaborati e prevedendo l’uso di diversi devices durante tutto il workflow.

Lo sviluppo di un Responsive Workflow

La logica suggerisce che lo sviluppo corretto di siti internet adattivi possa essere riassunto nelle seguenti tappe:

  • Identificare i propri limiti – per quali dispositivi stai progettando e quali risoluzioni hanno?
  • Prototyping – le modifiche di progettazione per la risoluzione del dispositivo saranno più difficili se bisognerà ottimizzare immagini e contenuti. Meglio creare un prototipo e poi perfezionarlo con strumenti di sviluppo da browser (Firebug, console per sviluppatori di Chrome).
  • Prima il mobile – la priorità è quella di decidere quali informazioni sono necessarie per l’utente, evitando di creare tutto e poi andare a nascondere contenuti perchè “problematici” da mobile.
  • Sviluppo progressivo – L’ideale è sempre realizzare progettare dal piccolo verso il grande: ampliare e aggiungere contenuti deve essere una questione prevista durante il workflow. Questa è una tendenza che mi auguro si diffonda un po’ in tutti i settori, ed è in contrasto con quella che è l’abitudine “dell’ultimo minuto”, ossia partire con grandi progetti e poi doverli ridurre sempre di più per mancanza di tempo o risorse.

Io ho in cantiere il mio nuovo sito (ilariagatti.com) e sarà assolutamente responsive. Se avrò occasione approfondirò in un secondo articolo altre questioni, possibilmente più tecniche, legate allo sviluppo… ma nel frattempo ecco alcuni siti realizzati in modo responsive e assolutamente ben riusciti.

More Hazards

Responsive Web Design

Design made in Germany Magazine 5

Responsive Web Design

Earth Hour

Responsive Web Design

Spigot Design

Responsive Web Design

Forefathers

Responsive Web Design

Conferencia Rails

Responsive Web Design

Owltastic

Responsive Web Design

Stephen Caver

Responsive Web Design

Teixido

Responsive Web Design

Miekd

Responsive Web Design

See Sparkbox

Responsive Web Design

Five Details

Responsive Web Design

Illyissimo

Responsive Web Design

 

 

Tags: , , , , , , ,

Leave a Comment