Last week I was privileged to host PPK (Peter-Paul Koch) for a Google tech
talk entitled "The Open Web Goes Mobile". Most developers building web apps have benefited
from PPK's browser compatibility
research hosted on his well known site quirksmode.org. Now, fortunately, PPK is turning
his attention to the world of mobile web devices. To no one's surprise, browser compatibility
on mobile devices is even worse than it is on the desktop. Or as PPK puts it on his opening
slide "Hell is other browsers". Check out his slides or watch the
video here.
PPK starts by
identifying the four main problems with getting web sites to work well on mobile clients:
small memory, small display, flaky browsers, and flaky connections. Memory is an area for more
research, especially benchmarking. PPK offers some suggestions for dealing with a small
display, including using media queries in CSS (@media all and (max-width: 300px) {}) and
offsetWidth in JavaScript.
Mobile browsers themselves are flaky when it
comes to advanced CSS and JavaScript. But PPK finds that even basic stuff, such as font-style:
italic, has to be verified. As a result of his testing, PPK categorizes mobile browsers into
three levels of compatibility:
top level: Android WebKit,
Safari, Opera Mobile
mid level: S60 WebKit, Blackberry, Opera
Mini
bottom level: NetFront, IE Mobile
Obviously,
this is not an exhaustive list of mobile clients. PPK also mentions OpenWeb, Nokia S40, Palm
Blazer, Iris, Bolt, Skyfire, Obigo, Fennec, and Teashark. This is the challenge in developing
for the mobile web - there are a large number of clients and they exhibit diverse
compatibility behavior.
When it comes to flaky connections, PPK points
out that your connection speed is affected by the activity of the people around you. It's
unlikely that this is going to change any time soon, so it's important to reduce the size of
your downloads as much as possible. The problem is that caching on mobile devices isn't always
reliable.
The impact of flaky connections can be mitigated by saving
your core files on the mobile device. W3C
Widgets offers a solution for achieving this. They're local applications written in
HTML, CSS, and JavaScript that run inside the mobile browser. Ajax is used to download what's
required: data. An advantage of using W3C Widgets is that, if the specification gets wide
adoption, widgets will run across multiple mobile devices, and companies won't have to build a
custom application for each target device. Right now, W3C Widgets work in Vodafone and Nokia
S60 phones and Opera/T-Mobile phones for Windows Mobile, so evangelism to other mobile devices
is needed. But the possibility of sharing applications across phones is compelling, for both
the user experience as well as reduced development costs for mobile app developers.
