The mobilebrowser world                 Peter-Paul Koch          http://quirksmode.org          http://twitter.com/ppk   P...
The Stack  Browser   OS  Device
The Stack  Browser   OS  Device
The Stack  Browser   OS  Device
The Stack        BrowserS40      OS        Device
The Stack ?       BrowserMel          OStemi         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’scomplicated
Mobile browsers•   Safari              •   IE•   Android WebKit      •   MeeGo WebKit•   Dolfin               •   Firefox• ...
Mobile browsers•   Safari              •   IE•   Android WebKit      •   MeeGo WebKit•   Dolfin               •   Firefox• ...
There is no single WebKit  Not all WebKits have hardware-accelerated  animations. That requires good access to a  high-pow...
Proxy browsers• A proxy browser leaves the fetching and  rendering of resources to a server.• The client receives a compre...
Proxy browsers•   Safari              •   IE•   Android WebKit      •   MeeGo WebKit•   Dolfin               •   Firefox•  ...
Global stats Q3                        Many; mostly Symbian andOpera             22%                        older OSsSafar...
Global stats• Global stats are ... global. They do not  necessarily mean anything for your sites.• Always check your count...
French stats Q3Safari            58%   iOSAndroid           28%   AndroidNokia             4%    Symbian, S40             ...
Which browsers?• Safari• Android• Opera Mini• Nokia• Dolfin (because it’s easy)• BlackBerry 6 (because it’s easy)• Opera Mo...
Do we stillhave 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 i...
Responsive design• Make your design respond to the screen  size it’s on.• Technical foundation: media queries• Andreas Bov...
Responsive design<meta name=”viewport”    content=”width=device-width”>@media all and (min-width: 600px) {     // styles f...
Progressive enhancement • Build a solid HTML layer that any browser   can understand. • Add as much stuff on top as you li...
Thank youI’ll put these slides online         Questions?                          Peter-Paul Koch                   http:/...
Upcoming SlideShare
Loading in …5
×

The mobile browser world

2,276 views

Published on

A

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

  • Be the first to like this

No Downloads
Views
Total views
2,276
On SlideShare
0
From Embeds
0
Number of Embeds
423
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The mobile browser world

  1. 1. The mobilebrowser world Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Paris-Web, 14 October 2011
  2. 2. The Stack Browser OS Device
  3. 3. The Stack Browser OS Device
  4. 4. The Stack Browser OS Device
  5. 5. The Stack BrowserS40 OS Device
  6. 6. The Stack ? BrowserMel OStemi Device
  7. 7. The Stack Browser OS Device
  8. 8. The Stack? Browser OS Device
  9. 9. Tizen The Stack? Browser OS Device
  10. 10. The Stack Browser Tizen OS Device
  11. 11. The Stack Browser Tizen OS Device Connection
  12. 12. The Stack Browser OS Device Income
  13. 13. The Stack Browser OS Subsidy Income
  14. 14. The Stack Other browsers OS Subsidy Income
  15. 15. The Stack Browser Tizen OS Device Connection
  16. 16. The Stack Browser Tizen OS Device Connection
  17. 17. The Stack It’scomplicated
  18. 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. 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. 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. 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. 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. 23. Global stats Q3 Many; mostly Symbian andOpera 22% older OSsSafari 20% iOSAndroid 19% AndroidNokia 17% Symbian, S40BlackBerry 12% BlackBerry Older Sony Ericssons andNetFront 4% SamsungsOther 6% Source: StatCounter.com Smartphones only; no tablets
  24. 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. 25. French stats Q3Safari 58% iOSAndroid 28% AndroidNokia 4% Symbian, S40 Many; mostly Symbian andOpera 3% older OSsDolfin 3% badaBlackBerry 2% BlackBerryOther 2% Source: StatCounter.com Smartphones only; no tablets
  26. 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)
  27. 27. Do we stillhave time?
  28. 28. Fundamentals• Mobile First• Responsive design• Progressive enhancement
  29. 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. 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. 31. Responsive design<meta name=”viewport” content=”width=device-width”>@media all and (min-width: 600px) { // styles for desktop}
  32. 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. 33. Thank youI’ll put these slides online Questions? Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Paris-Web, 14 October 2011

×