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