In questo talk illustreremo le tecniche più semplici, efficaci e rapide per rendere il vostro sito/portale in Drupal mobile compliant. Applicando principi di responsive design e design su griglie analizzeremo gli elementi più utili da lasciare sulla vostra interfaccia mobile. Capiremo quale migliore strategia di implementazione intraprendere tra l'esportazione di dati in json, rss oppure realizzare direttamente web views per il sito mobile e per essere contenuti in un'app mobile che faccia da contenitore negli ecosistemi iOS e Android, principalmente.

1. MobileD!
Carlo Frinolli

2. Mobile OS marketshare
iOS
Java ME
Android
Symbian
BlackBerry
Windows Phone
Samsung
Windows Mobile
2

3. Mobile Browser
market share
Safari
Opera Mini
Android Browser
Symbian
BlackBerry
Proprietary or Undetectable
Microsoft Internet Explorer
Opera Mobile
3

4. Cos’è cambiato nella UX
Gli pseudo smartphone:
• Interfacce punta e clicca
• Scrolling con il cursore > Dolore
• Rendering di CSS e JS scadente o proprietario
• Esistono gli stati di HOVER sui link!
4

5. Touch devices
Il dito è il puntatore!
• Lo scrolling è più naturale
• C’è landscape e portrait
• Le pagine possono zoomare
• non esiste più l’ HOVER!
5

6. Quindi?
6

7. Efficacia e contesto
Il modo in cui l’informazione è consumata
efficacemente dipende dal contesto e dal
device.
Le soluzioni a questo problema sono di design
in senso progettuale.
7

8. Responsive design
8

9. Disegnare per N dispositivi?
Il responsive design vi aiuta a passare da un
layout all’altro attraverso media queries di CSS3
o script js.
I layout però vanno progettati tenendo conto
dei fattori di forma delle caratteristiche
tecniche e dei contesti d’uso.
9

10. Basta il responsive design?
No, non basta. Ma aiuta.
10

11. Mobile first!
Diventiamo pragmatici.
11

12. Disegnamo per il Mobile first
Immaginiamo di avere un stack
di dispositivi dalle caratteristiche
progressive.
12

13. Old smartphones
30% del
mercato!
e il 25% degli utenti internet.
old “smart”phones
13

14. Modern smartphones
Usando il principio di
progressive enhancement
aggiungiamo effetti e funzionalità
iOS e Android (forse WP7... ma forse eh!)
old “smart”phones
14

15. Ma le app?
come son fatte?
15

16. La struttura delle App
Le app mobili sono costruite come il resto.
Dati e interfaccia.
L’interfaccia responsiva può essere una soluzione.
Ma cosa c’entra DRUPAL?
16

17. Views datasource
Estrarre dati da Drupal in formati maneggevoli
17

18. Views datasource
“Views Datasource is a set of plugins for Drupal Views
for rendering content in a number of shareable,
reusable formats based on XML, JSON and XHTML.”
È uno style plugin di Views che esporta i
dati in formati maneggevoli come JSON o
XML.
18

19. Il risultato della view in json
{
"nodes" : [
{
"node" : {
"title" : "BBox",
"field_project_main_img_fid" : "http://n3.local/sites/default/files/imagecache/
homepage_queue/bbox_4.jpg",
"field_project_subtitle_value" : "the cloud under version control.",
"tags" : "below the linensaasnsocial media marketingnuinuxnwebappn"
}
}
}
19

20. Quale flessibilità
views_json o views_xml sono style plugin di
views.
La flessibilità di views assieme all’uso degli
argomenti possono permettere di fare delle
chiamate alla web app Drupal molto pulite ed
eleganti.
http://mydomain.com/works/bbox
20

21. JSON o XML?
JSON XML
1M objects
0 1250000.0 2500000.0 3750000.0 5000000.0
Il case study mostra un tempo di trasmissione molto più basso
per JSON rispetto XML, pur essendo molto più CPU intensive.
Un tempo di trasferimento molto basso è ottimale quando si
tratta di fare integrazioni mobili.
21

22. Vantaggi e svantaggi
Vantaggi: l'interfaccia dell'app può essere
completamente disaccoppiata dai dati.
Svantaggi: le politiche di approvazione dell'app.
Vale soprattutto per AppStore di Apple.
22

23. Il caso Facebook
23

24. App wrapper e webviews
Facebook è noto per aggiornare
compulsivamente l'esperienza
utente.
La strategia usata è quella di
avere un’applicazione contenitore
e contenuto web.
Il resto è HTML5, CSS3.
24

25. Cosa c’entra DRUPAL?
Con l’approccio usato in views_datasource
cioè parsando un oggetto JSON o utilizzando
temizzazione responsive possiamo simulare
un’interfaccia mobile.
Ignoriamo header, footer, e transizioni di
pagina, e usando quest’approcio possiamo
arrivare a ottimi risultati.
25

26. BBox
come Proof of Concept, e sviluppi futuri.
26

27. Demo
http://vimeo.com/33594209
powered by
27

28. Sviluppi futuri
BBox - la nostra alternativa open-source a
Dropbox è già integrato con Tikal (CRM basato
su Drupal - presentato nella sala accanto), e
questa Proof of Concept rappresenta il primo
risultato tangibile di OpenAttitude.
28

29. Linkografia
(Responsive Design - SM) - http://j.mp/rwUImN
(Responsive Design - ALA) - http://j.mp/sGyJP9
(Mobile first! Pragmatic RD) - http://j.mp/t1Ea9S
(Responsive Design Pragmatico) - http://j.mp/s5vhkp
(JSON vs XML Benchmark) - http://j.mp/uScHyL
29

30. Carlo Frinolli
follow me on twitter @carl0s_
follow my company @nois3lab
ringraziamenti speciali a Baku (per aver scritto BBox),
a Giuseppe Aiello di fleka design e ai nostri partner
Bmeme, con cui condividiamo OpenAttitude.