Building websites with the iPhone in mind

For the last couple of days we’ve been lucky enough to play with an iPhone. It’s awesome, far and away the simplest and easiest to use phone I’ve ever had – it more than lives up to the hype.
In my opinion the most compelling feature is the integrated, (almost) fully fledged browser, it’s the first mobile device I’ve ever used that can make browsing the web practical and useful rather than frustrating and awkward (Samsung – I mean you).
We don’t know for sure but it seems likely that the iPhone and iPod Touch (which has the same browser and wifi but no phone) will become a fairly important web browsing platform.
With that in mind here are a few tips for optimising your site for the iPhone:
1. Check your webstats to see how many people are accessing your site using the iPhone or iPod Touch. If your stats are set up correctly it will be able to tell how many visitors are using these devices to view your site.
2. At the moment the browser doesn’t support Flash. We expect this to change but if you have functionality, content or advertising that exclusively relies on Flash your visitors won’t be able to use it.
3. The screen resolution is low – 320×248 compared with a standard PC desktop of 1024×768.This means that small elements such as buttons and dropdowns (especially if they are grouped close together) can be hard to use unless you zoom in. Images aren’t so much of a problem as they are automatically scaled to fit the screen size.
4. Both Facebook and Digg have created iPhone versions of their sites. If your site layout is handled in CSS this shouldn’t be too difficult to do and is worth considering if your stats show enough visitors are visiting using iPhone. The Facebook version is currently the best implemented site on iPhone, it looks and feels like a native phone application.
5. On regular sites, iPhone lets the user easily zoom into content that is organised in columns. Google News is laid out in this way and works well.
6. If a user connects through the phone network it uses a relatively slow connection (roughly twice as fast as dial up) so make sure your page sizes (and emails, but we’ll talk about this in another post) aren’t too heavy.
7. If you have telephone numbers, email address or directions you can use tags in your code to allow a user to access the phone, email and maps functionality on their phone. For instance using the “tel:” tag on a phone number will let users tap on the phone number to call you directly.
I’ve found that it’s sometimes easier to access the web on the phone even at home when i have a computer to hand. If i need a piece of info quickly, but don’t want to wait for the PC to boot up, open a browser etc I’ll use the iPhone. If you have a site that people access to get small bites of info quickly (weather, transport etc) the iPhone may become an important platform.
For more in depth and technical recommendations have a read of the developer guidelines.
No comments yet.


