Friday, November 20th, 2009

Full Frontal ’09: PPK on Mobile Quirks and Practices

Category: JavaScript, Mobile

PPK talks up the excitement of mobile web development, then brings the mood down a notch by listing the overwhelming array of browsers to be targeted! Quirksmode says it all. This talk is about quirks in mobile development, and some of the solutions out there.

Mobile CSS Quirks

So many platforms. Take just WebKit; there’s iPhone Safari, Android WebKit, Bolt, Iris, different versions, etc. “If someone says my ‘app should work in WebKit’, laugh in their face. There are just too many versions of WebKit, so as PPK says it, there really is no “WebKit for mobile”.

That said, it’s good that things are starting to converge towards WebKit. As for the others: Blackberry browser “is dead” as they’ll be switching to WebKit; Mozilla is very late to the game; NetFront “is not very good”. Windows Mobile 6.5 is a big improvement on 6.1, and with an improved browser, but it’s still IE6 based. (‘Nuff said.)

There’s also a large legacy share, and if users are used to it already, that may be what they want to keep using.

Landscape versus profile mode is an interesting one for those of us desktop developers whose users don’t flip their heads around on a regular basis. NetFront has some very surprising and idiosyncratic ways of dealing with it.

The modes don’t stop there. There is also mobile versus desktop mode in some browsers; sometimes users can switch these in some obscure corner of their mobile browser preferences. Again, some surprising things happen in Opera and Android. Perhaps of more concern is the difficulty he had diagnosing the situation at first, when Android was showing three divs of the same width in one mode, and not in the other.

@media to the Rescue

Okay, what can we do about all this? Media queries are extremely useful and fairly well supported in modern mobile browsers.

  1. div.sidebar {
  2.   width: 300px;
  3.   float: right;
  4. }
  6. @media all and (max-width: 400px) {
  7.   div.sidebar {
  8.     width: auto;
  9.     float: none;
  10.   }
  11. }

max-width and min-width have subtle issues which PPK is currently researching, but max-device-width and min-device-width give more reliable results. orientation, aspect-ratio, and dpi (also needs research).

Mobile Javascript

Performance-wise, IE Mobile and Blackberry extremely slow. iPhone is middle ground. The really fast browsers are Opera on Samsung and N97, and S60 on Nokia E71 and N97. The bottom line is take your time with mobile Javascript development; you generally can’t expect it to “just work”; you’ll have to optimise. Also, don’t use iframes – they’re major performance hogs.

Mobile Connections

Tempting fate, PPK informs us that if someone in the room starts downloading movies, the network gets slower for the rest of us.

Fortunately, browsers give us events to determine when user is going online and offline. Unfortunately, they’re doing it wrong. Only Firefox automatically detects offline; all the others require the user to explicitly say “I’m offline now”!

W3C Widgets

In general mobile development, best practice is to put all the core files on the moble phone, and only download the data. But how can we do that with web apps, where the code comes down with the data? W3C widgets offer a solution. You just create a single HTML page with the CSS, Javascript, and images you need; add an icon and config; zip it up; and deploy. PPK reports it works in practice, and works in a “write once, run many” fashion. There are still problems to be sure, but he says it’s the best interoperable solution we have today. But still many outstanding platforms: Blackberry (already talking about it), Nokia Maemo, Palm Pre, Android, and of course, iPhone.

Device APIs

Security risks mean critical device APIs will generally remain off limits to general websites for a while. Widgets have a better model, because they’re more self-contained and can be verified, although not perfect either.

Posted by Michael Mahemoff at 7:58 am
Comment here

3.9 rating from 17 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.