Our Blog

With sales of 1 million handsets in the first 3 days alone, the latest 3G iPhone stands a good chance of becoming the most popular way for people to browse websites with a handheld device.

With just a few limitations (lack of flash compatibility for example) an iPhone can happily browse most standard, well written web sites.  So why bother going to the trouble of making a specific version of your site for the iPhone?  There are several reasons:

• Make the experience a lot more pleasant for the user by helping them avoid zooming and scrolling around
• Pull out the iPhone incompatible bits so their experience is flawless, while maintaining eye candy for regular users
• Make the experience quicker (and thus bearable) for the users who are browsing over a (relatively) low bandwidth connection.

That last point is, I believe, the most important.  Remember a few years ago when we were all obsessed with the size of our web pages, trying to save bandwidth to keep load times down for 56k dial-up users?  A 2G iPhone (of which there are millions out in the wild) on a cell network tends to get similar speeds to 56k users of old.  Even the new iPhone running on a 3G network (where available) is never going to win a speed contest with a broadband connection.

Thanks to the flexibility of CSS based web designs, making an iPhone specific site is a lot less work than it could have been.  Some simple javascript to detect the presence of the iPhone is all that’s needed to point the iPhone to a different CSS file.

If your site is powered by the Wordpress blogging/cms system it’s even easier as the hard work has been done for you as there is a plugin available called IWPhone. Once installed and activated it automatically redirects iPhone users to a separate iPhone specific theme which is tailored to the smaller screen size and reduced feature set.  You could just install this plugin and forget about it, but if you want to be slick you should customise the accompanying theme to at least match the colour scheme of your normal site.

The blog on our site is powered by Wordpress and we have installed this plugin along with a heavily customised theme for the iPhone, however the images used in the posts, such as the screenshot of the iPhone on this page, are the full sized versions as used in the normal theme.  The majority of the page load time is down to these images but adding platform specific images to posts is not straightforward.

Time for some tests!

The times below are the number of seconds it took a 3G iPhone to load this very post using our iPhone specific theme.  The number in brackets is the time taken to load the post using our normal theme.

Each test was repeated 5 times to get an average time with the cache being cleared before each attempt.

• Wi-Fi with full signal – 5 seconds (11 seconds)
• 3G with 2 bar signal – 9 seconds (17 seconds)
• 2G GPRS with 4 bar signal – 41 seconds (108 seconds)

NOTE: As I couldn’t get an EDGE signal this evening I’ll update this post tomorrow with those figures.

This preliminary data shows that it is worth having an iPhone specific theme as page load times are almost halved.  Obviously the speed gains will vary depending on the design of both your normal and iPhone specific themes.

On a side note, the 3G iPhone certainly seems to be a worthy upgrade, performance wise…

Filed under: Gadgets, Web Design
No Comments »