Mobile Web Browsers HTML5
-
Upload
ankit-garg -
Category
Documents
-
view
385 -
download
2
Transcript of Mobile Web Browsers HTML5
![Page 1: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/1.jpg)
The mobile browser world
Peter-Paul Kochhttp://quirksmode.org http://twitter.com/ppk Albany, 14 April 2011
1
![Page 2: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/2.jpg)
The desktop web
• Boring!
• Only five browsers
• with only one viewport each
• that support nearly everything
• Even IE? Yes, even IE.
2
![Page 3: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/3.jpg)
3
![Page 4: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/4.jpg)
The mobile web
• Exciting!
• Twenty browsers and counting
• ranging from great to lousy
• Fascinating new bugs that don’t occur on desktop
• Eventually about five times as many users as desktop web
4
![Page 5: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/5.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.
5
![Page 6: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/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
You may groan now.
6
![Page 7: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/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
Gecko-based
7
![Page 8: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/8.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
8
![Page 9: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/9.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
9
![Page 10: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/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
WebKit-based
10
![Page 11: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/11.jpg)
WebKit on MobileThere is no WebKit on mobile!
There's iPhone Safari (3 and 4), and Android (2.1 and 2.2) ,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.
11
![Page 12: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/12.jpg)
Exhibit A: WebKit comparison tablehttp://quirksmode.org/webkit.html
12
![Page 13: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/13.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
13
![Page 14: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/14.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
14
![Page 15: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/15.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
15
![Page 16: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/16.jpg)
Global stats Q4 2010(by StatCounter)
Safari 23% iOS Stable
Opera 22% Many OSs Stable
BlackBerry 18% BlackBerry Down
Nokia 16% Symbian (and S40) Stable
Android 12% Android Up
NetFront 4% Sony Ericsson and Samsung Stable
Samsung 1% bada Up
UCWeb 1% Many OSs Down
Others 3%16
![Page 17: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/17.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.
17
![Page 18: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/18.jpg)
US stats Q4 2010(by StatCounter)
Safari 34% iOS Stable
BlackBerry 33% BlackBerry Down
Android 24% Android Up
Opera 3% Many OSs Stable
NetFront 2% Sony Ericsson and Samsung Stable
Nokia 1% Symbian (and S40) Stable
Others 3%18
![Page 19: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/19.jpg)
Stats(global, Q4 2010)
3%1%1%4%
12%
16%
18%
22%
23%
SafariOperaBlackBerryNokiaAndroidNetFrontSamsungUCWebOthers
19
![Page 20: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/20.jpg)
Rest? What rest?
But usually this is what happens
Safari
Android
20
![Page 21: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/21.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)
21
![Page 22: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/22.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.
22
![Page 23: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/23.jpg)
Progressive enhancement
HTML
All browsers support HTML. That’s the definition of a browser.
23
![Page 24: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/24.jpg)
Progressive enhancement
HTML
Basic CSS
All browsers support most basic CSS. There will be bugs, but only few.
24
![Page 25: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/25.jpg)
Progressive enhancement
HTML
Basic CSS
Advanced CSS
Advanced CSS is restricted to advanced browsers. Make sure it contains nothing vital; just nice extras.
25
![Page 26: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/26.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.
26
![Page 27: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/27.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.
27
![Page 28: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/28.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
28
![Page 29: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/29.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
29
![Page 30: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/30.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
30
![Page 31: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/31.jpg)
HTML5
• Which browsers support HTML5?
• What is HTML5, anyway?
• Ask five web developers and they’ll give you five different answers.
31
![Page 32: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/32.jpg)
HTML5• Offline storage• Video and audio• Canvas• New input types• Websockets• New semantics• SVG• File API• etc. etc. etc.
32
![Page 33: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/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
Offline storage
33
![Page 34: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/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
SVG
34
![Page 35: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/35.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
35
![Page 36: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/36.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.
36
![Page 37: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/37.jpg)
HTML5 apps• One core app written in HTML, CSS,
and JavaScript.
• Deployed to several mobile platforms.
• Ideally, CSS and JavaScript are stored on the device.
• If it can't be deployed it's still a website.
37
![Page 38: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/38.jpg)
Deploying HTML5 apps• Via app store or web
• Or phone-to-phone via Bluetooth
• I’ve done it. Back in 2009
• For now, however, deployment will remain tricky
38
![Page 39: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/39.jpg)
HTML5 app deployment
• http://apparat.io/ (Uxebu)
• https://build.phonegap.com/ (Nitobi)
39
![Page 40: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/40.jpg)
JavaScript eventsFun party game
• online and offline• orientationchange• shake• cameraopen• compasspointnorth• devicemove (GPS?)• phonecall• textreceived
40
![Page 41: Mobile Web Browsers HTML5](https://reader034.fdocuments.net/reader034/viewer/2022051312/547715d25906b571068b45a4/html5/thumbnails/41.jpg)
Thank youI will post these slides online.
Questions?Peter-Paul Koch
http://quirksmode.org http://twitter.com/ppk Albany, 14 April 2011
41