Mobile Web Apps

When talking to someone who is new to the field about “mobile web apps”, eyes glaze over: the most frequent question I hear is “wait, how are they different from plain ol’ web apps?” It’s tempting to answer, “nothing really, except debugged on a mobile device”, but there are two big differences — one not important (but looks important), and one important (but looks trivial).

Looks Important

Like any good story, ours begin with a magic phrase. Most obscure than “avada kedavra”, more potent than Gandalf’s mutterings. The phrase is this:

<meta name="viewport" content="user-scalable=no, width=device-width" />

I found this spell in my favorite Grimoire. The need for this spell is historic. Here is a quote from a usability expert, talking in 2006:

Optimize Web pages for 1024×768, but use a liquid layout that stretches well for any resolution, from 800×600 to 1280×1024.

When the iPhone/iPod Touch came out (5 months after the above quote summarized common wisdom in web design), it had a problem: its screen size was 320×480. Many argue that the killer feature of the modern iPhone is its App Store, but back then there was no App Store (the SDK would not be released for a little over a year) — the killer feature of the old iPhone was the fact that it was the first mobile device with a browser that was not painful to use.

Apple achieved the miracle of getting a usable browser on a device that was about half as big in each dimension (and frequently used rotated) of the sizes web designers were testing for by cheating — imagining a larger “viewing port” than the device screen. Zooming out, and forcing users to do a little bit of horizontal scrolling, became the order of the day. The screen become larger, and the Apple devices were joined by their scruffy Android cousins, but all used the Apple cheat to view a web that was meant for their much larger relatives.

The spell above is nothing more than a hint to the smaller devices — “I tested it on a mobile screen, and it looks OK. There is no need to cheat.” It seems powerful and all important, and makes a huge difference in how the web site looks on a mobile device (hint: it looks amateurish when the spell is not there), but in reality, it’s just an affirmation of what every reasonable designer does: knowing the difference between browser platforms, and catering to all popular ones (some sites record about 15% of their traffic coming from the iPhone).

Looks Trivial

The iPhone and Android browsers are not IE6. In fact, the mobile web, having been conjured into existence in 2007, and being on devices which are good at updating themselves over the air, is unusually up to date on standards. In a sense, the mobile web (apart from various idiosyncrasies) is an answer to the question: “How would the web look if the older browsers did not need that much catering to?” Once answer, unsurprisingly, is the heavy use of AJAX. In fact, advice for mobile web application writers is (from the same Grimoire):

…there are some very good reasons to go to the trouble [of creating an AJAX app]. In particular, it opens the door to creating iPhone apps that can run full-screen […] and even offline…

The advice given is to create the strictest AJAX app possible: one HTML page, no “browser” navigation.

Summary

When designing a web app for the mobile market, the biggest visible effect will be the simplest to achive — just promise that it has been tested on the browser. The subtler art of using pure AJAX, which translates to “never needing to create HTML on the server” (JavaScript is very, very good at manipulating DOMs) and thus turns the expectations of what we need from a web app framework, will seem trivial by comparison.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: