Choosing a Strategy for Your Mobile Web Design
Part of the iPhone & iPad Web Design For Dummies Cheat Sheet
People now view web pages on everything from tiny cellphone screens to projectors that light up the side of a barn. The constraints you face in mobile web design for the small iPhone screen can feel like painting Easter eggs in a straitjacket. And even seasoned professionals find designing mobile websites that look great on screens of every size and dimension challenging — even on the slick-looking iPhone screen.
One of the most exciting aspects of creating websites for the iPhone, iPad, and iPod touch is that they offer you a chance to completely rethink how you design for the Internet.
Design is highly subjective — you either love pink or you hate it and there's probably not much we can do to change your mind. But beyond the color choices and font preferences (which we leave up to you), here are two approaches to mobile web design for the iPhone and iPad:
Create multiple designs for optimal display on the iPhone, iPad, and iPod touch. This strategy enables you to make the best use of the screen whether it's in portrait or landscape mode. You can also take advantage of the larger iPad screen while sticking with a single-column design that works best on the iPhone and iPod touch. Creating all these designs is, of course, more labor intensive than creating one web page or mobile web page. If your audience uses mobile devices like the iPhone and iPad to visit your website, however, the work is worth the effort.
Designing one flexible page layout that can adapt to the size differences of an iPhone, iPad, and even laptops and the monitors people still keep on their desks. If you choose this mobile web design strategy, you don't have the flexibility that targeted designs offer. You can deliver a website that meets your visitors' needs and works well on a range of devices by sticking to a few guidelines. First, don't use Flash in your website design because Flash doesn't work in the iPhone or iPad. Also, you want your site to fill the screen on an iPad in portrait mode, so don't cut off the length of your page at 600 pixels. Instead, size the page to 980 pixels wide by at least 980 pixels long. Last but not least, when testing, view your site on the devices most important to your audience, making sure the images load quickly and look clear no matter what the sizes of your visitors' screens are.