Mobile devcon metrics of the mobile web
-
date post
21-Oct-2014 -
Category
Technology
-
view
2.064 -
download
0
description
Transcript of Mobile devcon metrics of the mobile web
21. September 2011 www.mobile-devcon.de
Metrics of the mobile Web
State of the fragmentation
Roland GülleSevenval GmbH
Experts in Web TechnologiesFounded 1999
Operating globallyO!ces in Germany (HQ), US und UK
Strong backupSubsidiary of YOC AG (market-listed)
Highly trusted500+ web portals , serving Fortune 500 companies
Leading Technologies for Mobile Web Development and beyond.
about:sevenval
• Fragmentation• Metrics• Brands / OS / Browser / HTML5
• Future• Solutions
Fragmentation.
• Why fragmentation exists?
• Kinds of (Web-)fragmentation
• Web vs. App
• WebApps
In Mobile, fragmentation is forever. Deal with it.
Richard Wong, Investor in AdMob and GetJar
Why?
regions, people and situations require a di"erent use of services.
http://en.wikipedia.org/wiki/Crossing_the_ChasmCrossing the Chasm by Geo"rey A. Moore
Innovation in mobile is fast. The technology adaptation lifecycle generates fragmentation at the user base.
Time
TechnologyUsers
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
Web Standards
Andrew S. Tanenbaum
The nice thing about
standards is that you have
so many to choose from.
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
Web or App?
App ≠ Web
“Cool URIs don't change“Tim Berners-Lee
http://www.w3.org/Provider/Style/URI
“Apps are like Songs“Daniel K. Appelquisthttp://www.torgo.com/blog/2009/06/apps-are-like-songs.html
The more you limit an o"ering,
the easier it gets to access it
through an App.
The more comprehensive your
content gets the more meaningful it gets to access it through the Web.
WebApps ≠ Web Sites
„Budget appropriately.This is not a website,and it will cost you a lot more.“
http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app
Result: Fragmentation.
And YOU have to care about it.
• Vendor Market Share
• OS Market Share
• OS & Versions
• Browser Share
• HTML5 & Markup Fragmentation
Metrics.
metrics: base
source:date:sites:page impressions:
fitml.com (& others)
08-11500+
1.300.524.157
Handset Brands
Brands: DE
Brands: AT
Brands: UK
Operating Systems
OS: DE
OS: US
OS: Asia
Nokia OS (incl. S40)
OS: iOS
91%
7% 2%
iOS 4.x iOS 3.x iOS 2.x
90%
9% 1%
iOS 4.x iOS 3.x iOS 2.x
90%
8% 2%
iOS 4.x iOS 3.x iOS 2.x
91%
7% 2%
OS: Android & DE/UK/AT
45%
34%
15%
1% 3% 2%
2.2 2.3 2.1 1.5 1.6 Tail
OS: Android & US
49%
24%
15%
9% 1% 2%
2.2 2.3 2.1 1.5 1.6 Tail
OS: Android & Asia
42%
31%
12%
12% 2% 1%
2.2 2.3 2.1 1.5 1.6 Tail
Browsers
Browsers: DE/AT
42%
30%
7%
4%
3%
14% Apple Mobile Safari
Open Handset Alliance Android Build-In Nokia BrowserNG
Dolfin
Opera Mini
Tail
41%
26%
9%
4%
3%
17% Open Handset Alliance Android Build-In Apple Mobile Safari
Nokia BrowserNG
Dolfin
Research In Motion Browser Tail
41%
31%
22%
2% 3% Apple Mobile Safari
Open Handset Alliance Android Build-In Research In Motion Browser Opera Mini
Access Netfront
Tail
Browsers: US
34%
22% 10%
6%
5%
23% Apple Mobile Safari
Open Handset Alliance Android Build-In Opera Mini
Nokia BrowserNG
Research In Motion Browser Tail
Browsers: Asia
Browsers: Rendering Engines & WebKit VersionsProzent
Webkit Presto Netfront Trident Tail
0% 10% 20% 30% 40%
533.0 534.0 525.0 530.0 528.0 532.0
Tail
0% 10% 20% 30% 40% 50%
534.0 533.0 525.0 532.0 528.0 530.0
Tail
0% 20% 40% 60%
534.0 533.0 525.0 528.0 413.0 532.0
Tail
0% 10% 20% 30% 40% 50%
534.0 533.0 528.0 530.0 532.0 525.0
Tail
0% 10% 20% 30% 40% 50%
534.0 533.0 525.0 528.0 413.0 532.0
Tail
Markup
Support of input tags
37%$
10%$
There$is$no$device$suppor4ng$all$23$HTML5$input$tags.$Maximum$tags:$19$out$of$23$
25%$
21%$
27%$
Percentage$of$devices$not$suppor4ng$any$HTML5$input$tags$
Support of OnTouch
76%
58%
71%
76%
58%
Mediaquery
74%
72%
70%
58%
56%
0% 10% 20% 30% 40% 50% 60% 70% 80%
DE
AT
US
Asia
UK
Mediaquery
AJAX / JavaScript / DOM Manipulation
75%
71%
68%
57%
54%
0% 10% 20% 30% 40% 50% 60% 70% 80%
US
DE
AT
UK
Asia
Script DOM Handling
Future.
• Good News
• Bad News
• The Redefined Challenge
Good News: Everyone is moving to HTML5
http://www.slideshare.net/sevenval/why-html5-is-getting-on-my-nerves
Bad News: You still have to do it. Full Fronta
l Javascript Confe
rence 11-2
010
Paul Rouget
The challenge is redefined.
Keep it running on all handsets/browsers (including the older ones).
The challenge is redefined.
keep your site/app „state of the art“!(...and don‘t break it.)
Keep it running on all handsets/browsers (including the older ones).
Solutions.
• Device Database
• Templates
• Responsive Web Design
• Combine all
Device Description Repository
Device Description Repository
Device Description Repository
Search: 2011 Android Handset
Device Description Repository
Hardware
Device Description Repository
Think about software, not hardware.
Templates
desktop.htmltablet.htmlsmartphone.htmlfeaturePhone.xhtml
Templates: Separate Clients
smartphonefeature phone
HTML5 PARTY!
Doorkeeper, who che
cks if the
device is „
smart enough“.
Simple XHTML/MP Version
Full bloated
HTML5/
JavaScript/C
SS3 version
.
Templates: The party starts.
smartphonefeature phone
HTML5 PARTY!
Templates
smartphonefeature phone
HTML5 PARTY!
Mango?
Templates
smartphonefeature phone
HTML5 PARTY!
Android?
This it not enou
gh!
Templates
smartphonefeature phone
HTML5 PARTY!
Templates
smartphonefeature phone
HTML5 PARTY!
Opera Mini
Not really ready to join
our HTML5 party...
Templates
smartphonefeature phone
HTML5 PARTY!
Opera Mini
Don‘t think in„black-and-white“.
The world is colorful!
http://www.slideshare.net/yiibu/pragmatic-responsive-design
@media only screen and (max-device-width: 480px){...
}
Responsive Web Design
<link rel="stylesheet" type="text/css"media="only screen and (max-device-width: 480px)"href="small-device.css" />
Responsive Web Design
One URL, one document.
Responsive Web Design
Responsive Web Design
Responsive Web Design
Smart Browsers, Developers and Designers needed,
to let it work as expected.And a
ll clients
get the
same conten
t & process
.
Combine all together
Server & Client Side Adaptation
Files
src.examples
anywebsite.com
feed.example.com
any API
Adaptation &
Filter
DeviceDatabase
PropertyDetection
Presentation / Adaptation Layer
HTTP(s)
HTTP(s)
HTTP(s)
HTTP(s)
(User-Agent: /iPhone/) +
(JavaScript: window.devicePixelRatio === 2)
= iPhone 4
DeviceClient
Database
Thats our solution :)
Files
FITMLsrc.examples
HTMLanywebsite.com
XML/RSSfeed.example.com
JSONany API
FITML Processor
Client Description Repository
PropertyDetection
SevenvalFIT Technology
Sevenval FITOne Technology – Two Products
On-PremiseCloud Solution
Free Plan available!
http://www.flickr.com/photos/akira_1972/4376398576http://www.flickr.com/photos/ethanhein/2298278791http://www.flickr.com/photos/baldheretic/2902896742http://www.flickr.com/photos/garryknight/4888370567http://www.flickr.com/photos/novecentino/1020778171/http://www.flickr.com/photos/tbrg-dan/3802885100/http://www.flickr.com/photos/spitzgogo/286917522http://www.flickr.com/photos/pand0ra23/5176011116http://www.flickr.com/photos/uberculture/20323507http://www.flickr.com/photos/mybloodyself/2876923509http://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/5313047889http://www.flickr.com/photos/ronbennetts/5516621911http://www.flickr.com/photos/matalyn/414083243http://www.flickr.com/photos/timparkinson/2436223445http://www.flickr.com/photos/luthercollegearchives/1484927223
@sevenval@fitml
thank you!
Rock the mobile web!http://fitml.com
@rolandguelle