Metrics of the mobile Web                               State of the fragmentation Roland GülleSevenval GmbH      21. Sept...
about:sevenvalLeading Technologies forMobile Web Developmentand beyond.                 Experts in Web Technologies       ...
• Fragmentation• Metrics • Brands / OS / Browser / HTML5• Future• Solutions
?                 at ion exists• Why  fragment                  on                  )fra gmentati         of (Web-• Kinds ...
In Mobile, fragmentation is forever.              Deal with it. in AdMob and GetJar                 Richard Wong, Investor
Why?
regions, people and situationsrequire a di"erent use of services.
Innovation in mobile is fast. The technologyadaptation lifecycle generates fragmentation at theuser base.                 ...
Web Standards Web standards is a general term for the formal standards and other   technical specifications that define and ...
The nice thing about            standards     is that you have         so many to choose from.                        Andr...
Web or App?
App ≠ Web     The more you limit an o"ering,                          The more comprehensive your     the easier it gets t...
WebApps ≠ Web Sites        http://                pinchzo                        o   m.com                                ...
Result: Fragmentation.                    And YOU have to care about it.
e            a rket Shar• Vendor M                    e         rket Shar• OS Ma               ons •O  S & Versi          ...
metrics: base    source:             fitml.com (& others)    date:                       08-11    sites:                   ...
Handset Brands
Brands: DE
Brands: AT
Brands: UK
Operating Systems
OS: DE
OS: US
OS: Asia           Nokia OS           (incl. S40)
OS: iOS           2%     7%            2%                                1%      7%                                 9%    ...
OS: Android & DE/UK/AT                      2%               1%3%        15%                                 2.2          ...
OS: Android & US                        2%                       1%                  9%      15%                          ...
OS: Android & Asia                   1%                  2%            12%                              2.2      12%      ...
Browsers
Browsers: DE/AT          14%                      Apple Mobile Safari     3%               Open Handset Alliance 4%       ...
Browsers: US               2% 3%                             Apple Mobile Safari     22%                     Open Handset ...
Browsers: Asia                             Apple Mobile Safari          23%                       34%   Open Handset Allia...
Browsers: Rendering Engines & WebKit Versions                                Prozent                 0%   10%   20%   30% ...
Markup
Support of                input tagsPercentage$of$devices$not$suppor4ng$any$HTML5$input$tags$                             ...
Support of OnTouch                      76%                58%       76%              71%                              58%
Mediaquery                         Mediaquery        0%   10%   20%   30%   40%   50%   60%    70%    80%  DE             ...
AJAX / JavaScript / DOM Manipulation                    Script DOM Handling       0%   10%   20%   30%   40%   50%   60%  ...
s• Good New•B ad News                ge             ne d Challen •T he Redefi                               Future.
Good News: Everyone is moving to HTML5http://www.slideshare.net/sevenval/why-html5-is-getting-on-my-nerves
10                                                                           ce 11-20                                     ...
The challenge                            is redefined.  Keep it running on all handsets/browsers (including the older ones).
The challenge                                 is redefined.   Keep it running on all handsets/ browsers (including the olde...
se• Devic e Databa•T emplates              eW  eb Design •R esponsiv             all • Combine                            ...
Device Description Repository
Device Description Repository
Device Description Repository                                     d Handset                              1Androi          ...
Device Description Repository                      Hardware
Device Description Repository            Think about software,                not hardware.
Templates            desktop.html            tablet.html            smartphone.html            featurePhone.xhtml
Templates: Separate Clients                                                               HTM                             ...
Templates: The party starts.                           HTM                                 L5 P                           ...
Templates                       HTM                             L5 P                                  ART                 ...
Templates                                        HTM                                              L5 P                    ...
Templates                       HTM                             L5 P                                  ART                 ...
Templates                       HTM                             L5 P                                    oin               ...
Templates                                 HTM                                       L5 P                                  ...
Responsive Web Design                      @media only screen and (max-device-width: 480px){                        ...   ...
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.           ...
Combine all together
Server & Client Side Adaptation                        (Us                             e                      (Ja r-Age   ...
Thats our solution :)                           Sevenval                        FIT Technology  FITML   src.examples      ...
Sevenval FITOne Technology – Two Products                Free                     Pl   an a                              v...
thank you!                                                                         @sevenval                              ...
Mobile devcon   metrics of the mobile web
Upcoming SlideShare
Loading in …5
×

Mobile devcon metrics of the mobile web

3,445
-1

Published on

slides from my

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,445
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile devcon metrics of the mobile web

  1. 1. Metrics of the mobile Web State of the fragmentation Roland GülleSevenval GmbH 21. September 2011 www.mobile-devcon.de
  2. 2. about:sevenvalLeading Technologies forMobile Web Developmentand 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
  3. 3. • Fragmentation• Metrics • Brands / OS / Browser / HTML5• Future• Solutions
  4. 4. ? at ion exists• Why fragment on )fra gmentati of (Web-• Kinds p •W eb vs. Ap • WebApps Fragmentation.
  5. 5. In Mobile, fragmentation is forever. Deal with it. in AdMob and GetJar Richard Wong, Investor
  6. 6. Why?
  7. 7. regions, people and situationsrequire a di"erent use of services.
  8. 8. Innovation in mobile is fast. The technologyadaptation lifecycle generates fragmentation at theuser base. Time Technology UsersCrossing the Chasm by Geo"rey A. Moorehttp://en.wikipedia.org/wiki/Crossing_the_Chasm
  9. 9. 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
  10. 10. 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
  11. 11. Web or App?
  12. 12. 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 dont change“Daniel K. Appelquist Tim Berners-Leehttp://www.torgo.com/blog/2009/06/apps-are-like-songs.html http://www.w3.org/Provider/Style/URI
  13. 13. 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.“
  14. 14. Result: Fragmentation. And YOU have to care about it.
  15. 15. 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.
  16. 16. metrics: base source: fitml.com (& others) date: 08-11 sites: 500+ page impressions: 1.300.524.157
  17. 17. Handset Brands
  18. 18. Brands: DE
  19. 19. Brands: AT
  20. 20. Brands: UK
  21. 21. Operating Systems
  22. 22. OS: DE
  23. 23. OS: US
  24. 24. OS: Asia Nokia OS (incl. S40)
  25. 25. 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%
  26. 26. OS: Android & DE/UK/AT 2% 1%3% 15% 2.2 2.3 45% 2.1 1.5 1.6 Tail 34%
  27. 27. OS: Android & US 2% 1% 9% 15% 2.2 2.3 49% 2.1 1.5 1.6 Tail 24%
  28. 28. OS: Android & Asia 1% 2% 12% 2.2 12% 2.3 42% 2.1 1.5 1.6 Tail 31%
  29. 29. Browsers
  30. 30. Browsers: DE/AT 14% Apple Mobile Safari 3% Open Handset Alliance 4% Android Build-In 42% Nokia BrowserNG7% 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%
  31. 31. 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%
  32. 32. 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%
  33. 33. 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
  34. 34. Markup
  35. 35. Support of input tagsPercentage$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$
  36. 36. Support of OnTouch 76% 58% 76% 71% 58%
  37. 37. Mediaquery Mediaquery 0% 10% 20% 30% 40% 50% 60% 70% 80% DE 74% AT 72% US 70% Asia 58% UK 56%
  38. 38. 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%
  39. 39. s• Good New•B ad News ge ne d Challen •T he Redefi Future.
  40. 40. Good News: Everyone is moving to HTML5http://www.slideshare.net/sevenval/why-html5-is-getting-on-my-nerves
  41. 41. 10 ce 11-20 ren tC onfe ip avascr on tal J ll Fr uget Fu RoBad News: You still have to do it. Pau l
  42. 42. The challenge is redefined. Keep it running on all handsets/browsers (including the older ones).
  43. 43. 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.)
  44. 44. se• Devic e Databa•T emplates eW eb Design •R esponsiv all • Combine Solutions.
  45. 45. Device Description Repository
  46. 46. Device Description Repository
  47. 47. Device Description Repository d Handset 1Androi earc h: 201 S
  48. 48. Device Description Repository Hardware
  49. 49. Device Description Repository Think about software, not hardware.
  50. 50. Templates desktop.html tablet.html smartphone.html featurePhone.xhtml
  51. 51. 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
  52. 52. Templates: The party starts. HTM L5 P ART Y! sm ar ture phone tp fea ho ne
  53. 53. Templates HTM L5 P ART Y! go ? Man sm ar ture phone tp fea ho ne
  54. 54. Templates HTM L5 P ART Y! ndroid?ugh! A eno not This it sm ar ture phone tp fea ho ne
  55. 55. Templates HTM L5 P ART Y! sm ar ture phone tp fea ho ne
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. Responsive Web Design One URL, one document.
  60. 60. Responsive Web Design
  61. 61. Responsive Web Design
  62. 62. 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
  63. 63. Combine all together
  64. 64. 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
  65. 65. Thats our solution :) Sevenval FIT Technology FITML src.examples Property Detection HTML anywebsite.com Client DescriptionXML/RSS Repository feed.example.com FITML Processor JSON any API Files
  66. 66. Sevenval FITOne Technology – Two Products Free Pl an a vaila bl e ! Cloud Solution On-Premise
  67. 67. thank you! @sevenval @fitml Rock the mobile web! http://fitml.comhttp://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/2954947277http://www.flickr.com/photos/24293932@N00/2752221871http://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 @rolandguelle

×