The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit •...

33
The mobile browser world Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Paris-Web, 14 October 2011

Transcript of The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit •...

Page 1: The mobile browser world - quirksmode.org fileMobile browsers • Safari • Android WebKit • Dolfin • BlackBerry WebKit • Opera Mobile • Opera Mini • Nokia WebKit • Ovi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thank youI’ll put these slides online

Questions?Peter-Paul Koch

http://quirksmode.orghttp://twitter.com/ppk

Paris-Web, 14 October 2011