Chances are you’ve seen the video showing how the iPhone can flip and expand Web pages. It can show you the entire Web page at a glance or zoom in to make the text you’re interested in readable. In one sense, since the iPhone uses Safari, Web designers shouldn’t have to do anything special to create a Web page that will work on the iPhone.

But do you really want your page to just work? Most designers want their pages to shine!

[polldaddy poll=1303861]

When you build a Web page you need to think about who’s going to view it and how they are going to view it. Some of the best sites take into account what type of device the page is being viewed on, including the resolution, color options, and available functions. They don’t just rely on the device to figure it out.

General Guidelines for Building a Site for iPhones

• Test on as many phones as you can
  The first thing you should do is view your site on a cell phone or 10 different cell phones. While there are some emulators out there, they really don’t give you the same feel as trying to navigate through a Web site on the tiny little screen.
• Make your pages degrade gracefully.
  You can write your pages for Flash-enabled, wide screen browsers, but make sure that the critical information is visible even in a tiny monitor that can’t handle any special features (like cookies, Ajax, Flash, JavaScript, etc.). Anything beyond XHTML Basic will be beyond some cell phones.
• Build a wireless specific page – and make it easy to find
  If you’re going to build a specific page for your cell phone and wireless customers – make it available. A great way is to put the link to the wireless page at the very top of your document, and then hide that link from non-handheld devices using the handheld media type. After all, most people come to your home page, even on cell phones – and if the link to your wireless page isn’t there, they’ll leave if the page is too hard to use.

Web Page Layout for iPhones

• Remember that the screen is tiny. Web pages that are multiple thin columns (like the New York Times site that the iPhones ads feature) are going to work better on cell phones than Web pages with one large column. The narrower the content is on your normal page, the less it will have to shrink to fit a cell phone window.
• Divide pages into smaller chunks. It can be difficult to read long segments of text on a cell phone, so putting them on multiple pages makes them easier to read.

Links and Navigation on iPhones

• The shorter the links are, the better. If you’ve ever tried to type in a URL on a cell phone, you’ll know that it’s a pain (except perhaps for teens who are used to SMSing 24/7). Even on the iPhone it’s tedious to type in long URLs. Keep them short.
• Don’t put your navigation at the very top of the screen. There is nothing more annoying than having to page through screens and screens of links to find the information you want. If you’ve looked at Web pages that were designed for cell phones, you’ll see that the first things that show up are the content and headline. Then, below that is navigation.
• Access keys are a gift from heaven on cell phones, especially when the links or form fields make it clear what keys can be hit to get that link. If you get into the habit of using access keys on your Web pages, your cell phone users will be ecstatic.

Tips for Images on iPhones

• The images must be small. Yes, the iPhone can zoom and unzoom in on images, but the smaller they are, in both dimensions and download time, the happier your wireless customers will be. Optimizing images is always a good idea, but for cell phone pages, it’s critical.
• Images must download quickly. Images take up a lot of space on Web pages when you’re viewing them from an iPhone. And while they are often very nice and make the pages look better when viewed on a full-screen Web browser, they often get in the way on a mobile device.
• Don’t put large images at the top of the page. Just as with navigation, it can be very tedious to wait for an image that takes up 3-4 screenfuls to load at the very top of the page. And this is extremely common on Web pages.

What to Avoid When Designing for iPhones

There are several things you should avoid when building a wireless friendly page. As I mentioned above, if you really want to have these on your page, you can, but make sure that the site works without them.

• Flash – most cell phones do not support Flash, so it’s not a good idea to include it on your wireless pages.
• Cookies – most cell phones have no cookie support.
• Frames – even if the browser supports them, think about the dimensions of the screen. Frames just don’t work on wireless devices – they’re very difficult or impossible to read.
• Tables – don’t use tables for layout on a wireless page. And try to avoid tables in general. They aren’t always supported and you can end up with strange results.
• Nested tables – if you must use a table, make sure not to nest it in another table. These are difficult for desktop browsers to support, and at best make the page load more slowly.
• Absolute measures – in other words, don’t define the dimensions of objects in absolute sizes (like pixels, millimeters, or inches). If you define something as 100px wide, on one mobile device that might be half the screen and on another it might be two times the width. Relative sizes (like ems and percentages) work best.
• Fonts – don’t assume that any of the fonts you’re used to having access to will be available on the cell phones.

In the meantime, we brought our iPhone into the streets, where I explored its possibilities (during the moments I was able to wrest it from my daughter). For me, one of the most interesting things about the iPhone (outside of beating my high score at Tap Tap) was exploring the web — and I’m not alone. 2008 studies show that between 85 and 95% of iPhone owners regularly use the web (as opposed to 13% of mobile phone owners and 58% of total smart-phone owners) (1, 2). So iPhone’s browser is definitely worth keeping in mind when building websites.

Some Characteristics of iPhone browsing

• uses a special version of the WebKit-driven Apple Safari browser
• sites render relatively slowly on the phone network, but quickly over a wireless network
• Supports CSS media types. ignores handheld media type.
• 2″x3″ screen can be turned to portrait (vertical) or landscape (horizontal)
• no support for Flash, Java, or Quicktime
• Javascript works, with some limitations
• typing long URIs can be cumbersome, and there is no copy/paste
• text fields in forms bring up letter key display, limiting screen real estate
• no view source function on browser here’s one solution by Abe Fettig)
• when you first land on a site, the viewport assumes a 980px wide resolution, unless told otherwise via the viewport meta tag
• you can create an icon called a web clip, which a user could keep on his or her home screen for quick access to your site or application
• fingertip navigation
  • to zoom in on a site, use your thumb and forefinger to stretch it, to zoom out, use thumb and forefinger to pinch it (aka multitouch navigation) — awesome!
  • scroll, slide, tap interface items with your finger tip
  • a light resting of your fingertip on a link works like a hover, while a finger-tap works like a mouse click
  • typing is a bit awkward… especially long URIs
  • most navigation signals are given with finger taps
  • drag and drop elements replaced with click to click
• native application integration
  • tap on an embedded Youtube video, and iPhone opens the Youtube application in landscape mode, and plays the video
  • iPhone Safari auto-detects phone numbers on a web page, turns them into links — tap the link and it will offer to dial the number. tap again to dial. (this can be disabled)
  • addresses can be used to link to the map application

Design with iPhone in Mind

From what I have gathered by reading the Apple iPhone Safari web developer docs, visiting different sites, and coding my own simple site with an iPhone in hand, there are three basic approaches to optimizing your site for the iPhone:

1. Keep it simple – KISS – to the limit!!!
2. detect iPhone with CSS, and deliver it optimized styles
3. detect iPhone with a script, and send it to an optimized HTML page/site

So, working backwards, starting from most resource-intensive solution and moving toward the simplest:

3. Detect iPhone, and send it to an optimized HTML site

The third method, detecting iPhone (specifically) with Javascript and sending it to a different HTML file, flies in the face of browser-independent coding and probably does not need to be employed by any site with a truly well-constructed front-end. However, for certain high-traffic sites accessed regularly by folks on the go, especially those wit confusing administrative interfaces loaded with widgets, feeds, and negligibly useful applications, it makes sense to put some resources toward developing a clean, simple intuitive front-end for iPhone users. Hello Facebook!

Facebook’s iPhone interface is accessible from any browser at iphone.facebook.com. The special iPhone login page, maximizes iPhone screen real estate by setting the viewport meta tag to 320 pixels wide (the actual design is liquid). From there, it is clear what your next step is, as a Facebook user (Log in — or secondarily register, or view the regular Facebook site)

Once you are logged into Facebook on iPhone, you come to another iPhone-optimized page, with friend updates front and center, and four basic navigation tabs. HTML, CSS, and Javascript are all optimized for the iPhone. For me personally, Facebook is better on the iPhone, because that interface does the best job keeping the most dynamic (and presumably, most used) features front-and-center.

Twitter has employed a similar strategy, which you can read about on, and visit from http://twitterforiphone.com/ and on Laughing Squid. Twitter also offers a SSL login for mobile users. Other than that, I’m not certain whether a site as simple as Twitter truly needs a special iPhone interface.

2. Detect iPhone with CSS, and deliver it an optimized style

iPhone ignores handheld CSS media-type, but if you need to serve iPhone a special stylesheet, Apple explains how to do so, using conditional CSS: <link media="only screen and (max-device-width: 480px)" href="small-device.css" type="text/css" rel="stylesheet"> (3).

This seems to be a relatively elegant solution that I imagine would come in for example, if your CSS design is image-heavy and you want to serve iPhone users a more streamlined CSS, or if you want to make iPhone-friendly adjustments to your layout.

1. KISS it – to the limit!

Keep it simple, stupid is the alpha, and the omega of website design. Simple sites tend to be faster, more usable, and more degradable (backwards, forwards, and sideways). KISS is the technique I employed in my efforts to design an iPhone friendly site.

The site, 10volt.org, is a simple WordPress blog set up for evolt’s 10 year anniversary. I started building the site using iPhone viewer, and by the time I finished, I was viewing it on the iPhone. I wanted to build a content-focused site, and I wanted to be done in a weekend, so it needed to be simple and easy for me, my users, and user-agents.

The first thing I did in hopes of accommodating an iPhone was to change my blog theme (darknight2.0, a standard WordPress theme) to a fully liquid layout. I later realized that iPhone does fine even with fixed-width sites (again, defaulting to 980px view, unless instructed otherwise), especially CSS layouts that constrain and divide content areas reasonably. But since I’ve always loved liquid layouts, I kept it fluid. I was able to use most of the viewport by keeping body margins small, while horizontally restraining the wrapper div on large monitors with the max-width property.

Columns and Blocks

After some exploration I found that my favorite sites on iPhone are those that offer narrow columns for large quantities of text, and small boxes for small chunks of content. I totally loved perusing the front page of sites like alistapart.com and mandatemedia.com, where the iPhone could explore every box on the page, almost like using a magnifying glass to zoom into rooms in a dollhouse.

I later learned that not only are column and block layouts much easier to read on iPhone, they support iPhone navigation, too! When a user double taps on a CSS block-level element, Safari will zoom to fit the element in the screen, and center it.

For more in-depth reading (text-heavy content), it’s important to me not to have to shift text back and forth from the beginning to end of text lines. Columns need to be sufficiently narrow for text to be magnified to a readable level, while still fitting fully in the iPhone screen.

viva suck!

At some point it occurred to me that the the circa 1995 design of suck.com would be perfect for the iPhone. I was not disappointed. suck.com, currently being archived at its original location, is totally readable on iPhone! You don’t even have to turn it sideways! In fact, like Facebook, I found suck.com to be MORE readable on the iPhone than on a desktop — yet without creating an iPhone-only layout. And, bonus! suck.com is also the easiest URI to type into an iPhone. Thanks to iPhone, I’ve finally made it through an entire suck essay!

iPhoney: iPhone viewer for Mac developers

If you have OS 10.5 (I don’t) you can download iPhone SDK for free: http://developer.apple.com/iphone/. For Mac developers without iPhones or 10.5, there is the iPhone viewer: iPhoney. It is a slick open-source app and worth trying out, but the iPhone touch-screen is revolutionary in ways that a desktop app would be hard-pressed to really emulate.

In summary

Ultimately, this is how I’d focus my website development, with iPhone on the market, and others following behind:

1. KISS and use good practices for design and coding
2. Use viewport meta-tag to focus in on fixed-width layouts narrower than 980px
3. use column-and-block layout techniques
4. use conditional CSS if necessary to optimize a stylesheet for iPhone
5. test Javascript interface elements for touch-screen usability