Apples iPhone revolutionised mobile/smart phones. With full browser capabilities built into the phone, websites look how they should. There are some nice things we can do for iPhone users, to give them a more easier look at your site.

Like many others, I’ve got an iPhone. My first iPhone was the 3G, as the 2G version wasn’t released in Australia. Since then, the easy use of the iPhone has made me very interested in developing mobile web applications.

One of the great things about the iPhone is you can bookmark websites, and have an icon of them on your homescreen. This allows one touch access to your website. This is great if you’re making a web application.

Using cookies, you can keep your iPhone user logged into your web application. Make your website detect if they’re using an iPhone, and give them a customised look and feel, and you’ve got yourself an iPhone web application, that many users can bookmark to their homescreen.

But how can you do all this? It’s a lot of work for just one device some people might argue. What about other mobile capable devices such as Android phones? I haven’t started making websites for other types of phones, only the iPhone. So for today, I’m just going to cover what I know about making a web application for an iPhone.

Detecting iPhones

One of the important things about a website, is detecting that the user is using an iPhone, and automatically displaying an iPhone friendly site for them. This is easily done on the server-side. I’ve used the following code to check if a user is using an iPhone:


<?php
if (strpos($_SERVER['HTTP_USER_AGENT'],'iPhone')){
header("Location: iphone/");
exit();
}
?>


The PHP code above is looking for the term ‘iPhone’ in your browsers “user agent” string, which is sent by your browser on every page request. If it finds that code, it will redirect the browser to the iphone subdirectory, where your iPhone friendly page would be. The user wouldn’t have to do anything extra to be taken to the iPhone friendly page.

There is one consideration to make, which is iPod Touch users. The iPod Touch uses iOS, the same operating system on iPhones. However they may not identify to your website as an iPhone. So I would recommend the following in this case:

<?php
if ((strpos($_SERVER['HTTP_USER_AGENT'],'iPhone') || (strpos($_SERVER['HTTP_USER_AGENT'],'iPod')){
header("Location: iphone/");
exit();
}
?>

This will look for iPhone and iPod in the user agent string.

User Interface Frameworks

If you’re more a coder than designer like me, UI Frameworks make designing a website a lot easier. Why reinvent the wheel, when there are free-to-use UI Frameworks for the iPhone out there? After all, you’re trying to achieve the same look anyway.

Each framework has different features, and of course you’ll have to follow its HTML structure. If you can deal with that, then these frameworks are for you.

jQTouch

This is a framework I found after reading Web Development for the iPhone and iPad on smashing magazine. I haven’t used this myself, but it looks very good. This uses the jQuery javascript framework, which is currently my flavour of choice.

iUI

iUI is a free UI Framework for the iPhone, which I’ve used in one of my concept sites. The interface is easy to use, and there’s little overheads as this is purely a CSS and HTML UI Framework.

HTML5 Goodies

Apple’s iPhone uses Safari as its mobile browser. Safari is one of the first browsers to implement HTML5, the next generation of HTML/XHTML. Some would even call HTML5 web3.0. HTML5 gives us some extra goodies, such as storing a database on the device, and caching things such as images. This is great for web applications, as everything can be done and stored on the users iPhone, and only pulling down data from your server when required. I haven’t coded any web applications using this approach yet, but hope to in the near future.

Hiding the toolbar

An annoying thing of the iPhone is by default, the toolbar/address bar in safari doesn’t hide once a page has loaded. Using a bit of JavaScript in the body tag, we can get around this.

Looking for more info?

The Apple Reference Manual for Safari has some great code examples, and can show you heaps more tricks that you can do with your iPhone web app. Check out http://developer.apple.com/library/safari/#referencelibrary/GettingStarted/GS_iPhoneWebApp/ to get you heading in the right direction.