Websites for the iPhone - but what about other platforms?

Question

I recently did the Chris Coyier tutorial from the css-tricks.com weblog #38: Basics & Tips on Designing for the iPhone. Needless to say I got very excited and suggested to a

Answer 1

Recent Webkit and Opera:

For iPhone Safari, Opera Mobile, and Webkit on Android development are similar (but not identical), and development for those is quite simple.

You can rely on CSS2.1 and JavaScript+DOM (but be careful with UI events). You might get away with serving your regular website with just few changes to stylesheets.

The trick is in serving of these stylesheets. Don't use User-Agent string.

Because some mobile browsers read handheld media, and some insist on screen styles and pretend to have 960px-wide screen (iPhone :/), you'll need to serve mobile stylesheet with both:

<link media="handheld" ...>
<link media="screen and max-device-width:480px" ...>

The latter is CSS3 Media Query – very useful and works with other mobile browsers too (you can use it in stylesheets with @media {}).

Don't rely on :hover or onmouseover because these events don't work on touch screens.

onclick is delayed, mousemove may not work. Custom DHTML widgets (dropdowns, sliders) and drag'n'drop won't work on touchscreens, unless you use touch events (which thankfully all newest browsers adopted).

Viewport

In addition to Apple's proprietary (and IMHO inflexible and violating separation between markup and layout) <meta name=viewport> have a look at CSS3 @viewport, which currently is supported in latest Opera as @-o-viewport and hopefully others will follow.

Simulators/Emulators

To test page in Opera Mobile, get the simulator (or just older desktop version and choose View → Small Screen).

Opera Mini is special, as CSS is re-formatted a bit and DHTML is executed on server-side, which doesn't always give results you'd expect. There's simulator available.

Android

You need Android SDK, fiddle with commandline to launch its clunky UI, download bunch of packages, create virtual device with dozen of irrelevant obscure settings, have patience for this monster to load and turn computer's fans into a quadcopter, and then you can sss..sss..slooowlyyyy test in the "Browser" (my Intel i5 is too slow to simulate Galaxy Tab - browser "stops responding" even before I finish typing URL)

It's easier to get a phone/tablet with Android and test on a real device (but avoid Samsung's Player "iPod" equivalent, as it's rubbish with obsolete software).

Android browser is really painful for anyone who doesn't love Linux way of doing things — just to read JS console you need to fiddle with remote debug connections and log filtering on commandline.

Firefox Mobile (previously Fennec)

There's simulator available (links for "Windows / Mac OS X / Linux" below mobile downloads are not the desktop version, but mobile-for-desktop-OS).

Simulator is very basic, Mobile Firefox itself is IMHO really good, e.g. overflow:scroll works great, while on WebKit-based browsers overflow implementation varies between very unintuitive and totally broken.

Pocket IE:

PIE for Windows Mobile < 7 is not the same engine as IE on Windows. It's mostly as primitive and buggy as IE4 was, but (barely) supports some surprisingly advanced properties like display:table.

It reads both handheld and screen stylesheets at the same time, violating the standard and shooting itself in the foot. If you're going to suppot PIE, then put link to handheld stylesheet last and reverse/override all the rules from screen styles in it.

Anyway, it's dead and it's hard to get an emulator.

Windows Phone 7 currently ships with IE7-alike, and Microsoft promised something of IE9 level later.

New (minority) BlackBerry

The latest WebKit-based BlackBerry browser is quite good, you can treat it as 1st-class citizen (see WebKits comparison linked at the top).

Currently most popular BlackBerry & OpenWave, Blazer, etc.:

Before the BB OS6, it's a nightmare. Only basic HTML works. CSS works on some models, but is primitive and broken. JavaScript works only on some models and it's incredibly slow and lacking (forget about even basic DHTML).

There's free BB simulator available from RIM (annoying registration required). If you're unlucky, it'll launch properly once and then you'll have to completely reinstall it :)

The same thing is with hundreds of other mobile browsers on low-end phones (powered by likes of OpenWave, which has decent simulator) . You'll have to prepare 1-column basic HTML stripped down website for them.

Google Wireless Transcoder

Even if you create nifty (X)HTML optimized for every mobile device out there, users of Google Mobile Search will never see it! Instead, every page will be proxied through "Wireless Transcoder" which brutally chops the code, stripping all stylesheets and scripts (regardless whether browser supports them or not), and even <font> :(