Resize Graphics and Photos for iPad and iPhone
Aspect Ratios of Hand-Held Devices
Resources and Software for Creating Wireframes

Create One Web Design for All Devices

If the idea of designing an iPhone portrait and landscape web design and an iPad portrait and landscape design — just for one web page — has you feeling overwhelmed, here is some relief.

The Safari web browser does a good job of displaying most websites on the Internet, even if those sites aren’t specifically designed for these two devices. If you want the simplest option for any or all of your websites, you can create one design that’s “good enough” on the desktop as well as on the iPhone, iPad, and iPod touch.

If you decide to create just one design, make sure to follow these guidelines:

  • Don’t use Adobe Flash. Sorry — this is a bummer for Flash developers, but unless Apple changes its stance, anything designed in Flash doesn’t even work on an iOS device. As a result, don’t use Flash in any of your sites.

  • Create a design that’s no more than 980 pixels wide. Although the iPad displays designs as wide as 1024 pixels in landscape mode and only 768 in portrait mode, Safari automatically resizes your web page design if you create a page and don’t make it too wide.

    Keeping the number of pixels to between 960 and 980 is ideal if you want your site to automatically size effectively. Keep in mind, however, that automatically resizing images can lead to blurry text and changes to your designs that may leave them less than pixel-perfect.

  • Create designs that extend more than 600 pixels down the page. If your sites fit perfectly on a monitor with a resolution of 800 x 600 pixels, they’re probably too short to look good on an iPad. In this figure, you can see an example of the space left over in a web page that was designed to fit in fewer than 600 pixels from top to bottom.

    image0.jpg

If you’re looking for the “Goldilocks” design option (not too long and not too short), design your pages to look like the one shown in here. In this site for actor Yuval David, you see how the iPad displays a page that’s 970 pixels wide and nearly 2000 pixels from top to bottom.

image1.jpg

Notice that the entire design is automatically enlarged in landscape mode to fill the 1024-pixel width and is reduced to only 768 pixels wide to fit in portrait mode.

For the best results, test your web page designs on an iPad or iPhone to make sure that your front page fills the entire screen in portrait mode. Also ensure that text and images don’t become too blurry to read or look too distorted when they’re automatically enlarged or reduced.

blog comments powered by Disqus
Create a Semantic Structure for Web Pages
Change the Opacity of Colors in Web Design
Sketch Out a Site Map for Web Design
Web Design for the iPhone and iPad
Enhance Your Site with Custom Fonts
Advertisement

Inside Dummies.com