the mobile browser world€¦ · webkit on mobile there is no webkit on mobile! there's iphone...
TRANSCRIPT
![Page 1: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/1.jpg)
The mobile browser world
Peter-Paul Kochhttp://quirksmode.org http://twitter.com/ppk
Front-end Day workshop, 26 April 2011
1
![Page 2: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/2.jpg)
Mobile First!
• Luke Wroblewski invented it
• 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.
2
![Page 3: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/3.jpg)
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Obigo WebKit
• Ovi
• Palm WebKit
• BlackBerry old
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
The mobile browsers
You may groan now.
3
![Page 4: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/4.jpg)
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Obigo WebKit
• Ovi
• Palm WebKit
• BlackBerry old
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
The mobile browsers
Gecko-based
4
![Page 5: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/5.jpg)
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Obigo WebKit
• Ovi
• Palm WebKit
• BlackBerry old
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
The mobile browsers
Presto-based
5
![Page 6: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/6.jpg)
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Obigo WebKit
• Ovi
• Palm WebKit
• BlackBerry old
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
The mobile browsers
Other rendering engines
6
![Page 7: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/7.jpg)
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Obigo WebKit
• Ovi
• Palm WebKit
• BlackBerry old
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
The mobile browsers
WebKit-based
7
![Page 8: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/8.jpg)
WebKit on MobileThere is no WebKit on mobile!
There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0) ,and Nokia WebKit (S40 and Symbian) ,and BlackBerry WebKit,and Dolfin for bada,and Palm, and Obigo, and a few more
These WebKits are all different.Not wildly so, but you’ll notice some oddities.
8
![Page 9: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/9.jpg)
Exhibit A: WebKit comparison tablehttp://quirksmode.org/webkit.html
9
![Page 10: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/10.jpg)
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Obigo WebKit
• Ovi
• Palm WebKit
• BlackBerry old
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
The mobile browsers
10
![Page 11: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/11.jpg)
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Obigo WebKit
• Ovi
• Palm WebKit
• BlackBerry old
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
The mobile browsers
Proxy browsers
11
![Page 12: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/12.jpg)
Proxy browsers
• Page is downloaded to and rendered on a specialised server.
• A highly compressed image is sent to the client.
• Advantage: cheap, both in device and in network costs
• Disadvantage: no client-side interactivity
12
![Page 13: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/13.jpg)
Global stats Q1 2011(by StatCounter)
Safari 25% iOS Stable
Opera 21% Many OSs Stable
Nokia 16% Symbian (and S40) Stable
Android 15% Android Up
BlackBerry 14% BlackBerry Down
NetFront 4% Sony Ericsson and Samsung Stable
Samsung 2% bada Up
Others 3%13
![Page 14: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/14.jpg)
Browser stats
• Those are GLOBAL stats; they are not necessarily correct for the sites you’re working on. Always check your stats.
• Social media referrals cause disproportionate iPhone visits; and Android to a lesser degree.
14
![Page 15: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/15.jpg)
Bulgarian stats Q1 2011(by StatCounter)
Nokia 34% Symbian (and S40) Stable
Android 20% Android Up
Opera 18% Many OSs Stable
Safari 15% iOS Stable
NetFront 3% Sony Ericsson and Samsung Stable
BlackBerry 2% BlackBerry Down
Sony Er. 2% NetFront-based
Samsung 2% bada Up
Others 3%15
![Page 16: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/16.jpg)
Stats(global, Q4 2010)
3%2%4%
15%
16%
14%
21%
25%
SafariOperaBlackBerryNokiaAndroidNetFrontSamsungOthers
16
![Page 17: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/17.jpg)
Stats(global, Q4 2010)
3%2%4%
15%
16%
14%
21%
25%
Safari
Android
Rest? What rest?
17
![Page 18: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/18.jpg)
Which mobile browsers?
• Safari iPhone• Opera Mini• Android WebKit
• US: BlackBerry (WebKit and older)• Europe: Nokia WebKit
• Dolfin for bada (easy)• Opera Mobile (easy)
18
![Page 19: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/19.jpg)
Progressive enhancementHow do you deal with this immense amount of browsers?
Use advanced tricks, but make sure your site remains usable without them.
The site is enhanced as much as the browser allows.
19
![Page 20: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/20.jpg)
Progressive enhancement
HTML
All browsers support HTML. That’s the definition of a browser.
20
![Page 21: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/21.jpg)
Progressive enhancement
HTML
Basic CSS
All browsers support most basic CSS. There will be bugs, but only few.
21
![Page 22: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/22.jpg)
Progressive enhancement
HTML
Basic CSS
Advanced CSS
Advanced CSS is restricted to advanced browsers. Make sure it contains nothing vital; just nice extras.
22
![Page 23: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/23.jpg)
Progressive enhancement
HTML
Basic CSS
Advanced CSS
Basic JavaScript
All browsers support basic JavaScript, but they can be slow. Maybe switch off in BB5 and lower.
23
![Page 24: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/24.jpg)
Progressive enhancement
HTML
Basic CSS
Advanced CSS
Basic JavaScript
Advanced JavaScript
Advanced JavaScript is a problem. Feature detection is your friend. Make sure it contains nothing vital.
24
![Page 25: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/25.jpg)
Get real phones
• You need to hold and handle a phone
• Unlocked! You want to test on several networks
• At least one non-touchscreen phone
• But you likely can’t afford to buy ten phones
25
![Page 26: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/26.jpg)
Other solutions• Find other companies with the same
problem and share phones
• Go to the phone shop and test there
• Use online tools:
• http://deviceanywhere.com
• http://perfectomobile.com
• Or use emulators
• Not my favourite
• Usually inside SDK
26
![Page 27: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/27.jpg)
PerformanceHow long does it take to generate 250 lists with 20 items each?
The following graphs give the number of seconds it took the browsers.
http://quirksmode.org/m/tests/DOMspeed.html
27
![Page 28: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/28.jpg)
Performance
0
25
50
75
100
Nokia N8 Nokia E71 iPhone 3.2 (3G) Opera 9.6 WinMob NetFront
97,3
12,311,15,43,6
28
![Page 29: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/29.jpg)
Performance
0
1
2
3
4
Android 2.3 Firefox 4 Dolfin iPhone 4 Op 10 BlackBerry WK Nokia N8
3,63,4
3,2
2,42,1
1,9
0,9
29
![Page 30: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/30.jpg)
HTML5
• Which browsers support HTML5?
• What is HTML5, anyway?
• Ask five web developers and they’ll give you five different answers.
30
![Page 31: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/31.jpg)
HTML5• Offline storage• Video and audio• Canvas• New input types• Websockets• New semantics• SVG• File API• etc. etc. etc.
31
![Page 32: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/32.jpg)
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Obigo WebKit
• Ovi
• Palm WebKit
• BlackBerry old
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
Offline storage
32
![Page 33: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/33.jpg)
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Obigo WebKit
• Ovi
• Palm WebKit
• BlackBerry old
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
SVG
33
![Page 34: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/34.jpg)
• Safari iPhone
• Android WebKit
• Dolfin for bada
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• MicroB
• Nokia WebKit
• Firefox
• Obigo WebKit
• Ovi
• Palm WebKit
• BlackBerry old
• Phantom
• Obigo old
• NetFront
• IE
• UCWeb
New input types
34
![Page 35: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/35.jpg)
HTML5• Which browsers support HTML5?
• It depends.
• HTML5 is mainly a marketing buzzword.
• That’s not bad; we need it.
• But it has no technical meaning.
35
![Page 36: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/36.jpg)
JavaScript eventsFun party game
• online and offline• orientationchange• shake• cameraopen• compasspointnorth• devicemove (GPS?)• phonecall• textreceived
36
![Page 37: The mobile browser world€¦ · WebKit on Mobile There is no WebKit on mobile! There's iPhone Safari (3 and 4), and Android (2.1 and 2.3 and 3.0), and Nokia WebKit (S40 and Symbian),](https://reader034.vdocument.in/reader034/viewer/2022042413/5f2ca14207e177499072c4c1/html5/thumbnails/37.jpg)
Thank youI will post these slides online.
Questions?Peter-Paul Koch
http://quirksmode.org http://twitter.com/ppk
Front-end Day workshop, 26 April 2011
37