How to Create iPad-Friendly Mobile Web Designs - dummies

How to Create iPad-Friendly Mobile Web Designs

Part of iPhone & iPad Web Design For Dummies Cheat Sheet

The iPad, with its big beautiful screen, may lead you to believe you don’t need to do anything special in your mobile web design, but the best web design techniques for the iPad are not the same as those for the desktop.

Although the iPad provides far more screen real estate than the iPhone, it still creates new challenges for mobile web designers. Remember the following when designing mobile websites for the iPad:

  • Design for both orientations: The ability to turn the iPad from landscape to portrait mode dramatically alters the screen space for your web designs.

  • Make the most of HTML5 and CSS 3: When you’re designing for the iPad, you don’t have to worry about all the web browsers still used on desktop computers, so you can take full advantage of the latest in these web design technologies.

  • Test iPad designs on an iPad: When you create content for the iPad, you’re probably using a machine that’s quite different from the iPad. Don’t test your work in the same place you develop it. You may still have to do most of the design and coding of your iPad sites while sitting at a desktop or laptop computer, but when you’re done, get up, stretch out, and go sit in a comfy chair to see how your website looks and works on an iPad.

Test your web page designs in different lighting situations. Take the iPad outside to see how your pages look in bright sunlight, and bring the iPad to bed with you to see how your mobile web design looks when you hide in the dark under the covers. (Don’t you just love not needing a flashlight to read on the iPad, the way we did when we wanted to stay up late to read books as children?)