35
Responsive Design un sistema web multi-piattaforma e multi-device a garanzia della migliore esperienza d'uso lunedì 22 luglio 13

Responsive design: la rivoluzione del mobile applicata ai siti web

Embed Size (px)

DESCRIPTION

Oggi il web è diventata un'esperienza che dipende in modo essenziale dal dispositivo da cui viene fruita. Sito web o sito responsive, per le aziende? Quali sono i vantaggi di un sito mobile e le sue peculiarità? Come cambiano i comportamenti dell'utente, a seconda che navighi da smartphone o da desktop.

Citation preview

Page 1: Responsive design: la rivoluzione del mobile applicata ai siti web

Responsive Design

un sistema web multi-piattaforma e multi-device a garanzia della migliore esperienza d'uso

lunedì 22 luglio 13

Page 2: Responsive design: la rivoluzione del mobile applicata ai siti web

We don't design web pages.We design systems.Andy Clarke      

lunedì 22 luglio 13

Page 3: Responsive design: la rivoluzione del mobile applicata ai siti web

Il Sorpasso

lunedì 22 luglio 13

Page 4: Responsive design: la rivoluzione del mobile applicata ai siti web

fonte: Morgan Stanley

Si stima che nel 2015 il numero totale di utenti che navigano da un dispositivo mobile supererà il numero di utenti che navigano da desktop.

2015desktop users

mobile users

lunedì 22 luglio 13

Page 5: Responsive design: la rivoluzione del mobile applicata ai siti web

fonte: Morgan Stanley

lunedì 22 luglio 13

Page 6: Responsive design: la rivoluzione del mobile applicata ai siti web

fonte: Morgan Stanley

Già oggi il numero di utenti mobile che accedono a Facebook è doppio rispetto alla controparte desktop.

2013facebook desktop users

facebook mobile users

lunedì 22 luglio 13

Page 7: Responsive design: la rivoluzione del mobile applicata ai siti web

COS’E’ CAMBIATO?

lunedì 22 luglio 13

Page 8: Responsive design: la rivoluzione del mobile applicata ai siti web

Questonon è più

il web

lunedì 22 luglio 13

Page 9: Responsive design: la rivoluzione del mobile applicata ai siti web

Questo è il web

lunedì 22 luglio 13

Page 10: Responsive design: la rivoluzione del mobile applicata ai siti web

Questonon è più

il webNavigare online significava stare seduti davanti a un PC, situazione oggi ormai sempre meno frequente

lunedì 22 luglio 13

Page 11: Responsive design: la rivoluzione del mobile applicata ai siti web

Vecchio CONTESTO

lunedì 22 luglio 13

Page 12: Responsive design: la rivoluzione del mobile applicata ai siti web

Nuovo CONTESTO

lunedì 22 luglio 13

Page 13: Responsive design: la rivoluzione del mobile applicata ai siti web

che strada PRENDERE?

lunedì 22 luglio 13

Page 14: Responsive design: la rivoluzione del mobile applicata ai siti web

facciamo un passo indietro...lunedì 22 luglio 13

Page 15: Responsive design: la rivoluzione del mobile applicata ai siti web

CONTENUTICONTESTO&

lunedì 22 luglio 13

Page 16: Responsive design: la rivoluzione del mobile applicata ai siti web

Il contesto QUANTITATIVOdimensione del display

connettività

potenzialità del dispositivo

tipi di input

QUALITATIVOobiettivi dell’utente

ambiente

attenzione

capacità

lunedì 22 luglio 13

Page 17: Responsive design: la rivoluzione del mobile applicata ai siti web

Questa nuova concezione di CONTESTO mette in evidenza come siano profondamente diverse le motivazioni con le quali gli utenti sono spinti a interagire con i contenuti di un sito web.

lunedì 22 luglio 13

Page 18: Responsive design: la rivoluzione del mobile applicata ai siti web

Pensiamo, per esempio, a come cambiano le necessità di un utente che sta organizzado una vacanza su internet:

su desktop

su mobile

lunedì 22 luglio 13

Page 19: Responsive design: la rivoluzione del mobile applicata ai siti web

su desktop prediligerà un'esperienza più immersiva, magari descritta ampiamente da foto e video

lunedì 22 luglio 13

Page 20: Responsive design: la rivoluzione del mobile applicata ai siti web

su mobile al contrario ricerca un'esperienza più rapida, informativa, meno suggestiva ma magari con orari, numeri di telefono e localizzazione ben evidenti.

lunedì 22 luglio 13

Page 21: Responsive design: la rivoluzione del mobile applicata ai siti web

In tutti i processi creativi l'artista inizia la sua opera scegliendo lo spazio di utilizzo: la tela per il pittore, il blocco di marmo per lo scultore ecc…

Nel web la definizione di "cornice" oggi non è più APPLICABILE.

Il contenuto

lunedì 22 luglio 13

Page 22: Responsive design: la rivoluzione del mobile applicata ai siti web

Perchè?

lunedì 22 luglio 13

Page 23: Responsive design: la rivoluzione del mobile applicata ai siti web

perché è completamente a discrezione dell'utente, del suo browser e del device utilizzato

lunedì 22 luglio 13

Page 24: Responsive design: la rivoluzione del mobile applicata ai siti web

Contenuti come acquaquindi dobbiamo iniziare a pensare ai

lunedì 22 luglio 13

Page 25: Responsive design: la rivoluzione del mobile applicata ai siti web

La "tela" diventa quindi un ambiente flessibile e incontrollabile.

potrebbe sembrare un aspetto negativo, in realtà apre scenari stimolanti, fornendo al design del Web potenzialità

decisamente elevate rispetto al vecchi standard di progettazione.

lunedì 22 luglio 13

Page 26: Responsive design: la rivoluzione del mobile applicata ai siti web

cambiare radicalmente l’ approccio nello sviluppo dei prodotti focalizzato ora a gestire

l'ubiquità del web, regolando il rapporto che esiste tra contenuto e contesto in cui viene presentato, oltre alle variabili "qualitative" più legate all'utente, i suoi obiettivi, l'ambiente che lo circonda, la sua attenzione e capacità, garantendo al contempo una gestione del codice più snella e rapida rispetto a uno sviluppo di molteplici versioni ad hoc.

Focus

lunedì 22 luglio 13

Page 27: Responsive design: la rivoluzione del mobile applicata ai siti web

COME?

lunedì 22 luglio 13

Page 28: Responsive design: la rivoluzione del mobile applicata ai siti web

Gli ingredienti per un sito Responsive

lunedì 22 luglio 13

Page 29: Responsive design: la rivoluzione del mobile applicata ai siti web

Griglie fluide, immagini flessibili, tipografia elastica e media queries sono gli ingredienti fondamentali per lo sviluppo di un prodotto web responsivo.

Tecnicamente

lunedì 22 luglio 13

Page 30: Responsive design: la rivoluzione del mobile applicata ai siti web

CSS3 e Media Queries ci permettono non più solo l'identificazione del media utilizzato (come accadeva con quelle CSS2) ma di rilevare anche le caratteristiche fisiche (larghezza - altezza) del dispositivo e del browser utilizzato servendo il giusto stile in ogni contesto di utilizzo.

CSS3 & media queries

lunedì 22 luglio 13

Page 31: Responsive design: la rivoluzione del mobile applicata ai siti web

Nessuno degli elementi che abbiamo citato prima potrebbe garantire efficacia se non accompagnato dal cambiamento di impostazione e filosofia del progetto;

mai come ora la figura del web designer (o designer delle interfacce o UX designer) deve essere riconosciuta come fulcro di un progetto di comunicazione online, inserendosi in un piano ibrido dove si incontrano comunicazione, grafica, tecnica, tecnologia ecc...

Concettualmente

lunedì 22 luglio 13

Page 32: Responsive design: la rivoluzione del mobile applicata ai siti web

I vantaggi di un sito WEB RESPONSIVE

• fornisce agli utenti sempre la migliore esperienza d'uso per ogni dispositivo

• propone contenuti diversi declinandoli per modalità di accesso, intuendo le necessità

di chi accede al sito (desktop/mobile tipicamente)

• raggiunge un pubblico più ampio e garantisce visite più profonde e rapide

• non diluisce l'autorità del sito dal punto di vista SEO

• risparmia codice nello sviluppo del prodotto e nella manutenzione

• è efficace nella condivisione delle pagine tra utenti mobile e desktop

lunedì 22 luglio 13

Page 33: Responsive design: la rivoluzione del mobile applicata ai siti web

Perchè non un APP?

lunedì 22 luglio 13

Page 34: Responsive design: la rivoluzione del mobile applicata ai siti web

I contenuti devono essere gestiti due volte, è necessario sviluppare prodotti diversi per piattaforme diverse (iOs, Android, Windows Phone ecc…), passare per i rispettivi Store per approvazione e pubblicazione, e ultimo aspetto ma più importante si è completamente invisibili ai motori di ricerca.

Dobbiamo per contro pensare alle App come elemento che va ad integrare un piano globale di comunicazione online, utilizzabile per indurre comportamenti specifici distanti da una "convenzionale" ricerca in Rete.

lunedì 22 luglio 13

Page 35: Responsive design: la rivoluzione del mobile applicata ai siti web

Our work is never overDaft Punk 

lunedì 22 luglio 13