Designing Web Pages for the iPhone

Make your Web page shine on the iPhone

Everyone has seen the commericals that showcase the iPhone screen’s capabilities to flip around, expand and zoom  in every which way imaginable to creatively display a web page. 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.

The iPhone uses Safari, which should not recquire any extra work from web designers to create a page that is compatible with the device. But, if you are looking to create a page that ”wows” its  iPhone viewers, instead of simply ”working”, there are some things you should consider.

When building a Web page you need to consider who is going to view it and how it is going to be viewed. Some of the best sites take into account what type of device the page is being viewed on, including resolution, color options and functions.

 

When testing and creating pages for iPhone compatibility, don’t forget …

-The more phones you can test on the better-   see for yourself what works. Test on as many  phones as you can to make sure your page’s look, feel and navigation is just right.

-Make your page 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 feature

-Build a wireless specific page - Make your wireless specific page highly available. Most people come to your home page, and if the link to your wireless page isn’t there, they’ll leave if the page if it is too difficult to use.

-The Iphone has a very small screen- The narrower the content is on your normal page, the less it will have to shrink to fit a cell phone window.

-Divide page content- It can be difficult to read long segments of text on a cell phone, so putting them on multiple pages makes it easier to read.

-The shorter the links, the better- If you’ve ever tried to type in a URL on a cell phone, you’ll know it is a pain – keep the URL short as possible.

-Do not place navigation at the 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.

-Make your images 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.

 

Lastly, It is true that the iPhone can display most Web pages exactly as they would appear on a personal computer. But it is also possible to create Web sites and applications that look and work much like the iPhone’s built-in applications, and sites that do are the ones that will win the hearts and fingertips of iPhone users.

Apple has provided a set of resources for developers to use when designing for iPhones at:  http://developer.apple.com/iphone/program/

 

Tags: , , , ,

Leave a Reply