SlideShare a Scribd company logo
1 of 41
Download to read offline
The mobile
browser world
           Peter-Paul Koch
    http://quirksmode.org
    http://twitter.com/ppk
     Albany, 14 April 2011




                             1
The desktop web
• Boring!
• Only five browsers
• with only one viewport each
• that support nearly everything
• Even IE? Yes, even IE.


                                   2
3
The mobile web
• Exciting!
• Twenty browsers and counting
• ranging from great to lousy
• Fascinating new bugs that don’t occur on
  desktop
• Eventually about five times as many users as
  desktop web


                                                4
Mobile First!
• Luke Wroblewski invented it
• Design your sites for mobile first.
• You’ll be forced to decide what is so
  important that it MUST be shown in the
  mobile device’s tiny display.
• The things you leave out of the mobile
  version don’t really need to be in the
  desktop version, either.

                                           5
The mobile browsers
•   Safari iPhone       •   Obigo WebKit
•   Android WebKit      •   Ovi
•   Dolfin for bada      •   Palm WebKit
•   BlackBerry WebKit   •   BlackBerry old
•   Opera Mobile        •   Phantom
•   Opera Mini          •   Obigo old
•   MicroB              •   NetFront
•   Nokia WebKit        •   IE
•   Firefox             •   UCWeb

You may groan now.


                                             6
The mobile browsers
•   Safari iPhone       •   Obigo WebKit
•   Android WebKit      •   Ovi
•   Dolfin for bada      •   Palm WebKit
•   BlackBerry WebKit   •   BlackBerry old
•   Opera Mobile        •   Phantom
•   Opera Mini          •   Obigo old
•   MicroB              •   NetFront
•   Nokia WebKit        •   IE
•   Firefox             •   UCWeb

Gecko-based


                                             7
The mobile browsers
•   Safari iPhone       •   Obigo WebKit
•   Android WebKit      •   Ovi
•   Dolfin for bada      •   Palm WebKit
•   BlackBerry WebKit   •   BlackBerry old
•   Opera Mobile        •   Phantom
•   Opera Mini          •   Obigo old
•   MicroB              •   NetFront
•   Nokia WebKit        •   IE
•   Firefox             •   UCWeb

Presto-based


                                             8
The mobile browsers
•   Safari iPhone         •   Obigo WebKit
•   Android WebKit        •   Ovi
•   Dolfin for bada        •   Palm WebKit
•   BlackBerry WebKit     •   BlackBerry old
•   Opera Mobile          •   Phantom
•   Opera Mini            •   Obigo old
•   MicroB                •   NetFront
•   Nokia WebKit          •   IE
•   Firefox               •   UCWeb

Other rendering engines


                                               9
The mobile browsers
•   Safari iPhone       •   Obigo WebKit
•   Android WebKit      •   Ovi
•   Dolfin for bada      •   Palm WebKit
•   BlackBerry WebKit   •   BlackBerry old
•   Opera Mobile        •   Phantom
•   Opera Mini          •   Obigo old
•   MicroB              •   NetFront
•   Nokia WebKit        •   IE
•   Firefox             •   UCWeb

WebKit-based


                                             10
WebKit on Mobile
There is no WebKit on mobile!
There's iPhone Safari (3 and 4),
and Android (2.1 and 2.2)‫,‏‬
and Nokia WebKit (S40 and Symbian)‫,‏‬
and Blackberry WebKit,
and Dolfin for bada,
and Palm, and Obigo, and a few more


These WebKits are all different.
Not wildly so, but you’ll notice some oddities.


                                                  11
Exhibit A: WebKit comparison table
http://quirksmode.org/webkit.html




                                     12
The mobile browsers
•   Safari iPhone       •   Obigo WebKit
•   Android WebKit      •   Ovi
•   Dolfin for bada      •   Palm WebKit
•   BlackBerry WebKit   •   BlackBerry old
•   Opera Mobile        •   Phantom
•   Opera Mini          •   Obigo old
•   MicroB              •   NetFront
•   Nokia WebKit        •   IE
•   Firefox             •   UCWeb




                                             13
The mobile browsers
•   Safari iPhone       •   Obigo WebKit
•   Android WebKit      •   Ovi
•   Dolfin for bada      •   Palm WebKit
•   BlackBerry WebKit   •   BlackBerry old
•   Opera Mobile        •   Phantom
•   Opera Mini          •   Obigo old
•   MicroB              •   NetFront
•   Nokia WebKit        •   IE
•   Firefox             •   UCWeb

Proxy browsers


                                             14
Proxy browsers
• Page is downloaded to and rendered on a
  specialised server.
• A highly compressed image is sent to the
  client.
• Advantage: cheap, both in device and in
  network costs
• Disadvantage: no client-side interactivity

                                               15
Global stats Q4 2010
                    (by StatCounter)

Safari       23% iOS                        Stable
Opera        22% Many OSs                   Stable
BlackBerry   18% BlackBerry                 Down
Nokia        16% Symbian (and S40)          Stable
Android      12% Android                    Up
NetFront     4% Sony Ericsson and Samsung   Stable
Samsung      1% bada                        Up
UCWeb        1% Many OSs                    Down
Others       3%
                                                     16
Browser stats
• Those are GLOBAL stats; they are not
  necessarily correct for the sites you’re
  working on. Always check your stats.
• Social media referrals cause
  disproportionate iPhone visits; and Android
  to a lesser degree.




                                                17
US stats Q4 2010
                   (by StatCounter)

Safari       34% iOS                        Stable

BlackBerry   33% BlackBerry                 Down

Android      24% Android                    Up

Opera        3% Many OSs                    Stable

NetFront     2% Sony Ericsson and Samsung   Stable

Nokia        1% Symbian (and S40)           Stable

Others       3%
                                                     18
Stats
               (global, Q4 2010)
Safari
Opera                  1% 3%
                        1%
BlackBerry           4%
                               23%
Nokia
               12%
Android
NetFront
Samsung
UCWeb
Others
             16%

                                 22%


                       18%




                                       19
But usually this is what happens
Safari

Android




           Rest? What rest?




                                    20
Which mobile browsers?
• Safari iPhone
• Opera Mini
• Android WebKit
• US: BlackBerry (WebKit and older)
• Europe: Nokia WebKit
• Dolfin for bada (easy)
• Opera Mobile (easy)

                                      21
Progressive enhancement
How do you deal with this immense
amount of browsers?

Use advanced tricks, but make sure your
site remains usable without them.

The site is enhanced as much as the
browser allows.


                                          22
Progressive enhancement



                    HTML

All browsers support HTML. That’s the definition
of a browser.


                                                  23
Progressive enhancement

      Basic CSS


                    HTML

All browsers support most basic CSS. There will be
bugs, but only few.


                                                     24
Progressive enhancement
     Advanced CSS

       Basic CSS


                       HTML

Advanced CSS is restricted to advanced browsers.
Make sure it contains nothing vital; just nice extras.


                                                         25
Progressive enhancement
    Advanced CSS

       Basic CSS              Basic JavaScript


                     HTML

All browsers support basic JavaScript, but they can be
slow. Maybe switch off in BB5 and lower.


                                                         26
Progressive enhancement
    Advanced CSS            Advanced JavaScript

       Basic CSS              Basic JavaScript


                     HTML

Advanced JavaScript is a problem. Feature detection is
your friend. Make sure it contains nothing vital.


                                                         27
Performance
How long does it take to generate 250 lists
with 20 items each?

The following graphs give the number of
seconds it took the browsers.

http://quirksmode.org/m/tests/DOMspeed.html




                                              28
Performance

100                                                               97,3



 75

 50

 25
                                  11,1             12,3
        3,6         5,4
  0
      Nokia N8   Nokia E71   iPhone 3.2 (3G) Opera 9.6 WinMob   NetFront




                                                                           29
Performance
4
                                                                          3,6
                                                               3,4
                                                   3,2
3
                                         2,4
                               2,1
2                    1,9



1       0,9



0
    Android 2.3   Firefox 4   Dolfin   iPhone 4   Op 10   BlackBerry WK Nokia N8




                                                                                   30
HTML5
• Which browsers support HTML5?
• What is HTML5, anyway?
• Ask five web developers and they’ll give
  you five different answers.




                                            31
HTML5
• Offline storage
• Video and audio
• Canvas
• New input types
• Websockets
• New semantics
• SVG
• File API
• etc. etc. etc.

                     32
Offline storage
•   Safari iPhone       •   Obigo WebKit
•   Android WebKit      •   Ovi
•   Dolfin for bada      •   Palm WebKit
•   BlackBerry WebKit   •   BlackBerry old
•   Opera Mobile        •   Phantom
•   Opera Mini          •   Obigo old
•   MicroB              •   NetFront
•   Nokia WebKit        •   IE
•   Firefox             •   UCWeb




                                             33
SVG
•   Safari iPhone       •   Obigo WebKit
•   Android WebKit      •   Ovi
•   Dolfin for bada      •   Palm WebKit
•   BlackBerry WebKit   •   BlackBerry old
•   Opera Mobile        •   Phantom
•   Opera Mini          •   Obigo old
•   MicroB              •   NetFront
•   Nokia WebKit        •   IE
•   Firefox             •   UCWeb




                                             34
New input types
•   Safari iPhone       •   Obigo WebKit
•   Android WebKit      •   Ovi
•   Dolfin for bada      •   Palm WebKit
•   BlackBerry WebKit   •   BlackBerry old
•   Opera Mobile        •   Phantom
•   Opera Mini          •   Obigo old
•   MicroB              •   NetFront
•   Nokia WebKit        •   IE
•   Firefox             •   UCWeb




                                             35
HTML5
• Which browsers support HTML5?
• It depends.
• HTML5 is mainly a marketing buzzword.
• That’s not bad; we need it.
• But it has no technical meaning.

                                          36
HTML5 apps
• One core app written in HTML, CSS,
    and JavaScript.
•   Deployed to several mobile platforms.
•   Ideally, CSS and JavaScript are stored
    on the device.
•   If it can't be deployed it's still a
    website.



                                             37
Deploying HTML5 apps
• Via app store or web
• Or phone-to-phone via Bluetooth
• I’ve done it. Back in 2009
• For now, however, deployment will
  remain tricky




                                      38
HTML5 app
         deployment
• http://apparat.io/ (Uxebu)
• https://build.phonegap.com/ (Nitobi)



                                         39
JavaScript events
         Fun party game
• online and offline
• orientationchange
• shake
• cameraopen
• compasspointnorth
• devicemove (GPS?)
• phonecall
• textreceived

                          40
Thank you
I will post these slides online.

     Questions?
                           Peter-Paul Koch
                    http://quirksmode.org
                    http://twitter.com/ppk
                     Albany, 14 April 2011



                                             41

More Related Content

What's hot

Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptJonathan Stark
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesMatt Machell
 
Web App vs Web Site
Web App vs Web SiteWeb App vs Web Site
Web App vs Web SiteMatt Evans
 
Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)BraveNewCode Inc.
 
PhoneGap Development- The Secrets Of PhoneGap
PhoneGap Development- The Secrets Of PhoneGapPhoneGap Development- The Secrets Of PhoneGap
PhoneGap Development- The Secrets Of PhoneGapastoria0128
 
Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devicesFahd Alhazmi
 
Workshop session A6: Building a Low Cost Mobile Web Presence
Workshop session A6: Building a Low Cost Mobile Web Presence Workshop session A6: Building a Low Cost Mobile Web Presence
Workshop session A6: Building a Low Cost Mobile Web Presence Terminalfour
 
Android101 Intro to Android for the enterprise, IdoSphere
Android101 Intro to Android for the enterprise, IdoSphereAndroid101 Intro to Android for the enterprise, IdoSphere
Android101 Intro to Android for the enterprise, IdoSphereDennis Heinle
 
Ethical & Effective Use of Smartphones and Tablets
Ethical & Effective Use of Smartphones and TabletsEthical & Effective Use of Smartphones and Tablets
Ethical & Effective Use of Smartphones and TabletsSimeon Adedokun
 
Jan Ole Suhr
Jan Ole SuhrJan Ole Suhr
Jan Ole Suhrfndc
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Aaron Gustafson
 
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...Damian OSuilleabhain
 
Windows phone 7
Windows phone 7Windows phone 7
Windows phone 7Amal Dev
 
Review book history blackberry losing the signal
Review book history blackberry losing the signalReview book history blackberry losing the signal
Review book history blackberry losing the signalVincent Everts
 
Lg Web Network Mobile Presentation August 2009
Lg Web Network Mobile Presentation August 2009Lg Web Network Mobile Presentation August 2009
Lg Web Network Mobile Presentation August 2009Oliver Weidlich
 
Smartphone Shootout: Which One is Best?
Smartphone Shootout: Which One is Best?Smartphone Shootout: Which One is Best?
Smartphone Shootout: Which One is Best?Christopher Hunt
 

What's hot (20)

Building Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScriptBuilding Mobile Apps with HTML, CSS, and JavaScript
Building Mobile Apps with HTML, CSS, and JavaScript
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
chapter2
chapter2chapter2
chapter2
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
 
Web App vs Web Site
Web App vs Web SiteWeb App vs Web Site
Web App vs Web Site
 
Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)
 
PhoneGap Development- The Secrets Of PhoneGap
PhoneGap Development- The Secrets Of PhoneGapPhoneGap Development- The Secrets Of PhoneGap
PhoneGap Development- The Secrets Of PhoneGap
 
Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devices
 
Workshop session A6: Building a Low Cost Mobile Web Presence
Workshop session A6: Building a Low Cost Mobile Web Presence Workshop session A6: Building a Low Cost Mobile Web Presence
Workshop session A6: Building a Low Cost Mobile Web Presence
 
Android101 Intro to Android for the enterprise, IdoSphere
Android101 Intro to Android for the enterprise, IdoSphereAndroid101 Intro to Android for the enterprise, IdoSphere
Android101 Intro to Android for the enterprise, IdoSphere
 
Ethical & Effective Use of Smartphones and Tablets
Ethical & Effective Use of Smartphones and TabletsEthical & Effective Use of Smartphones and Tablets
Ethical & Effective Use of Smartphones and Tablets
 
Tech Talk
Tech TalkTech Talk
Tech Talk
 
Jan Ole Suhr
Jan Ole SuhrJan Ole Suhr
Jan Ole Suhr
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]
 
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
OS3 - Enterprise Ireland - Approaches To I Phone Development & The Irish iPho...
 
Windows phone 7
Windows phone 7Windows phone 7
Windows phone 7
 
Review book history blackberry losing the signal
Review book history blackberry losing the signalReview book history blackberry losing the signal
Review book history blackberry losing the signal
 
Lg Web Network Mobile Presentation August 2009
Lg Web Network Mobile Presentation August 2009Lg Web Network Mobile Presentation August 2009
Lg Web Network Mobile Presentation August 2009
 
Smartphone Shootout: Which One is Best?
Smartphone Shootout: Which One is Best?Smartphone Shootout: Which One is Best?
Smartphone Shootout: Which One is Best?
 
mobile presentation
mobile presentationmobile presentation
mobile presentation
 

Similar to The mobile browser world

Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiencesBen Mantooth
 
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Ugly truths about html5   moosecon - robert virkus - 2013-03-07Ugly truths about html5   moosecon - robert virkus - 2013-03-07
Ugly truths about html5 moosecon - robert virkus - 2013-03-07Enough Software
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application developmentsaritasingh19866
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High PerformanceAmjad Rafique
 
Synapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps developmentSynapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps developmentsaritasingh19866
 
W3C HTML5 KIG-The near future of the web platform
 W3C HTML5 KIG-The near future of the web platform W3C HTML5 KIG-The near future of the web platform
W3C HTML5 KIG-The near future of the web platformChanghwan Yi
 
Laurent hasson blackberry
Laurent hasson blackberryLaurent hasson blackberry
Laurent hasson blackberryWeb Summit
 
Mobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance OptimizationMobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance OptimizationMaximiliano Firtman
 
Firefox OS Apps and Web APIs
Firefox OS Apps and Web APIsFirefox OS Apps and Web APIs
Firefox OS Apps and Web APIsJan Jongboom
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for EngineersBrian LeRoux
 
HTML5, PhoneGap and What's Next
HTML5, PhoneGap and What's NextHTML5, PhoneGap and What's Next
HTML5, PhoneGap and What's Nextm0bz
 
Introduction to the Ionic Framework
Introduction to the Ionic FrameworkIntroduction to the Ionic Framework
Introduction to the Ionic Frameworkrrjohnson85
 
Android vs Others Operating System
Android vs Others Operating SystemAndroid vs Others Operating System
Android vs Others Operating SystemShemul Hossain
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesJames D Bloom
 
Developing Hybrid Applications with IONIC
Developing Hybrid Applications with IONICDeveloping Hybrid Applications with IONIC
Developing Hybrid Applications with IONICFuat Buğra AYDIN
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicKadhem Soltani
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones
 
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile WebMrJ1971
 

Similar to The mobile browser world (20)

Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiences
 
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Ugly truths about html5   moosecon - robert virkus - 2013-03-07Ugly truths about html5   moosecon - robert virkus - 2013-03-07
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
 
Synapse india reviews on mobile application development
Synapse india reviews on mobile application developmentSynapse india reviews on mobile application development
Synapse india reviews on mobile application development
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Synapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps developmentSynapse india reviews on cross plateform mobile apps development
Synapse india reviews on cross plateform mobile apps development
 
Unify - JSConf.EU 2010
Unify - JSConf.EU 2010Unify - JSConf.EU 2010
Unify - JSConf.EU 2010
 
W3C HTML5 KIG-The near future of the web platform
 W3C HTML5 KIG-The near future of the web platform W3C HTML5 KIG-The near future of the web platform
W3C HTML5 KIG-The near future of the web platform
 
Multiplatform
MultiplatformMultiplatform
Multiplatform
 
Laurent hasson blackberry
Laurent hasson blackberryLaurent hasson blackberry
Laurent hasson blackberry
 
Mobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance OptimizationMobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance Optimization
 
Firefox OS Apps and Web APIs
Firefox OS Apps and Web APIsFirefox OS Apps and Web APIs
Firefox OS Apps and Web APIs
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 
HTML5, PhoneGap and What's Next
HTML5, PhoneGap and What's NextHTML5, PhoneGap and What's Next
HTML5, PhoneGap and What's Next
 
Introduction to the Ionic Framework
Introduction to the Ionic FrameworkIntroduction to the Ionic Framework
Introduction to the Ionic Framework
 
Android vs Others Operating System
Android vs Others Operating SystemAndroid vs Others Operating System
Android vs Others Operating System
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
Developing Hybrid Applications with IONIC
Developing Hybrid Applications with IONICDeveloping Hybrid Applications with IONIC
Developing Hybrid Applications with IONIC
 
Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and IonicBuilding Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There TodayHTML5 is the Future of Mobile, PhoneGap Takes You There Today
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
 
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile Web
 

More from Peter-Paul Koch

Rethinking the mobile web
Rethinking the mobile webRethinking the mobile web
Rethinking the mobile webPeter-Paul Koch
 
The future of the mobile web
The future of the mobile webThe future of the mobile web
The future of the mobile webPeter-Paul Koch
 
The touch events - WebExpo
The touch events - WebExpoThe touch events - WebExpo
The touch events - WebExpoPeter-Paul Koch
 
Voices That Matter: JavaScript Events
Voices That Matter: JavaScript EventsVoices That Matter: JavaScript Events
Voices That Matter: JavaScript EventsPeter-Paul Koch
 
The Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersThe Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersPeter-Paul Koch
 
An Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScriptAn Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScriptPeter-Paul Koch
 
Google presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobileGoogle presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobilePeter-Paul Koch
 
Yahoo presentation: JavaScript Events
Yahoo presentation: JavaScript EventsYahoo presentation: JavaScript Events
Yahoo presentation: JavaScript EventsPeter-Paul Koch
 

More from Peter-Paul Koch (13)

Rethinking the mobile web
Rethinking the mobile webRethinking the mobile web
Rethinking the mobile web
 
The future of the mobile web
The future of the mobile webThe future of the mobile web
The future of the mobile web
 
The touch events
The touch eventsThe touch events
The touch events
 
JSON over SMS
JSON over SMSJSON over SMS
JSON over SMS
 
The touch events - WebExpo
The touch events - WebExpoThe touch events - WebExpo
The touch events - WebExpo
 
Samsung
SamsungSamsung
Samsung
 
The touch events
The touch eventsThe touch events
The touch events
 
Vodafone Widget Camp
Vodafone Widget CampVodafone Widget Camp
Vodafone Widget Camp
 
Voices That Matter: JavaScript Events
Voices That Matter: JavaScript EventsVoices That Matter: JavaScript Events
Voices That Matter: JavaScript Events
 
The Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersThe Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The Browsers
 
An Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScriptAn Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScript
 
Google presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobileGoogle presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobile
 
Yahoo presentation: JavaScript Events
Yahoo presentation: JavaScript EventsYahoo presentation: JavaScript Events
Yahoo presentation: JavaScript Events
 

The mobile browser world

  • 1. The mobile browser world Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Albany, 14 April 2011 1
  • 2. The desktop web • Boring! • Only five browsers • with only one viewport each • that support nearly everything • Even IE? Yes, even IE. 2
  • 3. 3
  • 4. The mobile web • Exciting! • Twenty browsers and counting • ranging from great to lousy • Fascinating new bugs that don’t occur on desktop • Eventually about five times as many users as desktop web 4
  • 5. Mobile First! • Luke Wroblewski invented it • Design your sites for mobile first. • You’ll be forced to decide what is so important that it MUST be shown in the mobile device’s tiny display. • The things you leave out of the mobile version don’t really need to be in the desktop version, either. 5
  • 6. The mobile browsers • Safari iPhone • Obigo WebKit • Android WebKit • Ovi • Dolfin for bada • Palm WebKit • BlackBerry WebKit • BlackBerry old • Opera Mobile • Phantom • Opera Mini • Obigo old • MicroB • NetFront • Nokia WebKit • IE • Firefox • UCWeb You may groan now. 6
  • 7. The mobile browsers • Safari iPhone • Obigo WebKit • Android WebKit • Ovi • Dolfin for bada • Palm WebKit • BlackBerry WebKit • BlackBerry old • Opera Mobile • Phantom • Opera Mini • Obigo old • MicroB • NetFront • Nokia WebKit • IE • Firefox • UCWeb Gecko-based 7
  • 8. The mobile browsers • Safari iPhone • Obigo WebKit • Android WebKit • Ovi • Dolfin for bada • Palm WebKit • BlackBerry WebKit • BlackBerry old • Opera Mobile • Phantom • Opera Mini • Obigo old • MicroB • NetFront • Nokia WebKit • IE • Firefox • UCWeb Presto-based 8
  • 9. The mobile browsers • Safari iPhone • Obigo WebKit • Android WebKit • Ovi • Dolfin for bada • Palm WebKit • BlackBerry WebKit • BlackBerry old • Opera Mobile • Phantom • Opera Mini • Obigo old • MicroB • NetFront • Nokia WebKit • IE • Firefox • UCWeb Other rendering engines 9
  • 10. The mobile browsers • Safari iPhone • Obigo WebKit • Android WebKit • Ovi • Dolfin for bada • Palm WebKit • BlackBerry WebKit • BlackBerry old • Opera Mobile • Phantom • Opera Mini • Obigo old • MicroB • NetFront • Nokia WebKit • IE • Firefox • UCWeb WebKit-based 10
  • 11. WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.2)‫,‏‬ and Nokia WebKit (S40 and Symbian)‫,‏‬ and Blackberry WebKit, and Dolfin for bada, and Palm, and Obigo, and a few more These WebKits are all different. Not wildly so, but you’ll notice some oddities. 11
  • 12. Exhibit A: WebKit comparison table http://quirksmode.org/webkit.html 12
  • 13. The mobile browsers • Safari iPhone • Obigo WebKit • Android WebKit • Ovi • Dolfin for bada • Palm WebKit • BlackBerry WebKit • BlackBerry old • Opera Mobile • Phantom • Opera Mini • Obigo old • MicroB • NetFront • Nokia WebKit • IE • Firefox • UCWeb 13
  • 14. The mobile browsers • Safari iPhone • Obigo WebKit • Android WebKit • Ovi • Dolfin for bada • Palm WebKit • BlackBerry WebKit • BlackBerry old • Opera Mobile • Phantom • Opera Mini • Obigo old • MicroB • NetFront • Nokia WebKit • IE • Firefox • UCWeb Proxy browsers 14
  • 15. Proxy browsers • Page is downloaded to and rendered on a specialised server. • A highly compressed image is sent to the client. • Advantage: cheap, both in device and in network costs • Disadvantage: no client-side interactivity 15
  • 16. Global stats Q4 2010 (by StatCounter) Safari 23% iOS Stable Opera 22% Many OSs Stable BlackBerry 18% BlackBerry Down Nokia 16% Symbian (and S40) Stable Android 12% Android Up NetFront 4% Sony Ericsson and Samsung Stable Samsung 1% bada Up UCWeb 1% Many OSs Down Others 3% 16
  • 17. Browser stats • Those are GLOBAL stats; they are not necessarily correct for the sites you’re working on. Always check your stats. • Social media referrals cause disproportionate iPhone visits; and Android to a lesser degree. 17
  • 18. US stats Q4 2010 (by StatCounter) Safari 34% iOS Stable BlackBerry 33% BlackBerry Down Android 24% Android Up Opera 3% Many OSs Stable NetFront 2% Sony Ericsson and Samsung Stable Nokia 1% Symbian (and S40) Stable Others 3% 18
  • 19. Stats (global, Q4 2010) Safari Opera 1% 3% 1% BlackBerry 4% 23% Nokia 12% Android NetFront Samsung UCWeb Others 16% 22% 18% 19
  • 20. But usually this is what happens Safari Android Rest? What rest? 20
  • 21. Which mobile browsers? • Safari iPhone • Opera Mini • Android WebKit • US: BlackBerry (WebKit and older) • Europe: Nokia WebKit • Dolfin for bada (easy) • Opera Mobile (easy) 21
  • 22. Progressive enhancement How do you deal with this immense amount of browsers? Use advanced tricks, but make sure your site remains usable without them. The site is enhanced as much as the browser allows. 22
  • 23. Progressive enhancement HTML All browsers support HTML. That’s the definition of a browser. 23
  • 24. Progressive enhancement Basic CSS HTML All browsers support most basic CSS. There will be bugs, but only few. 24
  • 25. Progressive enhancement Advanced CSS Basic CSS HTML Advanced CSS is restricted to advanced browsers. Make sure it contains nothing vital; just nice extras. 25
  • 26. Progressive enhancement Advanced CSS Basic CSS Basic JavaScript HTML All browsers support basic JavaScript, but they can be slow. Maybe switch off in BB5 and lower. 26
  • 27. Progressive enhancement Advanced CSS Advanced JavaScript Basic CSS Basic JavaScript HTML Advanced JavaScript is a problem. Feature detection is your friend. Make sure it contains nothing vital. 27
  • 28. Performance How long does it take to generate 250 lists with 20 items each? The following graphs give the number of seconds it took the browsers. http://quirksmode.org/m/tests/DOMspeed.html 28
  • 29. Performance 100 97,3 75 50 25 11,1 12,3 3,6 5,4 0 Nokia N8 Nokia E71 iPhone 3.2 (3G) Opera 9.6 WinMob NetFront 29
  • 30. Performance 4 3,6 3,4 3,2 3 2,4 2,1 2 1,9 1 0,9 0 Android 2.3 Firefox 4 Dolfin iPhone 4 Op 10 BlackBerry WK Nokia N8 30
  • 31. HTML5 • Which browsers support HTML5? • What is HTML5, anyway? • Ask five web developers and they’ll give you five different answers. 31
  • 32. HTML5 • Offline storage • Video and audio • Canvas • New input types • Websockets • New semantics • SVG • File API • etc. etc. etc. 32
  • 33. Offline storage • Safari iPhone • Obigo WebKit • Android WebKit • Ovi • Dolfin for bada • Palm WebKit • BlackBerry WebKit • BlackBerry old • Opera Mobile • Phantom • Opera Mini • Obigo old • MicroB • NetFront • Nokia WebKit • IE • Firefox • UCWeb 33
  • 34. SVG • Safari iPhone • Obigo WebKit • Android WebKit • Ovi • Dolfin for bada • Palm WebKit • BlackBerry WebKit • BlackBerry old • Opera Mobile • Phantom • Opera Mini • Obigo old • MicroB • NetFront • Nokia WebKit • IE • Firefox • UCWeb 34
  • 35. New input types • Safari iPhone • Obigo WebKit • Android WebKit • Ovi • Dolfin for bada • Palm WebKit • BlackBerry WebKit • BlackBerry old • Opera Mobile • Phantom • Opera Mini • Obigo old • MicroB • NetFront • Nokia WebKit • IE • Firefox • UCWeb 35
  • 36. HTML5 • Which browsers support HTML5? • It depends. • HTML5 is mainly a marketing buzzword. • That’s not bad; we need it. • But it has no technical meaning. 36
  • 37. HTML5 apps • One core app written in HTML, CSS, and JavaScript. • Deployed to several mobile platforms. • Ideally, CSS and JavaScript are stored on the device. • If it can't be deployed it's still a website. 37
  • 38. Deploying HTML5 apps • Via app store or web • Or phone-to-phone via Bluetooth • I’ve done it. Back in 2009 • For now, however, deployment will remain tricky 38
  • 39. HTML5 app deployment • http://apparat.io/ (Uxebu) • https://build.phonegap.com/ (Nitobi) 39
  • 40. JavaScript events Fun party game • online and offline • orientationchange • shake • cameraopen • compasspointnorth • devicemove (GPS?) • phonecall • textreceived 40
  • 41. Thank you I will post these slides online. Questions? Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Albany, 14 April 2011 41