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).
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" />
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).
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.