Web Design for the iPhone and iPad - dummies

Web Design for the iPhone and iPad

Web pages are now viewed on everything from tiny cellphone screens to projectors that can light up the side of a barn. The constraints you face when creating sites for the small iPhone screen leave many designers feeling as though they’re being asked to paint Easter eggs in a straitjacket.

Even seasoned professionals find it challenging to create websites that look great on screens of every size and dimension used to access the Internet.

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 to be done to change your mind. But beyond the color choices and font preferences (which are up to you), keep in mind a few design principles, and two approaches to web design:

  • Creating multiple designs for optimal display on the iPhone, iPad, and iPod touch.

  • Designing one flexible page layout that can adapt to the differences in size of iPhone, iPad, and even laptops and the monitors people still keep on their desks.

Along the way, look into these topics:

  • The design features and limitations of the screen sizes, resolutions, and aspect ratios of the iPhone, iPad, and iPod touch

  • How best to help users navigate your pages on a touch screen

  • The best practices for creating icons for the Home screen of the iPhone or iPad

Much of the rush into creating mobile multimedia is occurring because Apple’s devices are so well-equipped to display images, videos, and other forms of multimedia:

  • Screen size: The 3 1/2-inch screen on the iPhone — and especially the 9.7 inch screen on the iPad — make watching video an enjoyable experience.

  • Screen resolution: The 480 x 320 resolution of the original iPhone was high enough to allow videos to look good. The 1024 x 768 resolution of the iPad is the same as on a standard XGA computer monitor. Adherence to these standards makes videos display in much the same way as they do on regular desktop displays.

  • Internal storage: Like its predecessor, the iPod, the iPhone has gigabytes of memory. The 64 gigabytes (GB) of storage on the iPad rivals the amount on many netbooks. All these devices can store a season’s worth of House episodes, numerous podcasts or vodcasts (video podcasts), or enough music to fill a weekend at the beach.

  • Processor speed: The proprietary Apple ARM A4 processors in the iPhone and iPad are powerful enough to not only handle decompressing and streaming video but also to multitask and run other applications in the background.

  • Content access: Unlimited data plans allowed iPhone users to watch as many YouTube videos or access as many websites as they wanted, without having to fear the sight of their monthly bills from AT&T. (These plans have been discontinued, but their replacement plans are still decent.) The iTunes Store lets users move audio and videos on and off their devices by using an interface that even preschoolers can master.