Resize Graphics and Photos for iPad and iPhone
Optimize Web Designs for the iPhone
Develop a Project Plan for Your Website

Aspect Ratios of Hand-Held Devices

When designing websites that will be displayed on iPhones and iPads, keep in mind aspect ratio — the ratio of the width to the height of an image or video. Aspect ratio is particularly important when you’re working with video. A standard TV displays video in 4:3 aspect ratio (or 1:1.33) — the nearly square format that generations of boob tube addicts know and love.

Basically, for every 4 pixels across, 3 pixels are down, so the standard-definition TV screen resolution is 640 x 480. Recently, HDTV has caused a move to the 16:9 aspect ratio (or 1:1.85), also referred to as widescreen, and a common resolution is 1280 x 720.

The aspect ratio of the iPhone is 3:2 (or 1:1.5), which isn’t even standard. The iPad is 4:3, just like a traditional television signal. To display a widescreen or HD image, both the iPhone and the iPad use the letterboxing technique, which places thin, black bars above and below the image.

In the figure, you see the effect of letterboxing when a video is played on a screen that does not fit the aspect ratio. Black bars appear at the top and bottom of this training video by author Janine Warner because the video does not fit the aspect ratio of the screen.

image0.jpg

On the iPhone, when viewing a standard 4:3 video, you can tap to expand the image to fill the space vertically — but all it does is snip off the edges on either side. If you’re working with still images that are dramatically cropped (such as in a panoramic landscape), users either will see a lot of blank space on the screen or have to scroll a lot.

blog comments powered by Disqus
How to Style Text with CSS 3
How to Add Drop Shadows to Box Elements
How Users Navigate in a Touch Screen World
How to Create a Website with HTML5
Insert Images into Page Designs for iPhone
Advertisement

Inside Dummies.com