Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The mobile browser world

2,344 views

Published on

A

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×