muse comunicazione - responsive web design - whr 20 novembre 2012
DESCRIPTION
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.TRANSCRIPT
![Page 1: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/1.jpg)
“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
![Page 2: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/2.jpg)
![Page 3: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/3.jpg)
3
![Page 4: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/4.jpg)
4
UTENTE—— al ——
CENTRO
![Page 5: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/5.jpg)
5
UTENTE—— al ——
CENTRO
La tua Comunicazione ON-LINE
…va costruita intorno a LUI
![Page 6: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/6.jpg)
6
COMUNICARE ON-LINE?
SITO WEB
Baricentro della Promozione
![Page 7: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/7.jpg)
7
The Savvy Marketer’s
Guide
BrandErgonomics® PUBLICATION
f r o m Quarry Integrated
Communications
![Page 8: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/8.jpg)
8
PROGETTAREUN SITO WEB PERFORMANTE?
Website
Trampolino di lancio per la tua CRESCITA AZIENDALE.
↓
![Page 9: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/9.jpg)
9
![Page 10: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/10.jpg)
10
“SFATIAMO UNA LEGGENDA”
…qual piuma al vento.
è Mobilel’Italia
![Page 11: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/11.jpg)
11
“STATISTICHE”
62,1% degli italiani su internet
Dati Censis
28mln di connessioni globali
Dati Audiweb
15mln di smartphone + 2mln di tablet
![Page 12: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/12.jpg)
12
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
![Page 13: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/13.jpg)
13
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
![Page 14: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/14.jpg)
14
“STATISTICHE”
41% gli utenti su mobile
MONDO
46% gli utenti su mobile
ITALIA
![Page 15: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/15.jpg)
15
“STATISTICHE”
Connessioni MOBILE > DESKTOP
MONDO – 2013
INDIA e CINA ↓
Sorpasso Avvenuto
![Page 16: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/16.jpg)
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
16
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
![Page 17: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/17.jpg)
17
“COSA FARE?”
Desktop + Mobile —website separati—
Soluzione 1
Responsive Web Design · RWD—future friendly—
Soluzione 2
![Page 18: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/18.jpg)
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
18
The Web Landscape
![Page 19: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/19.jpg)
19
“USER EXPERIENCE”
Uniforme
Funzionale
Performante
COME?
![Page 20: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/20.jpg)
20
“STATISTICHE”
SOLO 8 su 100
i siti web del settore Hotellerie ottimizzati per il Mobile.
Mondo
![Page 21: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/21.jpg)
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
21
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
![Page 22: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/22.jpg)
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
22
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
![Page 23: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/23.jpg)
23
“DIVERSITÀ”
Dimensioni · |||↔|||
Sistemi d’interazione · Touch-Screen
Abitudini di Ricerca
Dinamiche di Utilizzo
![Page 24: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/24.jpg)
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
24
![Page 25: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/25.jpg)
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
25
![Page 26: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/26.jpg)
26
![Page 27: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/27.jpg)
©2012 BCC
Testing Devices
27
![Page 28: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/28.jpg)
28
Adatta al Web.
Creiamo una soluzione fluidae “fluttuante”…
![Page 29: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/29.jpg)
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design29
![Page 30: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/30.jpg)
30
![Page 31: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/31.jpg)
31
“IL MOTTO”
Adattarsi, Reagire, Risolvere
Ethan Marcotte
Thanks
![Page 32: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/32.jpg)
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design32
![Page 33: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/33.jpg)
33
“OBIETTIVI”
Ottimizzare Layout e Contenuti · mobile-first
Pensare alle diverse Dimensioni · viewport
Adattare le Immagini · grafica, icone, video
![Page 34: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/34.jpg)
34
“OBIETTIVI”
Immagini “Ad Hoc” · limiti di banda (reti 2G)
Dispositivi Touch-Screen · interazione
Caratteristiche Avanzate · geo-loc., 1-touch-call
![Page 35: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/35.jpg)
©BradFrostBeyond Media Queries:
Anatomy of an Adaptive Web Design35
(Degradato, Calzascarpe, Miope, Pessimo)
(Progressivamente Migliorato, A Prova di Futuro, Grandioso)
![Page 36: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/36.jpg)
36
![Page 37: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/37.jpg)
37
Come Progettare— ?—
![Page 38: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/38.jpg)
38
CONTENTSTRUCTURED & PRIORITIZED
AND RELEVANT, POSSIBLY.
NuovoApproccio
![Page 39: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/39.jpg)
39
“DIAGRAMMA DELLE PRIORITÀ”
Diamo un Ordine di Priorità ai nostri Contenuti.
![Page 40: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/40.jpg)
40
Più Spazio=
Immagini + GrandiContenuti a lato
![Page 41: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/41.jpg)
41
![Page 42: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/42.jpg)
42
Sketch Wireframes
![Page 43: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/43.jpg)
43
Responsive Web Design— 10 Buoni Motivi —
![Page 44: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/44.jpg)
44
Brand Equity
Brand Experience
Priorità ai Contenuti Principali
Risposta Adeguata ai Bisogni
Risparmi Tempo e Denaro
Buoni Motivi
![Page 45: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/45.jpg)
45
Content Marketing
Riduci la Complessità – mobile exp.–
Promuovi con Chiarezza
Aumenti il Traffico
Investi in Tecnologia
Buoni Motivi
![Page 46: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/46.jpg)
46
QUALE LA SCELTAVINCENTE?
Sito Mobile Dedicato
— o —
Responsive Web Design
![Page 47: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/47.jpg)
47
RWD
![Page 48: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/48.jpg)
48
Complessità—
Tempi
RESPONSIVE WEB DESIGNPUNTI CRITICI
—
Costi
![Page 49: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/49.jpg)
49
Responsive Web Design RWD
—Progetta per il Brand del tuo Hotel.
“CONCLUSIONI”
![Page 50: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/50.jpg)
50
Responsive Web Design RWD
—Per la User-Experience del tuo cliente.
“CONCLUSIONI”
![Page 51: Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012](https://reader034.vdocuments.mx/reader034/viewer/2022042623/5479a438b379593f2b8b480f/html5/thumbnails/51.jpg)
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...