“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

3

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.

↓

9

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

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

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

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

16

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

17

“COSA FARE?”

Desktop + Mobile —website separati—

Soluzione 1

Responsive Web Design · RWD—future friendly—

Soluzione 2

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

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

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

21

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

22

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

23

“DIVERSITÀ”

Dimensioni · |||↔|||

Sistemi d’interazione · Touch-Screen

Abitudini di Ricerca

Dinamiche di Utilizzo

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

24

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

25

26

©2012 BCC

Testing Devices

27

28

Adatta al Web.

Creiamo una soluzione fluidae “fluttuante”…

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design29

30

31

“IL MOTTO”

Adattarsi, Reagire, Risolvere

Ethan Marcotte

Thanks

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design32

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

©BradFrostBeyond Media Queries:

Anatomy of an Adaptive Web Design35

(Degradato, Calzascarpe, Miope, Pessimo)

(Progressivamente Migliorato, A Prova di Futuro, Grandioso)

36

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

41

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...

WEB • www.musecomunicazione.itE-MAIL • info@musecomunicazione.it

Mobile • 335 6309724

GRAZIE