As we publish travel websites it seemed logical to consider how they would look on the iPhone. I already started playing with an iPhone-specific theme for our RapidWeaver sites but before doing any further work I needed to step back and think through what iPhone users may expect from our websites.

Developing an iPhone-specific version or adapting the whole site?

As demonstrated on Apple’s website it is clear that iPhone will use a powerful web browser based on Safari. The browser’s ability to read any html page and to zoom on certain parts of the page makes it compatible with most existing web pages. There will however likely be severe limitations when browsing with an iPhone. They may not be as severe as with other mobile browsers out there, but they certainly limit the user’s experience:

• no Flash support
• no Java support
• probably no Real audio and video nor WMV support
• limited bandwidth of the EDGE network
• small 320*480 screen
• finger control

All things considered I’d rather create a specific iPhone landing page with a slimmed down version of the site that focuses on content, rather than redeveloping the whole site to cater to the needs of the mobile viewing public.

There is a very good summary at iPhoneWebDev of the different classes of support for the iPhone on the web: compatible, friendly, optimized and iPhone webapp. Let’s say I’ll try first to make my mobile css files iPhone friendly before optimizing them.

Do’s and dont’s of iPhone compatible websites

Let’s consider how to deal with the above constraints.

No Flash and Java

Nowadays Flash and Java are used for much more than showing a few animations and small apps. Those sites that are entirely developed in Flash or Java are out of luck. Others should simply choose not to serve their Flash or Java apps to iPhone users. They may consider serving the contents with javascript, AJAX or Quicktime, although with bandwidth constraints it may be better to leave them out altogether.

Videos limited to Quicktime

With Apple’s announcement of Youtube support through the h.264 codec used in Quicktime, and with full support of iTunes, it seems safe to assume that there will be some degree of Quicktime compatibility. This does not automatically means that embedded Youtube videos or Quicktime movies will work out-of-the-box. Experience will tell whether users can watch embedded movies or whether they must watch them in a separate movie player.

Limited bandwidth

Even with AT&T reportedly upgrading the Edge network bandwidth, it will still be limited at around 80kbs in the best conditions. This is faster than modem access, but this is a real constraint and the focus should be on very light websites for the user to enjoy the experience. Check out our iPhone-specific theme page as we will soon be updating our theme with bandwidth constraint in mind.

In practice, this means: single color backgrounds, or the use of very small repeated jpegs for background and other textures; very light css files and no in-line styling so that the style remains in cache while iPhone visitors are browsing your site; asset consolidation in the same domain to avoid additional dns calls to other servers delivering your content; small javascript files as the runtime is reported to be limited to 5 seconds.

Small screen viewing

Even though iPhone users will have the ability to “pinch and zoom”, it would seem logical to bear their limited screen real estate in mind. This being said, as the iPhone’s screen resolution will be more than twice that of regular lcd screens at 160 pixels per inch, one should not shy away from using small font sizes.

A mistake not to make is of course to have a fixed site width at 320px, since the user can rotate the iPhone and watch your site in landscape mode at 480px. It is as of yet unclear whether the browser will send a reload event or not, but at this time it is better either to use fixed widths that are multiple of 160, allowing your viewers to zoom, or to use a proportional width.

Finger control

Who would have thought that the advent of a finger control interface would spark so much debate? Others have debated at length on the implications of finger browsing, but the main conclusions may be summarized as follows:

• no more hover, use click instead
• expose your controls instead of making them dependent on mouse overs
• use sufficient padding to allow the user to recognize that the click was effective

Now that I have a clear path, I should get down to work and develop those RapidWeaver and Wordpress themes for iPhone users before they start flocking in ;)

Related posts:

1. iPhone web development guidelines released
2. Customizing your website for iPhone browsing
3. iPhone website theme done right
4. More iPhone tools and iPhone-compatible websites
5. Integrating Flickr pictures on your Wordpress or RapidWeaver site

[...] here. The author also provides a non-Flash version which will work with the iPhone browser (as reported elsewhere the iPhone does not support Flash content). The non-Flash version can be downloaded [...]