Keynote dedicato al Responsive Web Design, questo sconosciuto. Lab WHR 2012 - 20 Novembre 2012. "Webbing Planner: Un Matrimonio d’Interessi - Come Progettare un Successo… Reattivo" Grazie a Brad Frost e Luca Salvini, per l'ispirazione costante.

1. in collaborazione con
MUSE COMUNICAZIONE
Nicoletta Polliotto
presenta
“WEBBING PLANNER: MATRIMONIO D’INTERESSI”
COME PROGETTARE UN SUCCESSO… REATTIVO.
DESKTOP + MOBILE vs RESPONSIVE WEB DESIGN
20 Novembre 2012
14:30
1

3. 3

4. U T E NT E
—— al ——
CENTRO
4

5. La tua Comunicazione ON-LINE
U T EN TE
—— al ——
CENTRO
…va costruita intorno a LUI
5

6. COMUNICARE ON-LINE?
SITO WEB
Baricentro della Promozione
6

7. The Savvy
Marketer’s
Guide
BrandErgonomics® PUBLICATION
from
Quarry Integrated
Communications
7

8. PROGETTARE
UN SITO WEB PERFORMANTE?
Website
↓
Trampolino di lancio per la tua
CRESCITA AZIENDALE.
8

9. 9

10. “SFATIAMO UNA LEGGENDA”
l’Italia
è Mobile
…qual piuma al vento.
10

11. “STATISTICHE”
Dati Censis
62,1% degli italiani su internet
Dati Audiweb
28mln di connessioni globali
15mln di smartphone + 2mln di tablet
11

12. ©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
12

13. ©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
13

14. “STATISTICHE”
MONDO
41% gli utenti su mobile
ITALIA
46% gli utenti su mobile
14

15. “STATISTICHE”
MONDO – 2013
Connessioni MOBILE > DESKTOP
INDIA e CINA
↓
Sorpasso Avvenuto
15

16. ©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
16

17. “COSA FARE?”
Soluzione 1
Desktop + Mobile
—website separati—
Soluzione 2
Responsive Web Design · RWD
—future friendly—
17

18. The Web Landscape
©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
18

19. “USER EXPERIENCE”
Uniforme
Funzionale
Performante
?
COME
19

20. “STATISTICHE”
Mondo
SOLO 8 su 100
i siti web del settore Hotellerie
ottimizzati per il Mobile.
20

21. ©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
21

22. ©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
22

23. “DIVERSITÀ”
Dimensioni · ||| |||
Sistemi d’interazione · Touch-Screen
Abitudini di Ricerca
Dinamiche di Utilizzo
23

24. ©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
24

25. ©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
25

26. 26

27. Testing Devices
©2012 BCC
27

28. Creiamo una soluzione fluida
e “fluttuante”…
Adatta al Web.
28

29. ©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
©BradFrost
Beyond Media Queries:
29 Anatomy of an Adaptive Web Design

30. 30

31. “IL MOTTO”
Thanks
Ethan Marcotte
Adattarsi, Reagire, Risolvere
31

32. ©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
32

33. “OBIETTIVI”
Ottimizzare Layout e Contenuti · mobile-first
Pensare alle diverse Dimensioni · viewport
Adattare le Immagini · grafica, icone, video
33

34. “OBIETTIVI”
Immagini “Ad Hoc” · limiti di banda (reti 2G)
Dispositivi Touch-Screen · interazione
Caratteristiche Avanzate · geo-loc., 1-touch-call
34

35. (Degradato, Calzascarpe, Miope, Pessimo)
(Progressivamente Migliorato, A Prova di Futuro, Grandioso)
©BradFrost
Beyond Media Queries:
Anatomy of an Adaptive Web Design
35

36. 36

37. Come Progettare
— ?—
37

38. Nuovo
Approccio
STRUCTURED & PRIORITIZED
CONTENT
AND RELEVANT, POSSIBLY.
38

39. “DIAGRAMMA DELLE PRIORITÀ”
Diamo un Ordine di Priorità ai
nostri Contenuti.
39

40. Più Spazio
=
Immagini + Grandi
Contenuti a lato
40

41. 41

42. Sketch Wireframes
42

43. Responsive Web Design
— 10 Buoni Motivi —
43

44. Buoni
Motivi
Brand Equity
Brand Experience
Priorità ai Contenuti Principali
Risposta Adeguata ai Bisogni
Risparmi Tempo e Denaro
44

45. Buoni
Motivi
Content Marketing
Riduci la Complessità – mobile exp.–
Promuovi con Chiarezza
Aumenti il Traffico
Investi in Tecnologia
45

46. QUALE LA SCELTA
VINCENTE?
Sito Mobile Dedicato
—o—
Responsive Web Design
46

47. RWD
47

48. RESPONSIVE WEB DESIGN
PUNTI CRITICI
Complessità
—
Tempi
—
Costi
48

49. “CONCLUSIONI”
Responsive Web Design
RWD
—
Progetta per il Brand del tuo Hotel.
49

50. “CONCLUSIONI”
Responsive Web Design
RWD
—
Per la User-Experience del tuo cliente.
50

51. MUSE COMUNICAZIONE
SOCIAL NETWORK BLOGGING
★ facebook.com/ MuseComunicazione ★ Titolare del Blog
ComunicazioneNellaRistorazione.it
★ twitter.com/ MuseCOM
★ flickr/ photos/MuseCom
★ Guest Blogging
su: FormazioneTurismo.com
Segui i nostri Canali On-line...
51

52. WEB • www.musecomunicazione.it
E-MAIL • info@musecomunicazione.it
Mobile • 335 6309724
GRAZIE