the mobile browser world - quirksmode.org filemobile browsers • safari • android webkit •...
TRANSCRIPT
![Page 1: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/1.jpg)
The mobile browser world
Peter-Paul Kochhttp://quirksmode.orghttp://twitter.com/ppk
Paris-Web, 14 October 2011
![Page 2: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/2.jpg)
The Stack
Browser
OS
Device
![Page 3: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/3.jpg)
The Stack
Browser
OS
Device
![Page 4: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/4.jpg)
The Stack
Browser
OS
Device
![Page 5: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/5.jpg)
The Stack
Browser
OS
Device
S40
![Page 6: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/6.jpg)
The Stack
Browser
OS
Device
Meltemi
?
![Page 7: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/7.jpg)
The Stack
Browser
OS
Device
![Page 8: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/8.jpg)
The Stack
Browser
OS
Device
?
![Page 9: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/9.jpg)
The Stack
Browser
OS
Device
?Tizen
![Page 10: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/10.jpg)
The Stack
Browser
OS
Device
Tizen
![Page 11: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/11.jpg)
The Stack
Browser
OS
Device
Connection
Tizen
![Page 12: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/12.jpg)
The Stack
Browser
OS
Device
Income
![Page 13: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/13.jpg)
The Stack
Browser
OS
Subsidy
Income
![Page 14: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/14.jpg)
The Stack
Other browsers
OS
Subsidy
Income
![Page 15: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/15.jpg)
The Stack
Browser
OS
Device
Connection
Tizen
![Page 16: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/16.jpg)
The Stack
Browser
OS
Device
Connection
Tizen
![Page 17: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/17.jpg)
It’s complicated
The Stack
![Page 18: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/18.jpg)
Mobile browsers• Safari
• Android WebKit
• Dolfin
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• Nokia WebKit
• Ovi
• Palm WebKit
• IE
• MeeGo WebKit
• Firefox
• Obigo WebKit
• BlackBerry old
• NetFront
• UC Browser
• Bolt
• Silk
You may groan now
![Page 19: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/19.jpg)
Mobile browsers• Safari
• Android WebKit
• Dolfin
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• Nokia WebKit
• Ovi
• Palm WebKit
• IE
• MeeGo WebKit
• Firefox
• Obigo WebKit
• BlackBerry old
• NetFront
• UC Browser
• Bolt
• Silk
WebKit-based
![Page 20: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/20.jpg)
There is no single WebKitNot 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
![Page 21: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/21.jpg)
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.
![Page 22: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/22.jpg)
Proxy browsers• Safari
• Android WebKit
• Dolfin
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• Nokia WebKit
• Ovi
• Palm WebKit
• IE
• MeeGo WebKit
• Firefox
• Obigo WebKit
• BlackBerry old
• NetFront
• UC Browser
• Bolt
• Silk
![Page 23: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/23.jpg)
Global stats Q3
Opera 22% Many; mostly Symbian and older OSs
Safari 20% iOS
Android 19% Android
Nokia 17% Symbian, S40
BlackBerry 12% BlackBerry
NetFront 4% Older Sony Ericssons and Samsungs
Other 6%Source: StatCounter.com
Smartphones only; no tablets
![Page 24: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/24.jpg)
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.
![Page 25: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/25.jpg)
French stats Q3
Safari 58% iOS
Android 28% Android
Nokia 4% Symbian, S40
Opera 3% Many; mostly Symbian and older OSs
Dolfin 3% bada
BlackBerry 2% BlackBerry
Other 2%
Source: StatCounter.comSmartphones only; no tablets
![Page 26: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/26.jpg)
Which browsers?• Safari
• Android
• Opera Mini
• Nokia
• Dolfin (because it’s easy)
• BlackBerry 6 (because it’s easy)
• Opera Mobile (because it’s easy)
![Page 27: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/27.jpg)
Do we still have time?
![Page 28: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/28.jpg)
Fundamentals• Mobile First
• Responsive design
• Progressive enhancement
![Page 29: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/29.jpg)
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
![Page 30: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/30.jpg)
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
![Page 31: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/31.jpg)
Responsive design<meta name=”viewport”
content=”width=device-width”>
@media all and (min-width: 600px) {
// styles for desktop
}
![Page 32: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/32.jpg)
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.
![Page 33: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi](https://reader031.vdocuments.site/reader031/viewer/2022022807/5ce5721288c993b62d8bab1d/html5/thumbnails/33.jpg)
Thank youI’ll put these slides online
Questions?Peter-Paul Koch
http://quirksmode.orghttp://twitter.com/ppk
Paris-Web, 14 October 2011