Mobile phones have long been able to access the Web, but anyone who’s ever been to any website via their phone knows it’s an exercise in frustration. Squashed images, missing content, a postage stamp screen; it’s more scrolling than browsing. But Apple’s introduction of the iPhone and iPod Touch changed all that. Mobile Safari is a modern and fully functional web browser, and now the experience is much closer to the real thing. Companies all over the world are transforming their existing websites to target the iPhone and iPod Touch users who are now numbered in millions.

Wanting a piece of the pie, I decided to transform my website hakki.com, into an iPhone compatible one. Through research and trial/error, I came across interesting information and learned tips that I would like to share with you in hopes of making your life easier should you decide to embark on the same journey as I did. I started out by registering the domain hakki.mobi, and went to work. I had two choices: I could build a native iPhone app, or a webapp that looks and acts like a native iPhone app. Humbled by the learning curve and restrictions of building a native app, I decided a webapp is more feasible to achieve for me. As a seasoned designer, I know my way around html, flash, scripting languages and so on, but I have never built a webapp. Actually, it turns out, making a webapp for the iPhone is a lot like making a normal web site, but with a few quirks to abide by.

1. Design to mimic a “Native App”

From a usability perspective, making your web app look like a native iPhone app is beneficial because users already know how to use an iPhone application. If you mimic a native app, you won’t have to go through the whole process of designing and creating something that may in the end prove infeasible. Besides that, using the buttons, font, lists, etc is also beneficial. Here is a list of native fonts for the mobile safari browser:

If for whatever reason mimicking a native iPhone app does not fit your needs, make sure to consider the following:

• Make your text legible (large fonts, sufficient contrast, etc…)
• Always be consistent (i.e: navigation buttons on each page)
• Make buttons large enough to tap (i.e: for fat fingers or the error-prone)
• Make UI intuitive (i.e: collapsible boxes should have hint…like a +/- next to it)

2. Have a Homescreen Icon

This makes the most impact with the least amount of work. Design a nice icon that people can see when they add your web app to their homescreen. Make a 57×57 PNG file and add the following code inside the head tag of your home page:

<link href="path/to/your/icon.png" rel="apple-touch-icon" />

As simple as this step seems, it is the best way to quickly recognize your web app, as well as look professional while having some nice eye-candy. You don’t have to add the curved edges or the glassy effect, when a user adds the site to their home screen, iPhone OS will automatically add the effect for you. Here is an example:

Icon in original format:

Icon in iPhone homescreen:

3. Viewport!

If you want your content to look perfect on an iPhone you must use the viewport meta tag. Without it, your page may look like thumbnail. The viewport meta data goes in the head:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

The possible values for it are as follows:

• width=device-width
  This fits the page to the device’s width. The iPhone’s display is 320×480 pixels in portrait mode, and 480×320 pixels in landscape mode, which is why you sometimes see sites use width=320 instead of width=device-width.
• initial-scale=1.0
  This is the scaling when the page first loads up.
• maximum-scale=1.0
  This is the maximum scaling allowed.
• user-scalable=0
  This determines whether the user is allowed to zoom in and out by pinching/double-tapping. You can also use user-scalable=no and user-scalable=yes instead of 0 and 1.

4. Hide the Address Bar

While the iPhone packs a lot of resolution into its relatively small screen, the address bar consumes about 60 pixels of real estate by default when a page is loaded in MobileSafari. With either 320 or 480 pixels available to the viewport, 44 of which are reserved for the bottom toolbar, it’s necessary to maxamize every available pixel.

Add this code in the body tag to hide the address bar:

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"></body>

5. Preserving aspect ratio of images

I wanted to display images of my portfolio using the maximum width available by the device and retain their aspect ratios when the user switched between landscape and portrait viewing modes. Easy with the help of CSS. Create a simple class and reference it in the code:

CSS:

.work img { width:100%; }

Code:

<div class="work"><img src="images/sample_1.jpg" /></div>

6. Detect Orientation Change

You might want to run a function or perform a special task when user switches the orientation of the phone. In this example we are simply going the alert the user when they switch from landscape to portrait and visa versa.
Here’s the javascript:

function updateOrientation(){
	switch(window.orientation){
		case 0:
		alert("portrait");
		break;

		case -90:
		alert("landscape");
		break;

		case 90:
		alert("landscape");
		break;

		case 180:
		alert("portrait");
		break;
	}
}

Don’t forget to add the orientation change hook to the body tag:

<body onorientationchange="updateOrientation();">

7. Use Frameworks, Libraries, and Tools to Save Time

If you do decide to mimic a native app, then I suggest not starting from scratch. There are many things out there that can save you a ton of time. Below I’ll make a list with components you can use to develop for iPhone using only what you know, or learn only few things more.

• Dashcode
  If you have a Mac, this may be the best route to go if you want to whip up something fast. Dashcode has a parts library(i.e: buttons/frames), a code snippets library, a workflow steps guide, and way more!
• iUI
  iUI is a framework consisting of a JavaScript library, CSS, and images for developing iPhone webapps. Makes WebApps Look and Feel Like iPhone Native Apps
• iWebKit
  iWebKit is a file package designed to help you create your own iPhone and iPod Touch compatible website or webapp. The kit is accessible to anyone even people without any html knowledge and is simple to understand thanks to the included tutorials.
• XUI
  A simple javascript framework for building mobile web applications. XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera with future support under consideration for IE Mobile and BlackBerry.
• iPhone-Universal
  The framework is based on 1 stylesheet and several HTML examples, also, it contains original artwork so you can edit them in Adobe Photoshop CS and adapt it to your projects.

8. Testing

You might not always have access to an iPhone or an iPod Touch. Although not perfect, there are emulators out there that do a decent job of replicating the iPhone OS:

• iPhoney
  iPhoney gives you a pixel-accurate web browsing environment—powered by Safari—that you can use when developing web sites for iPhone. It’s the perfect 320 by 480-pixel canvas for your iPhone development.
• TestiPhone.com
  This is a web browser based simulator for quickly testing your iPhone Applications. This tool has been so far tested and working using Internet Explorer 7, FireFox 2 and Safari 3 in Windows, but you ned Safari to get the real experience.

That’s it, best of luck and hopefully you will find this article useful.