Making Your Website iPhone Compatible

Last week, Apple released a new version of the iPhone / iPod Touch software that gives web applications a larger presence on the device. As a web developer, there are lots of things you can do to make your website not just iPhone compatible, but feel like it was designed with the iPhone in mind.

In this week’s tip, I have a look at a few quick wins which you can do to make your website iPhone friendly in less than an hour.

Create an icon
If you wish for website visitors to place your website on their gorgeous looking front screen as a Webclip, then you’re going to need to provide them with a custom icon.

These icons work in a very similar way to a website’s bookmark icon - the favicon.ico. To add an icon for the iPhone you simply need to create a PNG image with the dimensions 57 pixels x 57 pixels. Give it the name apple-touch-icon.png and upload it to the root of your website.

Alternatively if you wish to use a different image file type, or place the image in another directory you need to add a link element in-between the head tags, like so:

 <link rel="apple-touch-icon" href="/newdirectory/myicon.jpg"/>

After a bit of experimentation, brightly coloured icons seem to work best for the iPhone interface. The glassy look of the icons is automatically added afterwards.

To see the effect of your icon on your iPhone, simply visit your webpage and press the plus (’+') icon and select ‘Add to Home Page’. Wait for the icon to load, and then choose a name for the Webclip. Names that are 12 characters or less work best.

Making iPhone specific changes

The iPhone has a viewable web display of 320 x 356 pixels on initial page load. The web browser will by default load your page to fit 980 pixels wide.

Using the following code, you can set the iPhone to load the page with a different default width:

<meta name="viewport" content="width=580" />

Sending your readers to a built-in application
You can make use of the iPhone’s other features by including special tags to use mail, phone and maps. This may be especially useful on a page where a phone number and address may be particularly important, such as a store locator.

To access the mail services is just the same as a standard ‘mailto’ in a web browser.

<a href="mailto:someone@random.com">Message Someone</a>

Telephone links can be built using the following:

<a href="tel:1-408-555-5555">1-408-555-5555</a>

And maps can be accessed with:

<a href="http://maps.google.com/maps?q=london">Where I live</a>

Finally, YouTube videos can be linked to using the following:

http://www.youtube.com/watch?v=e-uBKJUeqDc

Want more? Need more?

There’s lots of clever things you can do with a website on your iPhone / iPod Touch and I have only skimmed some of the most popular. Check out the Apple iPhone Developer site if you want to learn more about the iPhone’s features.

Tags: Apple, iPhone, iPod Touch, Mail, Maps, Phone, Scale, Viewport, Webclip, Webclip Icon, YouTube