state of the mobile browsers
DESCRIPTION
An overview of today's mobile browser market.TRANSCRIPT
![Page 1: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/1.jpg)
Mobile browsersPeter-Paul Koch (ppk)
http://quirksmode.orghttp://twitter.com/ppk
Yahoo! London, 24 June 2009
Hell is other browsers - Sartre
![Page 2: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/2.jpg)
Desktop browsers
Desktop browsers are getting boring.
They all follow the standards;even juicy IE bugs are becoming scarce.
Fortunately ...
![Page 3: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/3.jpg)
Mobile Desktop browsers
Mobile browsers come to the rescue.
They are MUCH more interesting.Many devices, many browsers, many incomprehensible bugs.
Good times are here again.
![Page 4: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/4.jpg)
Mobile browsers
Today's session will help you make some sense of the situation.
Thanks to Vodafone's generous support I'm able to deliver a preliminary report on the State of the Mobile Browsers.
![Page 5: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/5.jpg)
![Page 6: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/6.jpg)
http://quirksmode.org/m
![Page 7: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/7.jpg)
Mobile browsers- Android WebKit- Opera Mobile- NetFront- Safari- Opera Mini- Blackberry- S60 WebKit- IE Mobile
You may groan now.
- Iris- Bolt- Skyfire- Obigo- OpenWeb- Nokia S40- Palm Blazer- Fennec- Teashark- Ozone
![Page 8: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/8.jpg)
Mobile browsers- Android WebKit- Opera Mobile- NetFront- Safari- Opera Mini- Blackberry- S60 WebKit- IE Mobile
- Iris- Bolt- Skyfire- Obigo- OpenWeb- Nokia S40- Palm Blazer- Fennec- Teashark- Ozone
![Page 9: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/9.jpg)
Mobile browsers- Android WebKit - Opera Mobile- NetFront- Safari- Opera Mini- Blackberry- S60 WebKit- IE Mobile
- Iris- Bolt- Skyfire- Obigo- OpenWeb- Nokia S40- Palm Blazer- Fennec- Teashark- Ozone
There is no “WebKit Mobile”
![Page 10: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/10.jpg)
There is no “WebKit mobile”
Compatibility of :enabled, :disabled, and :checked
![Page 11: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/11.jpg)
Mobile browsers- Android WebKit- Opera Mobile- NetFront- Safari- Opera Mini- Blackberry- S60 WebKit- IE Mobile
- Iris- Bolt- Skyfire- Obigo- OpenWeb- Nokia S40- Palm Blazer- Fennec- Teashark- Ozone
![Page 12: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/12.jpg)
Default browsers- Android WebKit- Opera Mobile- NetFront- Safari- Opera Mini- Blackberry- S60 WebKit- IE Mobile
- Iris- Bolt- Skyfire- Obigo- OpenWeb- Nokia S40- Palm Blazer- Fennec- Teashark- Ozone
![Page 13: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/13.jpg)
Modern default browsers- Android WebKit- Opera Mobile- NetFront- Safari- Opera Mini- Blackberry- S60 WebKit- IE Mobile
Still quite a lot.
- Iris- Bolt- Skyfire- Obigo- OpenWeb- Nokia S40- Palm Blazer- Fennec- Teashark- Ozone
![Page 14: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/14.jpg)
Thin clients- Android WebKit- Opera Mobile- NetFront- Safari- Opera Mini- Blackberry- S60 WebKit- IE Mobile
- Iris- Bolt- Skyfire- Obigo- OpenWeb- Nokia S40- Palm Blazer- Fennec- Teashark- Ozone
![Page 15: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/15.jpg)
Opera Mini
Opera Mini is a thin client, meant for decent web browsing on older phones.
The HTML, CSS, and JavaScript is interpreted by a special Opera server, which sends the result on to a thin client.
![Page 16: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/16.jpg)
Opera Mini
Opera Mini does not allow any client-side interactivity.
Every time an event takes place the server is re-queried and the page refreshed.
![Page 17: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/17.jpg)
Mobile browsers overview
Top level:Android WebKit, Safari, Opera Mobile
Mid level:S60 WebKit, Blackberry, Opera Mini
Bottom level:NetFront, IE Mobile (old)
![Page 18: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/18.jpg)
Operating systems- Symbian S60 (Nokia, Samsung)- Windows Mobile (Samsung, HTC)- Blackberry (RIM)- Android (HTC, Samsung, etc.)- iPhone (Apple)- Symbian UIQ (Sony Ericsson)- BREW (Motorola, LG)- webOS (Palm)- etc. etc. etc.
![Page 19: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/19.jpg)
Operating systems- Symbian S60 (Nokia, Samsung)- Windows Mobile (Samsung, HTC)- Blackberry (RIM)- Android (HTC, Samsung, etc.)- iPhone (Apple)- Symbian UIQ (Sony Ericsson)- BREW (Motorola, LG)- webOS (Palm)- etc. etc. etc.
![Page 20: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/20.jpg)
Operating systems- Symbian S60 (Nokia, Samsung)- Windows Mobile (Samsung, HTC)- Blackberry (RIM)- Symbian UIQ (Sony Ericsson)
JME (Java Mobile Edition)“Write once, run anywhere.”
![Page 21: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/21.jpg)
Operating systems- Symbian S60 (Nokia, Samsung)- Windows Mobile (Samsung, HTC)- Blackberry (RIM)- Symbian UIQ (Sony Ericsson)
JME (Java Mobile Edition)“Write once, run anywhere.”“Write several times, run somewhere”(Still, easier than starting from scratch.)
![Page 22: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/22.jpg)
Example
As a test, I looked at the homepage of my QuirksMode.org in several mobile browsers on several platforms.
The results are ... interesting.
![Page 23: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/23.jpg)
Example
Three variations:1) Entire page shown, zoomed out (tiny fonts)2) Upper left corner of page shown
(normal size)3) Positioning disregarded; site squeezed into small screen
![Page 24: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/24.jpg)
Example (reference)
![Page 25: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/25.jpg)
SafariiPhone 2.2
Zooms out and shows entire page.
![Page 26: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/26.jpg)
BlackberryStorm
Zooms out and shows entire page (with minor bugs)
![Page 27: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/27.jpg)
Opera 9.5HTC Touch Diamond (Win Mob)
Zooms out and shows entire page
![Page 28: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/28.jpg)
Zoom
If the browser shows the entire site, it usually gives you a zooming option, too.
Let's take a look at a few.
![Page 29: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/29.jpg)
Opera Mini Nokia E71
Initial: show entire site.
Notice the zoom window top left.
![Page 30: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/30.jpg)
Opera Mini Nokia E71
Clicking on Zoom zooms in to the requested area.
![Page 31: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/31.jpg)
BoltNokia E71
Bolt has an unusual zoom interface.
![Page 32: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/32.jpg)
Android WebKit G2
Click the lower right icon...
![Page 33: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/33.jpg)
Android WebKit G2
... and drag the zoom layer. Releasing it zooms in.
![Page 34: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/34.jpg)
Zoom
Browsers have some interesting ideas,but the final word in zoom interfaces has not yet been spoken.
(Especially when Apple continues its patent fascism.)
![Page 35: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/35.jpg)
Example
Let's continue with our examples.
![Page 36: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/36.jpg)
Opera 9.5HTC Touch Diamond (Win Mob)
Zooms out and shows entire page
![Page 37: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/37.jpg)
Opera 9.5HTC Touch Diamond (Win Mob)
Zooms out and shows entire page
But ...this is desktop mode
![Page 38: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/38.jpg)
Opera 9.5HTC Touch Diamond (Win Mob)
Errr ....
this is mobile mode
![Page 39: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/39.jpg)
Opera 9.5HTC Touch Diamond (Win Mob)
Errr ....
![Page 40: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/40.jpg)
Opera Mobile
- desktop mode- mobile mode
![Page 41: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/41.jpg)
Opera Mobile
- desktop mode- mobile mode
Sites are shown exactly as on a desktop computer.
![Page 42: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/42.jpg)
Opera Mobile
- desktop mode- mobile mode
Sites are squeezed until they fit the display; and several CSS declarations don't work. (such as float, position, width)More tests necessary.
![Page 43: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/43.jpg)
Opera 9.5HTC Touch Diamond (Win Mob)desktop mode
![Page 44: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/44.jpg)
Opera 9.5HTC Touch Diamond (Win Mob)mobile mode
![Page 45: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/45.jpg)
Opera Mobile
Opera says desktop mode is the default mode; users have to explicitly set mobile mode.
I believe them, but they may be wrong.
![Page 46: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/46.jpg)
Opera Mobile
Changing random settings just because you can is popular in the mobile world.
It expresses power over other parts of the mobile value chain.
So I expect some hardware vendor or carrier to switch the mode.
![Page 47: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/47.jpg)
Example
Let's continue with our examples.
![Page 48: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/48.jpg)
Opera 9.5HTC Touch Diamond (Win Mob)
Errr ....
![Page 49: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/49.jpg)
IE Mob(old)HTC Touch Diamond (Win Mob)
Errr ....
![Page 50: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/50.jpg)
NetFrontSamsung F700
Errr ....
![Page 51: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/51.jpg)
NetFrontSamsung F700
Errr ....But ...this is verticalorientation
![Page 52: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/52.jpg)
NetFront Samsung F700horizontal
![Page 53: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/53.jpg)
S60v3 WebKitNokia E71
Shows upper left corner of site.
![Page 54: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/54.jpg)
Android WebKit G2
Shows upper left corner of site.
![Page 55: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/55.jpg)
Back
On most browsers, going back to the previous page is done by pressing the correct button.
(BTW: Windows Mobile browsers usually go to the top of the previous page, and not to the point where you were.)
![Page 56: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/56.jpg)
Back
Still, by far the best Back interface is offered by the S60 WebKit. I hope other browsers will copy it.
![Page 57: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/57.jpg)
S60v3 WebKitNokia E71
Pressing the back button reveals this interface...
![Page 58: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/58.jpg)
OzoneNokia E71
Ozone does something similar, but it needs some more work.
![Page 59: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/59.jpg)
Browser bugs
Unsurprisingly, all browsers have their share of bugs, especially in CSS.
And please count every WebKit as a separate browser in this regard.
![Page 60: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/60.jpg)
Android WebKit G1
Perfect support.
![Page 61: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/61.jpg)
NetFrontSE C510
Lacks some declarations.
![Page 62: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/62.jpg)
Opera Mob 8.00Motorola V3xx
Locked in mobile mode.
Lacks most declarations.
![Page 63: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/63.jpg)
Opera Mob 8.00Motorola V3xx
Besides, a JavaScript check for fontStyle is incorrect.
![Page 64: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/64.jpg)
Browser bugs
This problem has implications for testing.Do NOT use JavaScript to ascertain whether a certain CSS declaration is supported.The script might misfire.
![Page 65: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/65.jpg)
Browser bugs
Prize for the weirdest CSS bug goes to the Android G2.
Reference:http://quirksmode.org/css/box.html
![Page 66: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/66.jpg)
Browser bugs
This is the normal test (Firefox):Width purple: 300pxWidth blue: 330px
![Page 67: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/67.jpg)
Browser bugs
G2: the purple box is WIDER thanthe blue one...but only in portrait orientation
(Sorry, no screen shot.)
![Page 68: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/68.jpg)
Developing for mobile
Rule 1:Do NOT use emulators.
They cannot be trusted.
![Page 69: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/69.jpg)
Developing for mobile
Rule 2:Make sure you have:- iPhone or Android (or both)- S60- Windows Mobile- (Blackberry)
![Page 70: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/70.jpg)
Developing for mobile
Rule 3:Use media queries
@media all and (max-width: 300px) {// styles for small screens
}Opera, minor WebKits: full supportiPhone, S60v5 WK: static support
![Page 71: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/71.jpg)
Thank youfor your attention
![Page 72: State of the Mobile Browsers](https://reader033.vdocument.in/reader033/viewer/2022051515/54c877574a7959ad288b466d/html5/thumbnails/72.jpg)
Questions?
Ask away.
Or ask me on Twitterhttp://twitter.com/ppkor on my sitehttp://quirksmode.org