slides from my

1. Metrics of the mobile Web
State of the fragmentation
Roland Gülle
Sevenval GmbH
21. September 2011 www.mobile-devcon.de

2. about:sevenval
Leading Technologies for
Mobile Web Development
and beyond.
Experts in Web Technologies
Founded 1999
Operating globally
O!ces in Germany (HQ), US und UK
Strong backup
Subsidiary of YOC AG (market-listed)
Highly trusted
500+ web portals , serving Fortune 500 companies

4. • Fragmentation
• Metrics
• Brands / OS / Browser / HTML5
• Future
• Solutions

5. ?
at ion exists
• Why fragment on
)fra gmentati
of (Web-
• Kinds p
•W eb vs. Ap
• WebApps
Fragmentation.

6. In Mobile, fragmentation is forever.
Deal with it. in AdMob and GetJar
Richard Wong, Investor

7. Why?

8. regions, people and situations
require a di"erent use of services.

9. Innovation in mobile is fast. The technology
adaptation lifecycle generates fragmentation at the
user base.
Time
Technology
Users
Crossing the Chasm by Geo"rey A. Moore
http://en.wikipedia.org/wiki/Crossing_the_Chasm

10. Web Standards
Web standards is a general term for the formal standards and other
technical specifications that define and describe aspects of the
World Wide Web. In recent years, the term has been more frequently
associated with the trend of endorsing a set of standardized best
practices for building web sites, and a philosophy of web design and
development that includes those methods.
http://en.wikipedia.org/wiki/Web_standard

11. The nice thing about
standards
is that you have
so many to choose from.
Andrew S. Tanenbaum
Author of MINIX and many computer science textbooks,
regarded as standard texts in the field.
Computer Networks, 2nd ed., p. 254 as cited in http://
en.wikiquote.org/wiki/Andrew_S._Tanenbaum

12. Web or App?

13. App ≠ Web
The more you limit an o"ering, The more comprehensive your
the easier it gets to access it content gets the more meaningful
through an App. it gets to access it through the Web.
“Apps are like Songs“ “Cool URIs don't change“
Daniel K. Appelquist Tim Berners-Lee
http://www.torgo.com/blog/2009/06/apps-are-like-songs.html http://www.w3.org/Provider/Style/URI

14. WebApps ≠ Web Sites
http://
pinchzo
o m.com
/posts
„Budg /anato
my-of-
et app a-htm
l5-mob
This is ropriat ile-app
and it not a w ely.
will co ebsite,
st you
a lot m
ore.“

15. Result: Fragmentation.
And YOU have to care about it.

16. e
a rket Shar
• Vendor M
e
rket Shar
• OS Ma
ons
•O S & Versi
re
• Bro wser Sha mentatio
n
rag
Markup F
• HTML5 &
Metrics.

17. metrics: base
source: fitml.com (& others)
date: 08-11
sites: 500+
page impressions: 1.300.524.157

18. Handset Brands

19. Brands: DE

20. Brands: AT

21. Brands: UK

22. Operating Systems

23. OS: DE

24. OS: US

25. OS: Asia
Nokia OS
(incl. S40)

26. OS: iOS
2%
7%
2% 1%
7% 9%
iOS 4.x
iOS 3.x
iOS 2.x
91%
91% 90%
2%
8%
iOS 4.x
iOS 3.x
iOS 2.x
90%

27. OS: Android & DE/UK/AT
2%
1%3%
15%
2.2
2.3
45%
2.1
1.5
1.6
Tail
34%

28. OS: Android & US
2%
1%
9%
15% 2.2
2.3
49% 2.1
1.5
1.6
Tail
24%

29. OS: Android & Asia
1%
2%
12%
2.2
12% 2.3
42%
2.1
1.5
1.6
Tail
31%

30. Browsers

31. Browsers: DE/AT
14%
Apple Mobile Safari
3% Open Handset Alliance
4% Android Build-In
42% Nokia BrowserNG
7%
Dolfin
Opera Mini
Tail
30%
17% Open Handset Alliance
Android Build-In
Apple Mobile Safari
3%
41%
4% Nokia BrowserNG
Dolfin
9%
Research In Motion
Browser
Tail
26%

32. Browsers: US
2% 3%
Apple Mobile Safari
22% Open Handset Alliance
Android Build-In
41%
Research In Motion
Browser
Opera Mini
Access Netfront
Tail
31%

33. Browsers: Asia
Apple Mobile Safari
23%
34% Open Handset Alliance
Android Build-In
Opera Mini
5%
Nokia BrowserNG
6% Research In Motion
Browser
Tail
10%
22%

34. Browsers: Rendering Engines & WebKit Versions
Prozent
0% 10% 20% 30% 40% 50% Webkit
534.0
533.0 Presto
525.0
532.0 Netfront
528.0
530.0 Trident
Tail
Tail
0% 10% 20% 30% 40% 0% 10% 20% 30% 40% 50%
533.0 534.0
534.0 533.0
525.0 528.0
530.0 530.0
528.0 532.0
532.0 525.0
Tail Tail
0% 20% 40% 60% 0% 10% 20% 30% 40% 50%
534.0 534.0
533.0 533.0
525.0 525.0
528.0 528.0
413.0 413.0
532.0 532.0
Tail Tail

35. Markup

36. Support of input tags
Percentage$of$devices$not$suppor4ng$any$HTML5$input$tags$
37%$
27%$
25%$
10%$
21%$
There$is$no$device$suppor4ng$all$23$HTML5$input$tags.$
Maximum$tags:$19$out$of$23$

37. Support of OnTouch
76%
58%
76% 71%
58%

38. Mediaquery
Mediaquery
0% 10% 20% 30% 40% 50% 60% 70% 80%
DE 74%
AT 72%
US 70%
Asia 58%
UK 56%

39. AJAX / JavaScript / DOM Manipulation
Script DOM Handling
0% 10% 20% 30% 40% 50% 60% 70% 80%
US 75%
DE 71%
AT 68%
UK 57%
Asia 54%

40. s
• Good New
•B ad News ge
ne d Challen
•T he Redefi
Future.

41. Good News: Everyone is moving to HTML5
http://www.slideshare.net/sevenval/why-html5-is-getting-on-my-nerves

42. 10
ce 11-20
ren
tC onfe
ip
avascr
on tal J
ll Fr uget
Fu Ro
Bad News: You still have to do it. Pau
l

43. The challenge
is redefined.
Keep it running on all handsets/
browsers (including the older ones).

44. The challenge
is redefined.
Keep it running on all handsets/
browsers (including the older ones).
keep your site/app „state of the art“!
(...and don‘t break it.)

45. se
• Devic e Databa
•T emplates
eW eb Design
•R esponsiv
all
• Combine
Solutions.

46. Device Description Repository

47. Device Description Repository

48. Device Description Repository
d Handset
1Androi
earc h: 201
S

49. Device Description Repository
Hardware

50. Device Description Repository
Think about software,
not hardware.

51. Templates
desktop.html
tablet.html
smartphone.html
featurePhone.xhtml

52. Templates: Separate Clients
HTM
L5 P
ART
Y!
M L5/ n. ks if
the
HT versio he c
ed er, who c enough“.
b loat CSS3 rkeep „smart
Full cript/ Doo ce is Simpl
e XH
ava
S devi TML
J /MP
V ersion
sm
ar ture phone
tp fea
ho
ne

53. Templates: The party starts.
HTM
L5 P
ART
Y!
sm
ar ture phone
tp fea
ho
ne

54. Templates
HTM
L5 P
ART
Y!
go ?
Man
sm
ar ture phone
tp fea
ho
ne

55. Templates
HTM
L5 P
ART
Y!
ndroid?ugh!
A eno
not
This it
sm
ar ture phone
tp fea
ho
ne

56. Templates
HTM
L5 P
ART
Y!
sm
ar ture phone
tp fea
ho
ne

57. Templates
HTM
L5 P oin
ART
Y! rea dy to j
Not really 5 party...
ML
our HT
aM ini
Oper
sm
ar ture phone
tp fea
ho
ne

58. Templates
HTM
L5 P
ART
Y!
Don‘t think in
„black-and-white“.
The world is colorful!
Oper
aM ini
sm
ar ture phone
tp fea
ho
ne

59. Responsive Web Design
@media only screen and (max-device-width: 480px){
...
}
<link rel="stylesheet" type="text/css"
media="only screen and (max-device-width: 480px)"
href="small-device.css" />
http://www.slideshare.net/yiibu/pragmatic-responsive-design

60. Responsive Web Design
One URL, one document.

61. Responsive Web Design

62. Responsive Web Design

63. Responsive Web Design
Smart Browsers, Developers
and Designers needed,
to let it work as expected. g
he
e t t ss.
lients proce
all c ent &
And cont
e
sam

64. Combine all together

65. Server & Client Side Adaptation
(Us
e
(Ja r-Age
v n
= i aScri t: /i
Pho pt: Ph
ne
4 win one/)
HTT dow
src.examples P(s) .de +
vic
Property eP ixe
Detection lRa
tio
===
HTT 2)
anywebsite.com P(s)
Device
Device
Client
Database
HTT Database
feed.example.com P(s)
Adaptation
&
Filter
HTT
any API P(s)
yer
/ Adap tation La
ion
Presentat
Files

66. Thats our solution :)
Sevenval
FIT Technology
FITML
src.examples
Property
Detection
HTML
anywebsite.com
Client
Description
XML/RSS Repository
feed.example.com
FITML
Processor
JSON
any API
Files

67. Sevenval FIT
One Technology – Two Products
Free
Pl an a
vaila
bl e !
Cloud Solution On-Premise

68. thank you!
@sevenval
@fitml
Rock the mobile web!
http://fitml.com
http://www.flickr.com/photos/akira_1972/4376398576
http://www.flickr.com/photos/ethanhein/2298278791
http://www.flickr.com/photos/baldheretic/2902896742
http://www.flickr.com/photos/garryknight/4888370567
http://www.flickr.com/photos/novecentino/1020778171/
http://www.flickr.com/photos/tbrg-dan/3802885100/
http://www.flickr.com/photos/spitzgogo/286917522
http://www.flickr.com/photos/pand0ra23/5176011116
http://www.flickr.com/photos/uberculture/20323507
http://www.flickr.com/photos/mybloodyself/2876923509
http://www.flickr.com/photos/voxpelli/2954947277
http://www.flickr.com/photos/24293932@N00/2752221871
http://www.flickr.com/photos/brykmantra/29475958/
http://www.flickr.com/photos/jenosaur/5313047889
http://www.flickr.com/photos/ronbennetts/5516621911
http://www.flickr.com/photos/matalyn/414083243
http://www.flickr.com/photos/timparkinson/2436223445
http://www.flickr.com/photos/luthercollegearchives/1484927223
@rolandguelle