SlideShare a Scribd company logo
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 Code
Carli Spina
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
Maximiliano Firtman
 
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, IdoSphere
Dennis Heinle
 
chapter2
chapter2chapter2
chapter2
Pon Tovave
 
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
Matt 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 Devices
Jens Arps
 
Tech Talk
Tech TalkTech Talk
Tech Talk
Edaise Germany
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
Woody Pewitt
 
Mobile UX - Dmytro Svarytsevych
Mobile UX - Dmytro SvarytsevychMobile UX - Dmytro Svarytsevych
Mobile UX - Dmytro Svarytsevych
Igor Bronovskyy
 
First Steps in iOS Development
First Steps in iOS DevelopmentFirst Steps in iOS Development
First Steps in iOS Development
Sasha 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 Web
MrJ1971
 
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
Tristan 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 AV
GroundedEarth
 
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 Performance
Amjad Rafique
 
Introduction to Phonegap
Introduction to PhonegapIntroduction to Phonegap
Introduction to Phonegap
Andrei 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
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
Dominopoint - Italian Lotus User Group
 
Multiplatform
MultiplatformMultiplatform
Multiplatform
Prabhat gangwar
 
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
saritasingh19866
 
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 development
webprogr.com
 
Alex lakatos state of mobile web
Alex lakatos   state of mobile webAlex lakatos   state of mobile web
Alex lakatos state of mobile web
Codecamp Romania
 
Unify - JSConf.EU 2010
Unify - JSConf.EU 2010Unify - JSConf.EU 2010
Unify - JSConf.EU 2010
Sebastian Werner
 
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 Landscape
Jonathan Stark
 
Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010Mobile CMS - CMSExpo 2010
Mobile CMS - CMSExpo 2010
Tom 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
 
JSON over SMS
JSON over SMSJSON over SMS
JSON over SMS
Peter-Paul Koch
 
The touch events - WebExpo
The touch events - WebExpoThe touch events - WebExpo
The touch events - WebExpoPeter-Paul Koch
 
The touch events
The touch eventsThe touch events
The touch events
Peter-Paul Koch
 
Vodafone Widget Camp
Vodafone Widget CampVodafone Widget Camp
Vodafone Widget Camp
Peter-Paul Koch
 
Voices That Matter: JavaScript Events
Voices That Matter: JavaScript EventsVoices That Matter: JavaScript Events
Voices That Matter: JavaScript Events
Peter-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 Browsers
Peter-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 JavaScript
Peter-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 mobile
Peter-Paul Koch
 
Yahoo presentation: JavaScript Events
Yahoo presentation: JavaScript EventsYahoo presentation: JavaScript Events
Yahoo presentation: JavaScript Events
Peter-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

DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
Fwdays
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
Elena Simperl
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 

Recently uploaded (20)

DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 

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