Scribd
Upload
61 views46 pages

The Mobile Web: (Or The Masochist's Guide To Gleeful Self-Flagellation)

The document discusses the challenges of developing for the mobile web. It notes the large number of different mobile browsers and versions of WebKit that exist. JavaScript performance varies significantly between browsers. Connections can be unreliable and downloading large assets is problematic. The document proposes W3C Widgets and device APIs as promising solutions, though security and limited device access remain issues.

Uploaded by

KC Kong
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
61 views46 pages

The Mobile Web: (Or The Masochist's Guide To Gleeful Self-Flagellation)

The document discusses the challenges of developing for the mobile web. It notes the large number of different mobile browsers and versions of WebKit that exist. JavaScript performance varies significantly between browsers. Connections can be unreliable and downloading large assets is problematic. The document proposes W3C Widgets and device APIs as promising solutions, though security and limited device access remain issues.

Uploaded by

KC Kong
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

Hell is other browsers - Sartre

The Mobile Web


(or the masochist's guide to gleeful
self-flagellation)
Peter-Paul Koch (ppk)
http://quirksmode.org
http://twitter.com/ppk
Full Frontal, 20 November 2009
The Mobile Web
Mobile is the single most fascinating
development on the Web in many years.

Problem is: we don't have the faintest


idea what to do with it.

Yet.
Mobile browsers
- Android WebKit - Iris
- Opera Mobile - Bolt
- NetFront - Skyfire
- Safari - Obigo
- MicroB - Fennec
- Blackberry - Teashark
- S60 WebKit - Ozone
- IE Mobile - Opera Mini
- Palm WebKit
You may groan now.
Mobile browsers
- Android WebKit - Iris
- Opera Mobile - Bolt
- NetFront - Skyfire
- Safari - Obigo
- MicroB - Fennec
- Blackberry - Teashark
- S60 WebKit - Ozone
- IE Mobile - Opera Mini
- Palm WebKit
Default browsers Non-default
Mobile browsers
- Android WebKit - Iris
- Opera Mobile - Bolt
- NetFront - Skyfire
- Safari - Obigo
- MicroB - Fennec
- Blackberry - Teashark
- S60 WebKit - Ozone
- IE Mobile - Opera Mini
- Palm
These are all WebKit browsers.
WebKit Mobile
There 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 Iris, which was bought by Blackberry
and Palm
and Bolt, Ozone, Teashark, and a few more

These WebKits are all different.


There is no WebKit on Mobile.
Exhibit A: http://quirksmode.org/m
Mobile browsers
The main battle on mobile is now
between “WebKit” and Opera.

WebKit is free, but that means


everybody creates his own version.

Opera costs money (for vendors), but


there's some central planning, and
therefore less differences.
Mobile browsers
- Blackberry browser is dead; they'll
switch to WebKit instead
- Mozilla is very late to the game
- NetFront is not very good
- IE ... is IE (IE6, to be precise)
- The minor browsers are even worse
Example
Safari iPhone 2.2

Zooms out and


shows entire page.
Width about 900px
Blackberry 9500
(Storm)

Same, but with a


few bugs.
S60v3 WebKit on
Nokia E71
NetFront 3.2 on Samsung F700 landscape
NetFront 3.2 on
Samsung F700
portrait

Yeah ... right ...

This is a mobile
mode.
Site is squeezed
into display.
Opera Mobile 9.5
on HTC Touch
Diamond
(Win Mob 6.1)

Footer not visible;


otherwise OK.
Opera Mobile 9.5
on HTC Touch
Diamond
(Win Mob 6.1)
in mobile mode.

Totally different.
Opera Mobile 9.5
on HTC Touch
Diamond
(Win Mob 6.1)
in desktop mode.

Basic CSS.
Opera Mobile 9.5
on HTC Touch
Diamond
(Win Mob 6.1)
in mobile mode.

Basic CSS.
Android 1.5 landscape mode
Android 1.5
portrait, in mobile
mode.

The 300px wide


box is smaller than
the 330px wide
box.
Media queries
div.sidebar {
width: 300px;
float: right;
}

@media all and (max-width: 400px) {


div.sidebar {
width: auto;
float: none;
}
}
Media queries
- max-width and min-width
- max-device-width and min-device-width
- orientation (portrait or landscape)
- aspect-ratio
(2/3, 3/4, 4/5, 3/5, 10/16, 80/99)
- dpi (96 for desktop)
Phones may have up to 200
Media queries
body {
font-size: 0.8em;
}

@media all and


(min-resolution: 150dpi) {
body{
font-size: 2em;
}
}
JavaScript
The good news:
- Modern mobile browsers support
JavaScript.
- Their compatibility with the various
standards is ... decent (in general)
JavaScript
The bad news:
- Performance is still a huge problem.
- Partly caused by small memory.
- Partly caused by lousy
implementations.
JavaScript performance
Generate 250 lists with 20 list items
each and add them to the document.

How long does this take?

Significant differences.
JavaScript peformance
IE Mobile 500
Blackberry 500
NetFront SE 97.3
iPhone 2.2 14.3
Opera 9.7 WinMob 6.5 12.3
Android 1.5 7.2
Fennec b5 6.2
JavaScript peformance
iPhone 2.2 14.3
Opera 9.7 WinMob 6.5 12.3
iPhone 3.1 11.1
Android 1.5 7.2
Fennec b5 N900 6.2
S60v3 E71 6.2
S60v5 N97 5
Opera 10 N97 3.6
Opera 9.6 Samsung H1 2.5
JavaScript performance
Don't use iframes!
They're performance hogs.

That's a problem in several test suites.


They just don't run on mobile phones.
Connections
If the guy next to you is downloading a
few movies
your network connection will slow down
regardless of how good it's supposed to
be.

I don't see this problem disappearing


any time soon.
Connections
Besides, connections can suddenly and
inexplicably disappear.

online/offline events

Currently implemented wrongly (except


by Firefox.)
Connections
Even if they work, connections are a
problem on the mobile web,
especially when your site uses 200K of
custom JavaScript plus a few libraries.

These assets have to be downloaded


every time the user visits your site
and caching isn't always reliable.
Connections
Solution:
Put the core files on your mobile phone
so that you only need to download the
data. Saves a lot of network traffic.

Apps do that. Websites don't.

Enter W3C Widgets.


W3C Widgets
W3C Widgets are local applications
written in HTML, CSS, and JavaScript.

They run in a browser (mainly Opera


right now).

They can do Ajax requests for more


data.
Creating W3C Widgets
- Create 1 HTML page with the CSS,
JavaScript, and images you need.
- Add an icon and a config.xml
- Zip the lot
- Change extension to .wgt
- Upload to a widget-capable phone
- It Just Works
W3C Widgets
Besides...

If I have a W3C Widget on my S60 phone


and you have a Windows Mobile phone
I can send the widget via Bluetooth
and It Just Works

(Really; I've done it)


W3C Widgets
Right now W3C Widgets work in:

- S60 phones with Vodafone Widget


Manager
- any phone with Opera Mobile 9.51+
- Windows Mobile 6.5 phones (well,
almost)
W3C Widgets
In the future they might work in:

- Blackberry (first steps taken)


- Nokia Maemo?
- Palm Pre? (logical extension of webOS)
- Android??

Not on the iPhone, though.


#appleisevil
W3C Widgets
Problems with W3C Widgets:
- Animations. JavaScript gets better and
better, but animations remain a weak
spot relative to other languages
- Access to phone functionality such as
geolocation, the address book, the
camera, and the file system
Device APIs
Context!

In order to serve the mobile context we


need to access phone functionality from
W3C Widgets.
Enter JavaScript device APIs
device.phone.call(
device.addressBook.entries['mom'].number)
Device APIs
- JIL (Vodafone, China Mobile)
- W3C Device API Working Group (just
started)
- BONDI
- PhoneGap (iPhone, Android,
Blackberry); temporary solution
Device API Security
Besides, there's a security problem.

If someone sends me a widget via


Bluetooth,
how am I going to know it isn't going to
steal my address book?

Serious problem. No real solution yet.


W3C Widgets
Still, I believe these problems are
solvable.

I believe W3C Widgets are the future of


the mobile web.

So let's get to work.


Thank you!
Questions?
http://quirksmode.org
http://twitter.com/ppk

You might also like