State of the Mobile Browsers

Hell is other browsers - Sartre

Mobile browsers
Peter-Paul Koch (ppk)
http://quirksmode.org
http://twitter.com/ppk
Yahoo! London, 24 June 2009

Desktop browsers
Desktop browsers are getting boring.

They all follow the standards;
even juicy IE bugs are becoming
scarce.

Fortunately ...

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.

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.

http://quirksmode.org/m

Mobile browsers
- Android WebKit - Iris
- Opera Mobile - Bolt
- NetFront - Skyfire
- Safari - Obigo
- Opera Mini - OpenWeb
- Blackberry - Nokia S40
- S60 WebKit - Palm Blazer
- IE Mobile - Fennec
- Teashark
You may groan now. - Ozone

Mobile browsers
- Safari - Obigo
- Teashark
- Ozone

Mobile browsers
- Safari - Obigo
There is no “WebKit Mobile”
- Teashark
- Ozone

There is no “WebKit mobile”
Compatibility of :enabled, :disabled,
and :checked

Default browsers
- Safari - Obigo
- Teashark
- Ozone

Modern default browsers
- Safari - Obigo
- Teashark
Still quite a lot. - Ozone

Thin clients
- Safari - Obigo
- Teashark
- Ozone

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.

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.

Mobile browsers overview
Top level:
Android WebKit, Safari, Opera Mobile

Mid level:
S60 WebKit, Blackberry, Opera Mini

Bottom level:
NetFront, IE Mobile (old)

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.

Operating systems
- Blackberry (RIM)

JME (Java Mobile Edition)
“Write once, run anywhere.”

Operating systems
- Blackberry (RIM)

JME (Java Mobile Edition)
“Write once, run anywhere.”
“Write several times, run somewhere”
(Still, easier than starting from scratch.)

Example
As a test, I looked at the homepage
of my QuirksMode.org in several
mobile browsers on several
platforms.

The results are ... interesting.

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

Safari
iPhone
2.2

Zooms out
and shows
entire page.

Blackberry
Storm

Zooms out and
shows entire
page (with
minor bugs)

Opera 9.5
HTC Touch
Diamond
(Win Mob)

Zooms out and
shows entire
page

Zoom
If the browser shows the entire site,
it usually gives you a zooming
option, too.

Let's take a look at a few.

Opera Mini
Nokia E71

Initial: show
entire site.

Notice the
zoom window
top left.

Opera Mini
Nokia E71

Clicking on
Zoom zooms
in to the
requested
area.

Bolt
Nokia E71

Bolt has an
unusual
zoom
interface.

Android
WebKit G2

Click the
lower right
icon...

Android
WebKit G2

... and drag
the zoom
layer.
Releasing it
zooms in.

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.)

Example
Let's continue with our examples.

Opera 9.5
HTC Touch
Diamond
(Win Mob)
But ... Zooms out and
this is shows entire
desktop mode page

Opera 9.5
HTC Touch
Diamond
this is (Win Mob)
mobile mode
Errr ....

Opera 9.5
HTC Touch
Diamond
(Win Mob)

Errr ....

Opera Mobile
- desktop mode
- mobile mode

Opera Mobile
- desktop mode
- mobile mode

Sites are shown exactly as on a desktop
computer.

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.

Opera 9.5
HTC Touch
Diamond
(Win Mob)
desktop
mode

Opera 9.5
HTC Touch
Diamond
(Win Mob)
mobile
mode

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.

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.

IE Mob(old)
HTC Touch
Diamond
(Win Mob)

Errr ....

NetFront
Samsung
F700

Errr ....

NetFront
Samsung
F700

But ... Errr ....
this is vertical
orientation

NetFront Samsung F700
horizontal

S60v3
WebKit
Nokia E71

Shows upper
left corner of
site.

Android
WebKit G2

Shows upper
left corner of
site.

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.)

Back
Still, by far the best Back interface
is offered by the S60 WebKit. I hope
other browsers will copy it.

S60v3
WebKit
Nokia E71

Pressing the
back button
reveals this
interface...

Ozone
Nokia E71

Ozone does
something
similar, but it
needs some
more work.

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.

Android
WebKit G1

Perfect
support.

NetFront
SE C510

Lacks some
declarations.

Opera Mob
8.00
Motorola
V3xx

Locked in
mobile mode.

Lacks most
declarations.

Opera Mob
8.00
Motorola
V3xx

Besides, a
JavaScript
check for
fontStyle is
incorrect.

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.

Browser bugs
Prize for the weirdest CSS bug goes
to the Android G2.

Reference:
http://quirksmode.org/css/box.html

Browser bugs
This is the normal test (Firefox):
Width purple: 300px
Width blue: 330px

Browser bugs
G2: the purple box is WIDER than
the blue one...
but only in
portrait
orientation
(Sorry, no screen
shot.)

Developing for mobile
Rule 1:
Do NOT use emulators.

They cannot be trusted.

Rule 2:
Make sure you have:
- iPhone or Android (or both)
- S60
- Windows Mobile
- (Blackberry)

Rule 3:
Use media queries

@media all and (max-width: 300px) {
// styles for small screens
}
Opera, minor WebKits: full support
iPhone, S60v5 WK: static support

Questions?
Ask away.
Or ask me on Twitter
http://twitter.com/ppk
or on my site
http://quirksmode.org

State of the Mobile Browsers

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to State of the Mobile Browsers (20)

More from Peter-Paul Koch (11)

Recently uploaded (20)

State of the Mobile Browsers