Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012

“WEBBING PLANNER: MATRIMONIO D’INTERESSI”COME PROGETTARE UN SUCCESSO… REATTIVO.

DESKTOP+ MOBILE vs RESPONSIVE WEB DESIGN

20 Novembre 201214:30

1

in collaborazione conMUSE COMUNICAZIONE

Nicoletta Polliotto

presenta

4

UTENTE—— al ——

CENTRO

5

UTENTE—— al ——

CENTRO

La tua Comunicazione ON-LINE

…va costruita intorno a LUI

6

COMUNICARE ON-LINE?

SITO WEB

Baricentro della Promozione

7

The Savvy Marketer’s

Guide

BrandErgonomics® PUBLICATION

f r o m Quarry Integrated

Communications

8

PROGETTAREUN SITO WEB PERFORMANTE?

Website

Trampolino di lancio per la tua CRESCITA AZIENDALE.

↓

10

“SFATIAMO UNA LEGGENDA”

…qual piuma al vento.

è Mobilel’Italia

11

“STATISTICHE”

62,1% degli italiani su internet

Dati Censis

28mln di connessioni globali

Dati Audiweb

15mln di smartphone + 2mln di tablet

12

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

13



14

“STATISTICHE”

41% gli utenti su mobile

MONDO

46% gli utenti su mobile

ITALIA

15

“STATISTICHE”

Connessioni MOBILE > DESKTOP

MONDO – 2013

INDIA e CINA ↓

Sorpasso Avvenuto



16



17

“COSA FARE?”

Desktop + Mobile —website separati—

Soluzione 1

Responsive Web Design · RWD—future friendly—

Soluzione 2



18

The Web Landscape

19

“USER EXPERIENCE”

Uniforme

Funzionale

Performante

COME?

20

“STATISTICHE”

SOLO 8 su 100

i siti web del settore Hotellerie ottimizzati per il Mobile.

Mondo



21





22



23

“DIVERSITÀ”

Dimensioni · |||↔|||

Sistemi d’interazione · Touch-Screen

Abitudini di Ricerca

Dinamiche di Utilizzo



24



25

©2012 BCC

Testing Devices

27

28

Adatta al Web.

Creiamo una soluzione fluidae “fluttuante”…




Anatomy of an Adaptive Web Design29

31

“IL MOTTO”

Adattarsi, Reagire, Risolvere

Ethan Marcotte

Thanks

33

“OBIETTIVI”

Ottimizzare Layout e Contenuti · mobile-first

Pensare alle diverse Dimensioni · viewport

Adattare le Immagini · grafica, icone, video

34

“OBIETTIVI”

Immagini “Ad Hoc” · limiti di banda (reti 2G)

Dispositivi Touch-Screen · interazione

Caratteristiche Avanzate · geo-loc., 1-touch-call



(Degradato, Calzascarpe, Miope, Pessimo)

(Progressivamente Migliorato, A Prova di Futuro, Grandioso)

37

Come Progettare— ?—

38

CONTENTSTRUCTURED & PRIORITIZED

AND RELEVANT, POSSIBLY.

NuovoApproccio

39

“DIAGRAMMA DELLE PRIORITÀ”

Diamo un Ordine di Priorità ai nostri Contenuti.

40

Più Spazio=

Immagini + GrandiContenuti a lato

42

Sketch Wireframes

43

Responsive Web Design— 10 Buoni Motivi —

44

Brand Equity

Brand Experience

Priorità ai Contenuti Principali

Risposta Adeguata ai Bisogni

Risparmi Tempo e Denaro

Buoni Motivi

45

Content Marketing

Riduci la Complessità – mobile exp.–

Promuovi con Chiarezza

Aumenti il Traffico

Investi in Tecnologia

Buoni Motivi

46

QUALE LA SCELTAVINCENTE?

Sito Mobile Dedicato

— o —

Responsive Web Design

47

RWD

48

Complessità—

Tempi

RESPONSIVE WEB DESIGNPUNTI CRITICI

—

Costi

49

Responsive Web Design RWD

—Progetta per il Brand del tuo Hotel.

“CONCLUSIONI”

50

Responsive Web Design RWD

—Per la User-Experience del tuo cliente.

“CONCLUSIONI”

51

MUSE COMUNICAZIONE

★ facebook.com/ MuseComunicazione

★ twitter.com/ MuseCOM

★ flickr/ photos/MuseCom

★ Titolare del Blog ComunicazioneNellaRistorazione.it

★ Guest Blogging su: FormazioneTurismo.com

S O C I A L N E T W O R K B L O G G I N G

Segui i nostri Canali On-line...

http://facebook.com/MuseComunicazione

http://facebook.com/MuseComunicazione

http://www.flickr.com/photos/musecom

http://www.flickr.com/photos/musecom

http://www.comunicazionenellaristorazione.it

http://www.comunicazionenellaristorazione.it

http://www.formazioneturismo.com

http://www.formazioneturismo.com

WEB • www.musecomunicazione.itE-MAIL • [email protected]

Mobile • 335 6309724

GRAZIE

mailto:[email protected]




Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012

Education

Transcript of Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012