Website Design for the iPhone

 

 

 

Now that the iPhone is out there and in full-swing, there is an interesting set of challenges that web designers are going to face more and more as mobile devices become more Internet friendly, and that is how to design sites for these devices. To start, let’s take a look at how the iPhone accessed websites, and what it does to display them.

To start, the iPhone uses Safari as it’s web browser, which is nice since Safari is a compliant, high-performance browser with some pretty cool features that designers can take advantage of. Nothing new there. There are 2 areas that are going to be new to web designers. The first is that the input device with an iPhone is not a mouse, but rather a pair of the users fingers. The second issue is the display size, which offers two variations on the size of the screen- either a wide-screen (short and wide) or a portrait screen (thin and tall). To start with, designers will need to be able to determine what users are using an iPhone and can find out using the user-agent string included with all requests. For an iPhone user, the string will look like:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ 

(KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

As you can see, the platform string contains iPhone; U; CPU like Mac OS X; en, which is nice since that makes it easy to find iPhone users. Using that information designers can have a specially formatted website sent to iPhone users. Now that we are able to target iPhone’s, let’s see what the above challenges are going to mean. Another (better) method is to provide a separate CSS stylesheet to users with small screens (such as mobile devices) by using the CSS3 media query inside your LINK tag for your stylesheets:

<link media="only screen and (max-device-width: 480px)" href="/small-device.css" type="text/css" rel="stylesheet" /> 

This piece of code with select out only iPhones, since they only have “screen” CSS capabilities and the maximuum screen width (device width) is 480px. By doing it this way, you can publish your content only once, and use varying CSS stylesheets to provide the user experience that is specific to a user’s device.

Input Device

Let’s start by taking a look at the input device. With a mouse, you have a cursor that is always on the screen, waiting to be pushed around and clicked. With the iPhone, you don’t have this, but rather have a touch-screen interface. What does that mean? Well, you will want to avoid using things like mouseover events since they don’t exist, and also to design with the user in mind. Rather than thinking in terms of a mouse and clicks, you’ll need to accommodate the following input events for iPhone users:

• Double Tap - Causes the browser to zoom in and center on a document
• Touch and Hold - Causes an information bubble to appear.
• Drag - Moves the viewport or pans.
• Flick - Scroll up or down.
• Pinch Open or Pinch Closed - Zooms in or out (respectively).

One important thing to note is that Safari for the iPhone does not include scroll bars, either vertical or horizontal, so keep an eye on how your pages scroll. My advice is that if your iPhone-specific web page has to scroll, it should only scroll vertically and not in two dimensions. Also, keep in mind that different users have different sized fingers, so it’s REALLY important to be aware of “link density” on a page. Don’t cram too many links into a small space, or users will have a difficult time selecting them. Rather, the design theory should center around discrete and large buttons that can be easily labeled and clicked.

iPhone Viewport

The iPhone version of Safari does not have windows in the traditional sense that we think of them in the desktop world where you can resize them and they have scroll bars. Instead, the iPhone shows Safari “windows” as full-screen, or 320px x 480px. From there, things get a little dicy, because the iPhone sets an initial scale for the website. This is a tough one to explain, but let’s say that you have a 980px wide website that will be shown on an iPhone. Since the iPhone has a viewport of 320 px wide, it will scale the site down to fit clearly in the window. This is the initial scale, and it is only done once when the page is loaded in. From there, the user has the ability to scale the display of the site. Of course, Apple has devised a META tag to help designers gain control of this. Using this meta the designer can set some properties that will help the iPhone to display the page better. For example:

meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no" 

will tell Safari on the iPhone that the content of the website is 320px wide (as opposed to the default 980px), that it should set the initial scale to 2.3, and that the user does not have the ability to scale the content of the site. This meta tag is provided to give designers extra control over how the iPhone will interact with a webpage. Of course, this meta tag is completely ignored by other devices.

Another area that designers will want to take a look at is how text wraps and is formatted. Using compliant standards in your design is the first step, and then make sure not to use absolute positioning for your page elements. In addition, the iPhone version of Safari makes some choices when adjusting text size for a user, and there are some ways to override the default settings if the results are not ideal.

Finally, the screen is small, and is also used for input when needed. When designing forms, make sure to account for the “keyboard” that will appear on the screen when the user is inputing data to a web form. Essentially, you have about 140px of visible space to design your forms in, which means that they should be simple and easy to navigate, since most forms will be taller than 140px. You can also format form elements with CSS, which allows you to easily create forms that are usable.

Apple has provided a set of resources for developers to use when designing for iPhones athttp://developer.apple.com/iphone/designingcontent.html. In addition to some of the issues that I covered above, they outline how to integrate features with the iPhone, like linking to phone numbers (which will initiate a call on the phone), linking to Google Maps (which opens a special GUI), and sending email…