SlideShare a Scribd company logo
1 of 33
Download to read offline
The mobile
browser world
                 Peter-Paul Koch
          http://quirksmode.org
          http://twitter.com/ppk
   Paris-Web, 14 October 2011
The Stack
  Browser


   OS


  Device
The Stack
  Browser


   OS


  Device
The Stack
  Browser


   OS


  Device
The Stack
        Browser


S40      OS


        Device
The Stack

 ?       Browser

Mel
          OS
temi

         Device
The Stack
  Browser


   OS


  Device
The Stack


?
      Browser


       OS


      Device
Tizen
        The Stack


?
          Browser


           OS


          Device
The Stack
   Browser
 Tizen
    OS


   Device
The Stack
   Browser
 Tizen
    OS


   Device


 Connection
The Stack
  Browser


   OS


  Device


  Income
The Stack
  Browser


    OS


  Subsidy


  Income
The Stack
 Other browsers


      OS


    Subsidy


    Income
The Stack
   Browser
 Tizen
    OS


   Device


 Connection
The Stack
   Browser
 Tizen
    OS


   Device


 Connection
The Stack

   It’s
complicated
Mobile browsers
•   Safari              •   IE
•   Android WebKit      •   MeeGo WebKit
•   Dolfin               •   Firefox
•   BlackBerry WebKit   •   Obigo WebKit
•   Opera Mobile        •   BlackBerry old
•   Opera Mini          •   NetFront
•   Nokia WebKit        •   UC Browser
•   Ovi                 •   Bolt
•   Palm WebKit         •   Silk

    You may groan now
Mobile browsers
•   Safari              •   IE
•   Android WebKit      •   MeeGo WebKit
•   Dolfin               •   Firefox
•   BlackBerry WebKit   •   Obigo WebKit
•   Opera Mobile        •   BlackBerry old
•   Opera Mini          •   NetFront
•   Nokia WebKit        •   UC Browser
•   Ovi                 •   Bolt
•   Palm WebKit         •   Silk

    WebKit-based
There is no single WebKit
  Not all WebKits have hardware-accelerated
  animations. That requires good access to a
  high-power GPU, and not all devices provide
  that.
  Similarly, interfaces for the network stack,
  mouse, keyboard, and threading system, must
  be written separately for each browser.
  And not everyone uses the same WebKit
  version.
  See http://quirksmode.org/webkit.html
Proxy browsers
• A proxy browser leaves the fetching and
  rendering of resources to a server.
• The client receives a compressed bitmap.
• Advantage: cheap device and low data costs
• Disadvantage: no client-side interaction.
  Every JavaScript call requires a server
  request.
Proxy browsers
•   Safari              •   IE
•   Android WebKit      •   MeeGo WebKit
•   Dolfin               •   Firefox
•   BlackBerry WebKit   •   Obigo WebKit
•   Opera Mobile        •   BlackBerry old
•   Opera Mini          •   NetFront
•   Nokia WebKit        •   UC Browser
•   Ovi                 •   Bolt
•   Palm WebKit         •   Silk
Global stats Q3
                        Many; mostly Symbian and
Opera             22%
                        older OSs
Safari            20%   iOS
Android           19%   Android
Nokia             17%   Symbian, S40
BlackBerry        12%   BlackBerry
                        Older Sony Ericssons and
NetFront          4%
                        Samsungs
Other             6%
                                          Source: StatCounter.com
                                       Smartphones only; no tablets
Global stats
• Global stats are ... global. They do not
  necessarily mean anything for your sites.
• Always check your country’s stats.
• Always check your client’s stats.
• Social media referrals cause a
  disproportionate number of iPhone and
  Android visits.
French stats Q3
Safari            58%   iOS
Android           28%   Android
Nokia             4%    Symbian, S40
                        Many; mostly Symbian and
Opera             3%
                        older OSs
Dolfin             3%    bada
BlackBerry        2%    BlackBerry
Other             2%

                                          Source: StatCounter.com
                                       Smartphones only; no tablets
Which browsers?
• Safari
• Android
• Opera Mini
• Nokia
• Dolfin (because it’s easy)
• BlackBerry 6 (because it’s easy)
• Opera Mobile (because it’s easy)
Do we still
have time?
Fundamentals
• Mobile First
• Responsive design
• Progressive enhancement
Mobile First
• 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.



                                    Inventor: Luke Wroblewski
Responsive design
• Make your design respond to the screen
  size it’s on.
• Technical foundation: media queries
• Andreas Bovens already discussed them.



                                  Inventor: Ethan Marcotte
Responsive design
<meta name=”viewport”

    content=”width=device-width”>



@media all and (min-width: 600px) {

     // styles for desktop

}
Progressive enhancement
 • Build a solid HTML layer that any browser
   can understand.
 • Add as much stuff on top as you like.
 • Make sure browsers only execute what
   they understand.
 • Animations and transitions: add them; just
   don’t expect all browsers to execute them.
 • BlackBerry 5 and lower: switch off your
   scripts.
Thank you
I’ll put these slides online
         Questions?
                          Peter-Paul Koch
                   http://quirksmode.org
                   http://twitter.com/ppk
            Paris-Web, 14 October 2011

More Related Content

What's hot

Getting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeGetting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeCarli Spina
 
The Mobile Platform World
The Mobile Platform WorldThe Mobile Platform World
The Mobile Platform WorldMatt Evans
 
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
 
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
 
Stivanson cody assignment4
Stivanson cody assignment4Stivanson cody assignment4
Stivanson cody assignment4cstivanson
 
Firefox os the web, mobile (for yahoo! hack europe - april 2013)
Firefox os  the web, mobile (for yahoo! hack europe - april 2013)Firefox os  the web, mobile (for yahoo! hack europe - april 2013)
Firefox os the web, mobile (for yahoo! hack europe - april 2013)Yahoo Developer Network
 
Js On Mobile Devices
Js On Mobile DevicesJs On Mobile Devices
Js On Mobile DevicesJens Arps
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesWoody Pewitt
 
Mobile UX - Dmytro Svarytsevych
Mobile UX - Dmytro SvarytsevychMobile UX - Dmytro Svarytsevych
Mobile UX - Dmytro SvarytsevychIgor Bronovskyy
 
First Steps in iOS Development
First Steps in iOS DevelopmentFirst Steps in iOS Development
First Steps in iOS DevelopmentSasha Goldshtein
 
Web App vs Web Site
Web App vs Web SiteWeb App vs Web Site
Web App vs Web SiteMatt Evans
 
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile WebMrJ1971
 
The web is the platform - why FirefoxOS matters
The web is the platform - why FirefoxOS mattersThe web is the platform - why FirefoxOS matters
The web is the platform - why FirefoxOS mattersTristan Nitot
 
Firefox phonesimplifiedui
Firefox phonesimplifieduiFirefox phonesimplifiedui
Firefox phonesimplifieduiMadhava Enros
 
SFSU ISYS 363-1 Fall 2013-group: Group AV
SFSU ISYS 363-1 Fall 2013-group: Group AVSFSU ISYS 363-1 Fall 2013-group: Group AV
SFSU ISYS 363-1 Fall 2013-group: Group AVGroundedEarth
 
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
 

What's hot (20)

Getting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know CodeGetting Started with Mobile Websites if You Don't Know Code
Getting Started with Mobile Websites if You Don't Know Code
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
The Mobile Platform World
The Mobile Platform WorldThe Mobile Platform World
The Mobile Platform World
 
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
 
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
 
Stivanson cody assignment4
Stivanson cody assignment4Stivanson cody assignment4
Stivanson cody assignment4
 
Firefox os the web, mobile (for yahoo! hack europe - april 2013)
Firefox os  the web, mobile (for yahoo! hack europe - april 2013)Firefox os  the web, mobile (for yahoo! hack europe - april 2013)
Firefox os the web, mobile (for yahoo! hack europe - april 2013)
 
Js On Mobile Devices
Js On Mobile DevicesJs On Mobile Devices
Js On Mobile Devices
 
Tech Talk
Tech TalkTech Talk
Tech Talk
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
Mobile webapp
Mobile webappMobile webapp
Mobile webapp
 
Mobile UX - Dmytro Svarytsevych
Mobile UX - Dmytro SvarytsevychMobile UX - Dmytro Svarytsevych
Mobile UX - Dmytro Svarytsevych
 
First Steps in iOS Development
First Steps in iOS DevelopmentFirst Steps in iOS Development
First Steps in iOS Development
 
Web App vs Web Site
Web App vs Web SiteWeb App vs Web Site
Web App vs Web Site
 
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile Web
 
The web is the platform - why FirefoxOS matters
The web is the platform - why FirefoxOS mattersThe web is the platform - why FirefoxOS matters
The web is the platform - why FirefoxOS matters
 
Firefox phonesimplifiedui
Firefox phonesimplifieduiFirefox phonesimplifiedui
Firefox phonesimplifiedui
 
SFSU ISYS 363-1 Fall 2013-group: Group AV
SFSU ISYS 363-1 Fall 2013-group: Group AVSFSU ISYS 363-1 Fall 2013-group: Group AV
SFSU ISYS 363-1 Fall 2013-group: Group AV
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]
 

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
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High PerformanceAmjad Rafique
 
Introduction to Phonegap
Introduction to PhonegapIntroduction to Phonegap
Introduction to PhonegapAndrei Firoiu
 
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
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for EngineersBrian LeRoux
 
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
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011davyjones
 
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
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App DevelopmentChris Morrell
 
Cross platform mobile application development
Cross platform mobile application developmentCross platform mobile application development
Cross platform mobile application developmentwebprogr.com
 
Alex lakatos state of mobile web
Alex lakatos   state of mobile webAlex lakatos   state of mobile web
Alex lakatos state of mobile webCodecamp Romania
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?Reto Meier
 
The Mobile Frameworks Landscape
The Mobile Frameworks LandscapeThe Mobile Frameworks Landscape
The Mobile Frameworks LandscapeJonathan Stark
 
Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Tom Deryckere
 

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
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
Introduction to Phonegap
Introduction to PhonegapIntroduction to Phonegap
Introduction to Phonegap
 
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
 
Phonegap for Engineers
Phonegap for EngineersPhonegap for Engineers
Phonegap for Engineers
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 
Multiplatform
MultiplatformMultiplatform
Multiplatform
 
Future of Mobile
Future of MobileFuture of Mobile
Future of Mobile
 
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
 
Philly ete-2011
Philly ete-2011Philly ete-2011
Philly ete-2011
 
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
 
DjangoSki
DjangoSkiDjangoSki
DjangoSki
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
Cross platform mobile application development
Cross platform mobile application developmentCross platform mobile application development
Cross platform mobile application development
 
Alex lakatos state of mobile web
Alex lakatos   state of mobile webAlex lakatos   state of mobile web
Alex lakatos state of mobile web
 
Unify - JSConf.EU 2010
Unify - JSConf.EU 2010Unify - JSConf.EU 2010
Unify - JSConf.EU 2010
 
HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?HTML5 or Android for Mobile Development?
HTML5 or Android for Mobile Development?
 
The Mobile Frameworks Landscape
The Mobile Frameworks LandscapeThe Mobile Frameworks Landscape
The Mobile Frameworks Landscape
 
Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010
 

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
 

Recently uploaded

Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 

Recently uploaded (20)

Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 

The mobile browser world

  • 1. The mobile browser world Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Paris-Web, 14 October 2011
  • 2. The Stack Browser OS Device
  • 3. The Stack Browser OS Device
  • 4. The Stack Browser OS Device
  • 5. The Stack Browser S40 OS Device
  • 6. The Stack ? Browser Mel OS temi Device
  • 7. The Stack Browser OS Device
  • 8. The Stack ? Browser OS Device
  • 9. Tizen The Stack ? Browser OS Device
  • 10. The Stack Browser Tizen OS Device
  • 11. The Stack Browser Tizen OS Device Connection
  • 12. The Stack Browser OS Device Income
  • 13. The Stack Browser OS Subsidy Income
  • 14. The Stack Other browsers OS Subsidy Income
  • 15. The Stack Browser Tizen OS Device Connection
  • 16. The Stack Browser Tizen OS Device Connection
  • 17. The Stack It’s complicated
  • 18. Mobile browsers • Safari • IE • Android WebKit • MeeGo WebKit • Dolfin • Firefox • BlackBerry WebKit • Obigo WebKit • Opera Mobile • BlackBerry old • Opera Mini • NetFront • Nokia WebKit • UC Browser • Ovi • Bolt • Palm WebKit • Silk You may groan now
  • 19. Mobile browsers • Safari • IE • Android WebKit • MeeGo WebKit • Dolfin • Firefox • BlackBerry WebKit • Obigo WebKit • Opera Mobile • BlackBerry old • Opera Mini • NetFront • Nokia WebKit • UC Browser • Ovi • Bolt • Palm WebKit • Silk WebKit-based
  • 20. There is no single WebKit Not all WebKits have hardware-accelerated animations. That requires good access to a high-power GPU, and not all devices provide that. Similarly, interfaces for the network stack, mouse, keyboard, and threading system, must be written separately for each browser. And not everyone uses the same WebKit version. See http://quirksmode.org/webkit.html
  • 21. Proxy browsers • A proxy browser leaves the fetching and rendering of resources to a server. • The client receives a compressed bitmap. • Advantage: cheap device and low data costs • Disadvantage: no client-side interaction. Every JavaScript call requires a server request.
  • 22. Proxy browsers • Safari • IE • Android WebKit • MeeGo WebKit • Dolfin • Firefox • BlackBerry WebKit • Obigo WebKit • Opera Mobile • BlackBerry old • Opera Mini • NetFront • Nokia WebKit • UC Browser • Ovi • Bolt • Palm WebKit • Silk
  • 23. Global stats Q3 Many; mostly Symbian and Opera 22% older OSs Safari 20% iOS Android 19% Android Nokia 17% Symbian, S40 BlackBerry 12% BlackBerry Older Sony Ericssons and NetFront 4% Samsungs Other 6% Source: StatCounter.com Smartphones only; no tablets
  • 24. Global stats • Global stats are ... global. They do not necessarily mean anything for your sites. • Always check your country’s stats. • Always check your client’s stats. • Social media referrals cause a disproportionate number of iPhone and Android visits.
  • 25. French stats Q3 Safari 58% iOS Android 28% Android Nokia 4% Symbian, S40 Many; mostly Symbian and Opera 3% older OSs Dolfin 3% bada BlackBerry 2% BlackBerry Other 2% Source: StatCounter.com Smartphones only; no tablets
  • 26. Which browsers? • Safari • Android • Opera Mini • Nokia • Dolfin (because it’s easy) • BlackBerry 6 (because it’s easy) • Opera Mobile (because it’s easy)
  • 28. Fundamentals • Mobile First • Responsive design • Progressive enhancement
  • 29. Mobile First • 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. Inventor: Luke Wroblewski
  • 30. Responsive design • Make your design respond to the screen size it’s on. • Technical foundation: media queries • Andreas Bovens already discussed them. Inventor: Ethan Marcotte
  • 31. Responsive design <meta name=”viewport” content=”width=device-width”> @media all and (min-width: 600px) { // styles for desktop }
  • 32. Progressive enhancement • Build a solid HTML layer that any browser can understand. • Add as much stuff on top as you like. • Make sure browsers only execute what they understand. • Animations and transitions: add them; just don’t expect all browsers to execute them. • BlackBerry 5 and lower: switch off your scripts.
  • 33. Thank you I’ll put these slides online Questions? Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Paris-Web, 14 October 2011