cosa significa progettare una Mobile web app, quali sono le differenze, i vantaggi e gli svantaggi rispetto ad un'applicazione nativa. Come decidere quale opzione scegliere.

1. PROGETTARE UNA MOBILE WEB
APP
| 1

2. 6 key Issue da considerare
1. Identifica se il browser sta usando un PC o
un mobile device
Ci sono dei redirect ad una versione mobile del
sito?
Esempio:
http://www.autoglass.co.uk/ ->
http://m.autoglass.co.uk
| 2
1.Rileva traffico via mobile e ridirigi il traffico verso un mobile
URL

3. Autoglass Mobile Site
| 3
Versione mobile del sito, sviluppata con Jquery Mobile

4. Script detection
| 4
www.detectmobilebrowsers.mobi

5. ESERCITAZIONE
• Andate sul vostro sito aziendale navigando
dal vostro handset.
• Che tipo di sito visualizzate?
• C’è un redirect automatico ad un nuovo
URL?
• Il sito è ottimizzato per il vostro handset?
• Ripetete l’esperiemento, se possibile, per:
• Tablet (iPad, Android..)
• Altro Smartphone
| 5

6. Sviluppare un sito ottimizzato
2. definisci per quali device e piattaforme
desideri che il tuo sito sia ottimizzato.
Quali sono i dispositivi che supporti?
| 6
Devi gestire il trade-off tra massima reach e ottimizzazione
della mobile experience solo per un subset di device

7. Selezionare il subset giusto
• Iphone ha una penetrazione
del 12%
• Significa che l’88% degli
utenti mobile utilizza altri
device, browser, schermi e
risoluzioni differenti..
• I 10 dispositivi più diffusi
coprono il 25% del totale dei
device
| 7

8. Ottimizzare la mobile experience
• È possibile rilevare il tipo di device dalla
prima sessione sul Server
• Si fa il matching istantaneo con un DB
contenente le caratteristiche di tutti i device
• Device Atlas è uno dei database open source
che fornisce questo servizio
| 8

9. Device Atlas
| 9

10. Device Anywhere
| 10
http://www.keynotedeviceanywhere.com/

11. Kit di device per testing
| 11
Tutti i device utilizzati per testare il sito della BBC

12. Ottimizzare il sito web per il mobile
3. Definire in che modo il contenuto sarà
adattato per il Mobile
Puoi pensare di mostrare lo stesso identico
contenuto oppure una versione ridotta di
contenuti, specifica per la fruizione via Mobile
Esempio: se il tuo sito presenta un’animazione
Flash fornisci un contenuto alternativo per
iPhone..
| 12

13. Ottimizzare il sito web per il Mobile
4. Progetta e costruisci
Ogni contenuto Mobile dovrebbe essere
raggiungibile con al massimo 3 click
Considera le best practice per la mobile
usability:
Test di usabilità:
- Tempo per completare un task specifico
- Soddisfazione dell’utente al completamento
del task
| 13

14. Verifica 4 top user tasks
1. Browse: decidi le categorie
chiave da mostrare
2. Search: stabilisci se è +
importante la navigazione o
la ricerca per il tuo sito; per
un sito di ticketing la search è
+ importante
3. Branding messages:
evidenza sul brand e sul
servizio
4. Support: solitamente il
customer service è
importante
| 14

15. ESERCITAZIONE
• ANALIZZA QUESTI 4 ELEMENTI (Browse,
Search, Branding, Support)
PER I SEGUENTI SITI:
• www.martini.com
• www.campari.com
• www.aperol.com
| 15

16. 4 opzioni per il Mobile design
1. Semplice sito Mobile (contenuti differenti)
2. Screen Scrape (stessi contenuti)
3. Responsive design (stessi contenuti,
differente mobile styling)
4. Sito web HTML5 (stessi contenuti, differente
mobile styling)
| 16

17. 1. Mobile site distinto
• E’ il metodo più
semplice, si costruisce
un sito mobile distinto
(es.
http://m.company.com)
• Contenuti, layout, stili,
hosting differenti
• Approccio valido per
small business, dove
non si richiede un
aggiornamento
frequente
| 17

18. 1. Mobile site distinto
Non è l’approccio consigliato nel medio-lungo
termine perché:
• richiede la duplicazione di contenuti
• richiede investimenti di strumenti differenti e
risorse
• non fornisce una brand experience consistente
| 18

19. 2. Mobile site modello “Screen Scrape”
Alcuni brand di alto profilo
hanno optato per una
soluzione temporanea:
• creazione di una versione
semplice con pochi
contenuti
• Nessuna integrazione con
il back-end
• È una soluzione rapida
che non comporta conflitti
tra i 2 team di sviluppo
(web e mobile)
| 19

20. 3. Responsive design
Si basa sul principio di sviluppare un solo sito,
fruibile e ottimizzato per differenti fruizioni (web,
tablet, handset)
• Elimina le distinzioni tra sito web e mobile site
• Permette di contestualizzare l’esperienza online
• Permette di creare e mantenere una sola
versione del sito
| 20
È un approccio sempre più popolare, anche se ancora
non così utilizzato dai grandi brand

21. | 21
| Mobile: strategy, marketing, apps– © Leonardo Bellini - Volontari per lo Sviluppo
http://www.html.it/guide/img/responsivedesign/ilviaggio/index.html
Obiettivo: costruire siti che si adattino a qualsiasi
dispositivo

22. Responsive design: una definizione
| 22
http://www.html.it/pag/32821/cose-il-responsive-design/

23. Cosa non è il responsive design
• non è una metodologia per creare versioni
dei siti ‘ottimizzate’ e specifiche per il mobile:
un principio cardine del responsive design è
che il web è uno e unico, non c’è pertanto
necessità di versioni diverse per un singolo
sito
• quello che progetto e realizzo deve essere
auto-adattante rispetto all’enorme e
crescente varietà di dispositivi con cui viene
(e verrà) fruito;
| 23

24. Requisiti tecnici
Implica la conoscenza di un mix di tecnologie:
• Markup language: HTML
• Presentation & Layout: CSS, CSS3
• Scripting (javascript, Ajax, PHP..
Concetto base sono le CSS Media Query che
permettono di specificare nell’attributo “media” il
tipo di device a cui deve essere applicato
| 24

25. Tipi di media supportati
• all: il CSS si applica a tutti i dispositivi di visualizzazione;
• screen: schermo di computer;
• print: pagina stampata;
• projection: presentazioni e proiezioni;
• speech: dispositivi a sintesi vocale;
• braille: supporti basati sull’uso del braille;
• embossed: stampanti braille;
• handheld: dispositivi mobili con schermo piccolo e in
genere dotati di browser con limitate capacità grafiche;
• tty: dispositivi a carattere fisso come i terminali;
• tv: visualizzazione su schermi televisivi.
| 25

26. Temi Wordpress “Responsive”
| 26

27. Responsive design style
| 27
Nella versione Desktop il sito presenta 2 colonne, 1 sola
Per la versione iPad e iPhone

28. Responsive Design Test
| 28
http://www.benjaminkeen.com/
Permette di testare il tuo sito per
Differenti schermi

29. ESERCITAZIONE
• VISITATE http://www.benjaminkeen.com
• Seguite le istruzioni per generare Javascript
e aggiungetelo alla vostra barra dei preferiti
• Testate i seguenti siti web:
• www.bmw.com
• www.mercedes.com
• www.fiat.it
• www.audi.com
Quali sono i siti che risultano ottimizzati per più
schermi e risoluzioni?
| 29

30. SocialMinds.it: test multi device
| 30

31. http://mediaqueri.es/
| 31
Esempi di come siano responsive alcuni siti famosi

32. About responsive Design
• Sebbene di non difficile tecnologia una degli
ostacoli all’adozione è che richiede una certa
complessità nella progettazione di layout
differenti
• Richiede inoltre un’architettura informativa
più complessa
| 32
Ogni sito Web dovrebbe essere il più possibile “responsive”
Senza compromettere la user experience per il desktop,
tablet e mobile

33. Mobile Experience: Context & Intent
2 elementi chiave per la mobile user
experience:
Contesto d’uso e Intenzione:
• una persona che sta facendo shopping ha
bisogno di trovare subito info su prezzi e
prodotti.
• Viceversa una persona che naviga a casa da
laptop ha bisogno di maggiori info, recensioni
etc.
| 33

34. 4. HTML5 Web App
Molti designer si stanno orientando a costruire mobile
Web app basate su HTML5 (nativo in molti browser di
smartphone)
Vantaggi:
• Web app multi-piattaforma e multi-device
• Meno costosa e impegnativa rispetto alle
applicazioni native
• Permette di evitare la commissione del 30% per
l’Apple Store
• Permette di sfumare il confine tra sito web e mobile
app
• Abilita rich-media e nuove funzionalità (es. dati
dell’utente inseriti in precedenti sessione utente)| 34

35. HTML5: Il futuro delle Mobile Apps?
• Alcuni Analisti di Forrester Research
prevedono un erosione di margini di Apple
del 30% a causa della diffusione delle Web
Apps
• Si prevede una riduzione dei costi di
migrazione delle Mobile Apps da Apple verso
Android e Windows Mobile
| 35

36. Mobile Web Apps vs Native Apps
Mobile Web Apps:
1. Più lente rispetto alle
applicazioni native
2. Richiedono la
connessione
3. Più veloci e meno
costose da
implementare
4. Evitano i costi di
commissione degli
App Store (30% di
AppStore)
Native Mobile Apps:
1. Mobile customer
experience ottimizzata
ma per un 1 singolo
device
2. Migliori performance
3. Richiedono tempi e costi
di sviluppo superiori
4. Richiedono submissions
sugli App Store per
aggiornamenti
5. I ricavi devono essere
condivisi con lo Store
| 36

37. Financial Time Web App Case Study
| 37
+31 % di abbonamenti durante l’ultimo anno
+29% numero di utenti registrati (4,8 milioni)
25% del traffico di FT.com via mobile
2.7 milioni di utenti della Web App
Web app lanciata nel giugno 2011 in risposta alle nuove
Regole di Apple sulle App legate agli abbonamenti

38. Mobile Web App Frameworks
• Esistono alcune framework e piattaforme che
semplificano e accelerano lo sviluppo di Mobile
Web Apps.
1. Sencha Touch Framework (HTML5)
2. jQuery Mobile Framework
3. JQTouch Plugin per mobile development
4. The M Project (jQuery Mobile + HTML5)
5. DHTMLX Touch
6. WebApp.net
7. Wijmo – jQuery Ui Widgets
| 38

39. Sencha Touch Framework
| 39
http://www.sencha.com/products/touch/

40. Jquery Mobile
| 40
http://jquerymobile.com/

41. JQTouch Framework
| 41
http://jqtouch.com/

42. DHTMLX Framework
| 42
http://www.dhtmlx.com/touch/

43. Personalizzazione
| 43
I Mobile Phone sono oggetti molto personali, intimi:
Difficilmente li prestiamo a qualcuno.
Si prestano ad una personalizzazione spinta dell’esperienza
Raramente però vediamo siti mobile o apps ottimizzati su
Comportamenti, acquisti del singolo utente

44. Amazon Mobile App
• La Home page di Amazon
mobile riporta consigli e
raccomandazioni come il
sito web
• È possibile applicare:
1. Behavioural targeting
2. Time location sensitive
messaging
| 44
Usa la personalizzazione per
migliorare
la rilevanza del tuo sito mobile

45. Personalizzare il sito mobile
| 45
Esempio di mobile web design ottimizzato con la
Personalizzazione dell’esperienza utente

46. Ottimizzare il sito web mobile
6. Stai misurando e ottimizzando il tasso di
conversione?
La Mobile Web Analytics ci permette di
tracciare:
• origine dei browser
• I profili dei device
• Utenti unici, nuovi utenti, utenti ricorrenti
• Tempo unico sulla pagina e sul sito
| 46
Il Bounce rate medio di un mobile site è attorno all’80%

47. CONVERSION FUNNEL STEPS
| 47
STAI MISURANDO LE METRICHE PER CIASCUNA
FASE DEL FUNNEL?
Assicurati di poter misurare metriche e Kpi per il tuo sito
Mobile

48. Le 5 sfide per creare un sito mobile
ottimizzato
1. 1 sito o 2? Creare un mobile site distinto oppure
ottimizzare il sito esistente?
2. Right Content. Offri contenuti funzionali all’utente in
mobilità (mappe, info, Shopping, social networking
e coupon)
3. UX. Usa una navigazione semplice, verticale, non
orizzontale. Usa le icone più dei link testuali
4. Personalizatio. Tieni conto dei comportamenti e
della storial del cliente. Aggiungi la geolocalization
5. Promotion. Usa tutti i canal media per acquisire
traffico. Traccia i link per valutare l’efficcia dei
canali di ingresso
| 48