Responsive Design: Guida Pratica – 3^ Parte

Sulla Rubrica Turismo 2.0 – Navigando si Impara, affrontiamo il tema del Responsive Web Design, in una serie di articoli alla scoperta del nuovo panorama di opportunità nella comunicazione on-line, dominata dal Real Time e dai dispositivi Mobile.

Nel post odierno, descriviamo le linee guida per progettare e creare un buon strumento in Responsive Web Design. Per aiutarti a scegliere le migliori soluzioni.

Progettazione e Testing: il Kit dei Dispositivi

L’obiettivo principale, quando progetti un Sito Web Responsive, è sicuramente creare uno strumento versatile e adattabile a diverse esperienze di fruizione. L’utente che visita il tuo website si collegha da casa, dall’ufficio, ma anche, quando è in viaggio, dal suo SmartPhone oppure con la famiglia e gli amici, da Tablet.

Il primo consiglio fondamentale è quello di allestire un piccolo laboratorio – kit di dispositivi – sui quali testare le varie fasi del lavoro e il progetto finale.

Il Kit dei dispositivi utilizzati per testare il nuovo sito in Responsive Web Design della BCC. Tratti dall’e-zine .Net

Naturalmente occorrerà del tempo per metter su un “laboratorio” in grado di coprire un ampio campionario dei dispositivi in commercio (almeno i più diffusi). All’inizio potremo ricorrere all’aiuto di amici e parenti.

Altri strumenti utili sono i software emulatori, per simulare le vari esperienze d’uso direttamente dal nostro PC.

Fai un salto sulla gallery che meglio rappresenta il panorama oggi disponibile per capire meglio l’importanza di progettare in Responsive Design e il perché oggi è indispensabile creare un website adattabile alle diverse device.

Il Significato di “Responsive”

L’aggettivo “Responsive” in inglese fa riferimento all’atto di rispondere rapidamente e in modo adeguato ad uno stimolo. Corrisponde in maniera appropriata al concetto di “adattivo” o “reattivo” in italiano, ossia capace di adattarsi, modificandosi, per soddisfare nuovi requisiti.

Kayla Knight, esperta web designer e teorica del Responsive Design, sostiene che:

Il sito dev’essere progettato per adattarsi allo strumento utilizzato dallo user, in base ad esempio alle dimensioni dello schermo, al tipo di piattaforma e all’orientamento del dispositivo. Come? Con una strategia progettuale, frutto di un mix di griglie fluide, layout ed immagini flessibili e media query.

Non confondere il sito web in Responsive Design con un sito ottimizzato per mobile!
La differenza sta nel fatto che il website Responsive si adatta automaticamente alla varietà di dispositivi dalla quale l’utente si collega e si collegherà nel prossimo futuro!

Il website del The Boston Globe, che per complessità e autorevolezza ha dato inizio alle danze in questa direzione, viene usato come esempio-svolta nella progettazione web verso le nuove tendenze (necessità) del Responsive Design,

Obiettivi del tuo Progetto

Vediamo insieme gli obiettivi chiave da tenere d’occhio durante la progettazione:

1. ottimizzare layout e contenuti di ogni pagina per i dispositivi mobili, adottando un approccio mobile-first
2. disegnare una soluzione di layout che si adatti al maggior numero di risoluzioni di schermo possibile (dallo Smarphone al Desktop)
3. adattare le immagini fotografiche, illustrazioni e grafiche, video alla risoluzione, alla grandezza e all’orientamento dello schermo
4. proporre immagini leggere, pensando soprattutto alle device che non possono utilizzare la banda larga
5. disegnare un’interfaccia adatta per ogni device (es: touch screen per il Mobile)
6. sfruttare le caratteristiche peculiari di cui altri dispositivi non dispongono (es: geo-localizzazione, call phone con un tap e sensori vari)

Ecco solo alcuni degli esempi più interessanti di siti web creati in responsive design:

1. The New ISO by Andy Clarke
2. Build 2012 Conference and The New Microsoft homepage, by Paravel inc.
3. Mark Boulton
4. Viewport Industries
5. CSS Tricks
6. MacDonaldHotels (per il settore hotellerie)

Il Segreto del Successo: Conclusioni

Sicuramente è iniziata una nuova era nella creazione e nello sviluppo degli spazi web aziendali, anche nell’Hotellerie. Comune denominatore è la semplicità, leggerezza e reattività del Layout e nell’utilizzo delle immagini, che non va visto come un limite nel processo creativo, ma una grande opportunità per imboccare la direzione dell’ottimizzazione della User Experience.

Trovi spunti interessanti nelle nostre conversazioni sulle nuove frontiere della progettazione web per diversi dispositivi? Ci sono argomenti che non hai compreso o che desideri sviluppare più accuratamente?

Commenta il post, scrivici o intervieni sul forum.

Ti aspettiamo per iniziare un percorso di progettazione “adaptive”, nelle prossime puntate.

Webgrafia:
1. Html e-zine: Introduzione al Responsive Design
2. Smashing Magazine: Responsive Web Design: What It Is and How To Use It
– di Kayla Knight
3. QuirksMode website: Mobile Market Overview – di Peter-Paul Koch