Cos’è il Web Design Responsivo? Alcuni esempi pratici.

La definizione più nota del Web Design Responsivo risale al 2010 quando quando Ethan Marcotte ha definito su A List Apart gli aspetti principali di questa tecnica nello sviluppo di pagine web.

L’elemento rilevante del design responsivo va al di là delle pure questioni tecniche e riguarda il suo obiettivo fondamentale: risolvere la grande frammentazione di dispositivi con cui le pagine web vengono poi effettivamente utilizzate.

Invece di realizzare design su misura per ciascuno degli innumerevoli strumenti con cui navigare possiamo considerare ciascuno di essi una sfaccettatura della stessa esperienza. Possiamo realizzare design in grado di adattarsi ai media che li distribuiscono.”

Cos’è un sito responsivo?

In senso stretto un sito web responsivo utilizza questi tre strumenti:

Media Queries

Una media query permette al webdesigner di definire delle condizioni da verificare per modificare la presentazione del contenuto in base alle proprietà dello strumento che usa l’utente, ad esempio uno smartphone, un tablet o uno schermo grande. Ma possono essere usate anche per controllare la resa su stampa o altri casi d’uso particolari.

Griglie fluide

L’utilizzo di griglie permette la creazione di design fluidi le cui colonne si adattano proporzionalmente al device. In questo modo il designer si assicura che l’esperienza d’uso sia coerente a prescindere dal modo in cui viene utilizzato il sito.

Design flessibili

L’enorme quantità di device presenti al mondo, quasi 10 miliardi, constringe a ripensare il design e lo sviluppo di un sito web in una direzione più organica e strutturata, in grado di prevenire usi inconsapevolmente distruttivi del design stesso durante la vita del sito. Ad esempio prevenire che file media evoluti (filmati di youtube, embed di twitter etc) siano di dimensioni maggiori degli spazi in cui vengono caricati.

L’utilizzo di queste tre tecniche è solo l’inizio di un processo che riguarda prima la fase progettuale rispetto alla pura esecuzione: invece di creare un design specifico per ogni esperienza immaginabile, è auspicabile che la transizione tra contesti di fruizione diversi venga gestita in maniera progressiva.
Per sviluppare soluzioni responsive funzionali è quindi necessario mettere al centro del processo di sviluppo l’utente finale e la sua esperienza d’uso.

3 esempi  di design responsivo

Beltrami

beltrami.it su desktop
beltrami.it su desktop
riorganizzazione degli elementi nella versione mobile della hompage di beltrami grazie al design responsivo
beltrami.it su mobile

Per il sito corporate di Beltrami, azienda che realizza biancheria per alberghi e ristoranti di lusso, l’esigenza era quella di proporre dei contenuti in modalità slide con una visualizzazione full screen per le varie aree di focus, forzando lo scroll della pagina in modo tale da simulare una vera e propria presentazione. Con il passaggio a mobile però, sia per la differenza di fruizione che per la mancanza di spazio che fa perdere elementi di controllo, abbiamo deciso di ripristinare lo scroll normale: le singole slide continuano ad adattarsi alla dimensione dello schermo ma la navigazione non è più forzata.

Smartrooms

smartrooms.it - transizione da desktop a mobile del design responsivo
smartrooms.it – transizione da desktop a mobile

Per Smartrooms, sito di camere low cost per turisti e studenti a Trieste, era necessario privilegiare l’accesso rapido alle sezioni Prenota e dove siamo da mobile. Il menu di navigazione standard si riduce a queste due voci, sempre presenti, mentre le altre sono nel classico hamburger menu. Importante anche il tap to call: con un semplice touch sull’icona del telefono da mobile parte la telefonata. Infine lo switch di lingua da desktop è esteso, da mobile si visualizza la lingua attiva, con un touch si accede alle altre opzioni.

Aurora Viaggi

auroraviaggi.com, alcune proposte su desktop
auroraviaggi.com, alcune proposte su desktop
auroraviaggi.com, grazie al web design responsivo la visualizzazione su mobile cambia in questa modo
auroraviaggi.com, le stesse proposte su mobile

Per AuroraViaggi, agenzia di viaggi di Trieste attiva da 60 anni, abbiamo affrontato il problema di come proporre un contenuto fortemente strutturato e generalmente proposto sotto forma di tabella che fosse fruibile anche da cellulare. In questo caso la soluzione è stata di mantenere la struttura tabellare su schermi di dimensioni sufficienti per visualizzare correttamente e completamente le informazioni. Appena la dimensione del device con cui si fruisce il contenuto diventa insufficiente per avere una visione chiara la struttura viene alterata e ogni proposta diventa individuale, con gli elementi identificativi ripetuti. In questo modo, dando anche maggior risalto all’immagine, si concilia un’esperienza di navigazione maggiormente emotiva e fotografica tipica dei dispositivi mobili.

Abbiamo appena visto tre esempi di soluzioni per un design responsivo applicabili allo sviluppo di un sito web in base al tipo di device utilizzato che utilizzano come unico riferimento la dimensione dello schermo del device stesso. In questo modo ci assicuriamo di essere future proof a prescindere da quali nuovi formati, proporzioni o strumenti di fruizione dovessero diffondersi in futuri.

Sei interessato a una soluzione di questo tipo anche per le tue necessità? Contattaci!

Turismo FVG: Social Wall

All’interno del padiglione Italia dell’Expo 2015 quest’anno c’era anche un piccolo pezzo di Noiza.

Per l’agenzia Turismo FVG abbiamo realizzato un Social Wall per aggregare in tempo reale i contenuti digitali provenienti dai diversi Social Network e uniti dall’uso dell’hashtag #Fvglive. Questo è stato esposto nel corso della settimana dedicata alla regione Friuli Venezia-Giulia, e ha dato visibilità alla grande quantità di contenuti social, soprattutto fotografici, prodotti dagli utenti della rete.

social-wall_mocku-up

Dal castello di Miramare alle montagne carniche, tramite il Social Wall i visitatori del padiglione Italia hanno avuto modo di fare un piccolo tour nella nostra splendida Regione.

Joseph.land: web e promozione della cultura del Carso

joseph carso trieste

Pietra bianca, terra rossa, la bianchera. La bora e il mare in lontananza.
Le suggestioni sensoriali offerte dal Carso sono assolutamente uniche.

Per capire appieno questo territorio, i suoi sapori e i suoi profumi è necessario conoscere anche le persone che qui vivono e lavorano.

Joseph.land nasce proprio da qui: dalla necessità di promuovere la cultura del Carso partendo dalle persone.

I servizi offerti da Joseph sono pratici e partecipati.

    • Organizzazione di eventi: visite di mezza giornata alle aziende agricole e artigianali, fatte di laboratori pratici, divertimento e degustazioni. Per capire l’essenza del Carso conoscendo le persone, i luoghi e i sapori giusti.

 

    • Offerta di terra agricola: per lavorarla in un contesto di orti sociali

 

  • Formazione: Percorsi formativi articolati su più mesi: corsi di apicoltura, adozioni di ulivi, adozioni di vigneti, sotto la supervisione di agricoltori e tecnici.

L’obiettivo del progetto è quello di sostenere le aziende agricole e artigianali di Trieste e del Carso con una forte vocazione ecologica e sociale.

Noi di Noiza abbiamo curato la realizzazione della graphic identity e il web design del sito Joseph.land.

Questi gli eventi in programma per l’estate 2014:

Un tuffo nella lavanda di Tanja Arandjelović

Sopra il golfo con i vini di Matej Lupinc

La grotta del formaggio di Dario Zidarič

Lavora con la pietra di Jernej Bortolato

Si tratta di percorsi formativi estremamente interessanti che ci sentiamo di consigliare davvero a tutti per venire a contatto con alcune delle principali eccellenze carsiche e scoprire una piccola parte di quanto ha da offrire il Carso triestino.

Laboratorio sui New Media a Cinemazero

Cinemazero è una delle realtà culturali più importanti e conosciute della regione Friuli Venezia Giulia.

Ogni anno, all’interno de Le voci dell’inchiesta, festival organizzato da Cinemazero con l’obiettivo di approfondire il linguaggio del giornalismo d’inchiesta, si svolge un laboratorio permanente dedicato a giornalismo online, new media e social media strategy, a cui partecipano studenti e giovani appassionati al mondo del cinema, del teatro, della fotografia, della radio, della televisione, della stampa, e dei nuovi media: il nostro Enrico è stato invitato a guidare questo workshop assieme a Elisa Grando.

L’appuntamento è per giovedì 11 aprile 2013 alle ore 11:30 presso il Cinemazero.

 

Aurora Viaggi: Webmarketing Turistico

Una delle più storiche attività commerciali di Trieste che nel 2013 ha festeggiato 50 anni di attività: Aurora Viaggi ha scelto Noiza e AdFormandum per un percorso di formazione di 30 ore legato al webmarketing turistico, declinato in social media strategy e scrittura online.

I primi risultati sono evidenti, con una gestione strategica della fan page che ha raggiunto in breve il migliaio di fan: https://www.facebook.com/AuroraViaggi

I prossimi risultati saranno ancora più evidenti, con la messa online del nuovo sito dell’Aurora Viaggi.