How to Write Web Pages for the iPhone and Other Wireless Devices

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
While the iPhone supports Flash, many cell phones do not. 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.

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.