The Divergence of the Mobile Web

IMG_0611
Developing for mobile is, at best, inconsistent.

The complexity of thousands of unique hardware and OS combinations means that developers have to take hardware limitations like screen size into consideration, as well as software limitations such as obscure or dated browsers. This means that right now somewhere, someone, is looking at a newly published, “mobile-optimized” site for a forward-thinking company and can’t figure out why the webpage looks like a high school student project.

wikipedia

You can imagine how frustrating this is.  Just as the IE6 nightmare is coming to a close, a new dark age is emerging, one where standard best practices for mobile are not fully supported and developers are, once again, forced to choose between quality and reach.

triangle

Right now, Apps and device-targeted sites work best on the right side of the triangle (they look awesome and work). Mobile sites can usually hit the bottom of the triangle (they hit a pretty wide range, and work, but don’t look awesome). However, the left side of the triangle doesn’t exist, because a good-looking mobile site that doesn’t work is probably worthless.

How bad are things? My most recent attempt to QA a mobile site required me to download/install/join:

  • iPhone SDK
  • Microsoft Visual Studio 2008
  • Windows Mobile 6 SDK
  • Windows Mobile 6.5 SDK
  • Windows Mobile 6.5.3 SDK
  • Palm Developers Network
  • Android SDK
  • BlackBerry emulators

And I’m probably leaving out some platforms.

Waiting for Guffman?

So what can we do while waiting on standards to emerge?

  • Most importantly, make it clear that not all devices (especially older ones) will display the site in the same way. They might not even work at all! Setting proper expectations will help later on.
  • Get your hands on as many different phones as you can. Borrow your Project Manager’s BlackBerry, your CEO’s Android, and your grandmother’s 4G iPhone.
  • Limit the complexity of the site if it’s expected to work on a wide range of devices.
  • Stick to strict conventions in HTML, JS, and CSS. Also, remember to future proof.
    Picture 2
  • Progressive enhancement is your friend. Fighting with a fancy-yet-frivolous feature on the Windows Mobile 6 browser? Kill it for them, and reward the “good” browsers with your awesome CSS3 transitions.
  • Pray for standards. We don’t want this to last another 10 years.