If you want to get your content on mobile, what is the best approach. This slideset gives some reasons for looking at the web ...

1. Leverage web
technology in a
mobile world

2. IBBT
! Demand
driven,
interdisciplinary
research
in
collabora5on
with
technology
suppliers
and
users
! Excellence
in
research
in
domains
with
a
high
societal
relevance
! S5mula5ng
entrepreneurship
! A
wide
(inter)na5onal
ecosystem
for
ICT
innova5on
2

3. Why are we here?
! >1
billion
mobile
phones
sold/year
! That’s
9
zero’s!
! 2010:
302
million
smartphones
! 2011:
486
million
smartphones
! Prognosis
2016:
1
billion
SP’s/year
3

4. Let’s recap
Development
op5ons
! Na5ve
applica5ons
! Powerful
applica5on
! WriTen
for
specific
plaVorm
(e.g.
iPhone
or
Android
apps)
4

5. Let’s recap
Development
op5ons
! Widgets
! XHTML,
CSS
and
JavaScript
! WriTen
for
a
specific
widget
engine
(e.g.
Nokia
WRT)
! O`en
special
JavaScript
APIs
with
access
to
device
resources
! Powerful
and
easy
to
create
5

6. Let’s recap
Development
op5ons
! Mobile
websites
! HTML,
CSS
and
JavaScript
! Easy
to
develop
! Lacks
access
to
device
resources
*
6

7. Why are we also here?
Na5ve
development
sucks!
7

8. Check this …
8

9. Mobile fragmentation
! Thousands
of
different
devices
! Several
opera5ng
systems
! Wide
range
of
proper5es
and
capabili5es
! Screen
size
! API’s
! Programming
language
! Overlays
! …
9

10. OS overview
Platform Language Cross-platform
iOS Objective C NO
Android Java (Dalvik JVM) NO
Windows Phone XNA/Silverlight NO
Symbian C++ Compilation per target
Blackberry Java (with RIM API) NO
Tizen Web standards Possibly
10

11. Monetizing your work
Native App Stores
Openness Open to anyone who signs agreement
Entry Cost $0 - $200
Developer Revenue 30% - 80%
Approval Few days - weeks
! Applica5on
stores
not
always
goldmines
! Ranking-­‐based
system
! Dapple
app:
$32,000
invested
vs.
$535
revenue
! Developers
are
looking
for
alterna5ves
! Less
restric5ve,
higher
revenue
rate
11

12. App store as a gold mine
Think
again
! Top
10
app
! ROI
in
2-­‐3
weeks
! Top
50
! 6
weeks
! Top
100
! 9
months
! Average
app
! 51
years
12

13. So, how long does your Iphone last?
13

14. Obvious? solution
Let’s
go
to
the
web
…
14

15. Evolution of the web
15

16. Or to show it another way
Mobile
25X growth
over next 5 years!
We
are Source: State of Drupal keynote
tiny Copyright: Dries Buytaert
16

17. Let’s talk money again …
Native App Stores Web Apps
Openness Open to anyone who signs agreement Completely open
Entry Cost $0 - $200 None
Developer Revenue 30% - 80% 100%
Approval Few days - weeks Instantaneous
17

18. It’s not that easy though
! Mobile
web
usage
differs
from
surfing
on
a
desktop
! Quick
and
easy
bits
of
content
! Desktop
pages
are
too
bloated;
contain
too
much
informa5on
! Typical
mobile
usage:
18

19. Do you really want to see this?
19

20. On this …
20

21. This is you in that world!
21

22. Web only for trivial apps?
This
was
in
2010
! Google
engineers
ported
Quake
II
to
browsers
! Showing
capabili5es
of
HTML5-­‐compa5ble
browsers
! Cross-­‐compiled
3D
engine
to
JavaScript
22

23. Stop
Demo
5me
…
! hTp://acko.net/
! hTp://www.newgrounds.com/portal/view/
470460
! hTp://helloracer.com/webgl/
! hTp://cra`ymind.com/factory/html5video/
CanvasVideo.html
! hTp://peterned.home.xs4all.nl/3d/
! hTp://chrome.angrybirds.com/
23

24. So why am I here
Mosquito
! FP7-­‐ICT
project
! Iden5fy
barriers
of
fragmenta5on
! Support
standardiza5on
of
mobile
internet
! Support
ac5ons
rela5ng
to
interoperability
! Mobile
applica5ons
! And
services
24

25. We could use your help
! We
need
interviewees
! Developers
! Mobile
oriented
¡ Any
plaVorm
¡ Any
type
of
applica5on
¡ Any
type
of
content
! If
you’d
like
to
help,
talk
to
me
or
give
me
your
business
card
! If
you
don’t,
I’ll
talk
to
you
;)
25

26. ! FP7-­‐ICT
project
! Open
Source
plaVorm
and
components
! For
Future
Internet
! A
lot
going
on
! Development,
specifica5ons,
security,
privacy,
…
! More
later
26

27. Some mobile web approaches
Separate
domains
27

28. Template switching
! Dynamically
change
website’s
template
! Selec5on
based
on
device
detec5on
! Only
the
website’s
layout
changes
! Content
can
be
reused
! Important:
Mobile
template’s
quality
28

29. ! Mobile
template:
Rules
of
thumb
! Single
column
design
for
most
device
! No
floats,
fixed
widths,
or
fixed
margins
! Limit
usage
of
tables,
no
frames
! ...
! W3C
Mobile
Web
Best
Prac5ces
! hTp://www.w3.org/TR/mobile-­‐bp/
29

30. Why not?
Desktop
! More
maintenance
Mobile
! Doesn’t
scale
well
30

31. Transcoding
! Proxy
approach:
intermediate
server
! Perform
device
detec5on
! Fetch
content
from
original
desktop
site
! Apply
specific
content
adapta5on
rules
¡ Remove
specific
content,
transform
menu
structure,
resize
images,
…
Proxy
Desktop
31

32. Transcoding
! Not
a
fan
…
! But
let’s
wait
for
Eric
Boussier
from
Antenna
32

33. Responsive web design
! Target:
high-­‐end
devices
! Fully
leverage
HTML5
and
CSS3
! Typically:
@media
@media
screen
and
(min-­‐width:
640px)
and
(max-­‐width:
809px)
{
…
}
33

34. Example
Boston
globe
! Design
of
the
header
! From
high
to
low
! 1200px
(max
width)
! 960px
! 768px
! 600px
! 480px
! 320px
34

35. >960px
35

36. 768px
36

37. 600px
37

38. 480px
38

39. 320px
39

40. What’s still wrong
! High
to
low
! You
leave
out
so
much
…
! Design
“from
the
ground
up”
! Progressive
enhancement
40

41. Difficult …
! Designing
! Very
hard
! Coding
! Very
hard
! Tes5ng
! Even
harder
41

42. Some more about webinos
Local
device
42

43. Personal zone
43

44. 44

45. 45

46. 46

47. 47

48. Links
IBBT
! www.ibbt.be
! TwiTer:
@ibbt
! www.facebook.com/IBBT.be
48

49. Links
Mosquito
! www.mosquito-­‐fp7.eu
! TwiTer:
@mosquito_fp7
! Survey:
hTp://survey.inno-­‐projects.net/index.php?
sid=93895
49

50. Help us … Please …
50

51. And if you like dogs better …
51

52. Link
Webinos
! www.webinos.org
! developer.webinos.org
! TwiTer:
@webinos_project
! www.facebook.com/webinosproject
! hTp://www.linkedin.com/groups?
gid=3387786
52

53. My contact data
! Dieter
Blomme
! dieter.blomme@intec.ugent.be
! TwiTer:
@da`en
! Slideshare:
hTp://www.slideshare.net/da`en
53

54. Everybody clap your hands …
54

55. QUESTIONS?
Thank
you