Accounting for resolution and aspect ratio changes

The aspect ratio of the iPad is drastically different from the iPhone. The widescreen format of the iPhone creates two drastically different formats, with the portrait view commanding a majority of application use cases and the landscape mode being relegated to mostly video consumption. In contrast, the iPad is well prepared for applications of all types in either orientation.

When working on the iPhone and iPod touch, we work strictly with a 320 pixel by 480 pixel resolution. The iPad was introduced with a 768 pixel by 1024 pixel resolution, creating a stark screen contrast upon first announcement.

Couple this change in display with a new screen aspect ratio, moving from 1:1.5 on the iPhone to 4:3 on the iPad, and it was soon apparent to designers that such technical changes would require drastic design changes.

Let's take a look at resolution and the important role that it will play in our interface.

Getting ready

For this recipe,...