Basics Behind Building Web Pages for the iPhone
You may have seen the video that shows how the iPhone can rotate and enlarge Web pages. It can display any Web page at a glance or zoom in the text you are interested in reading. In a sense, because the iPhone uses Safari, Web designers should not have to do anything special to create a Web page that will run on the iPhone.
When building a Web page you need to think about who is going to see it and how they are going to see it. Some of the best websites 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.
Web Page Layout for iPhones
• Keep in mind that the screen is small.
Web pages that have manifold lean columns are going to work well again 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 reduce in size to fit a cell phone window.
• Separate pages into smaller chunks.
It could be very hard to read long segments of text on a cell phone, so putting them on manifold pages makes them very easy to read.
Links and Navigation on iPhones
• Do not keep your navigation at the very top of the screen.
There is nothing more irritating 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.
• The shorter the links are, the better.
It is very annoying to type a URL on a cell phone Even on the iPhone it’s tedious to type in long URLs. Keep them short.
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.