Adaptivity: Designing for iOS 8, iPad, iPhone 6 and 6+

Here’s a post I wrote up on Designer News, posted here for posterity.

tl;dr Think about proportions instead of pixels. Don’t worry about the autoscaling trickery on the 6+.

Apple has changed the game on how designing for iOS should be approached. The days of pixel precision are gone, and instead you should think about adaptivity. And specifically autolayout constraints, size classes, trait collections and measure stuff in points.

It’s responsive design (more or less)

You should consider the different screen sizes in points (basically 1x), and think about the screen proportions and sizing element similar to the way you would think about responsive web design (with trait collections being breakpoints). So the best way to design is to consider a element’s size as a relationship between absolute values (points) and proportional values (percentages). Example

• A header might contain two icons that are 15pt from the left edge of the screen, with 10pt of margin in between them…
• with a title sitting in a proportional area that stretches in the center of the screen…
• and an image on the right that is a fixed size and positioned 15pt from the right edge of the screen

Size classes are a way of thinking about how a device should be considered depending on its proportional dimensions and orientation. Right now, the spec provides classes for vertical and horizontal proportional sizes called “Regular” and “Compact”. Regular being the larger size and Compact being the smaller.

So when you design your app, it might be best to start with something that is fairly generic (to hammer this home, the default storyboard size in Xcode is a square) – that can then be adapted to each of the classes via proportional resizing.

Much like responsive design, you can also create exceptions for each combination of size classes. Each of these orientations (horizontal and vertical) are consider traits. And the display scale is consider a trait collection. So within a trait collection you can do very powerful things:

• determine where elements are placed using auto layout constraints
• modify visual aesthetics like margins and padding
• use different assets/sizes etc.

So instead of designing for specific point dimensions, I’d approach the problem by designing for a specific set of trait collections:

• iPhone in portrait
• iPhone in landscape
• Large iPhone in landscape (the 6+ has its own trait collection)
• iPad in portrait*
• iPad in landscape*

*Both views are part of the same trait collection, but you should also design for orientation.

Assets still need to be exported at different sizes, although you can get around that by using vectors in PDF and letting Xcode render the resulting images (this is the workflow we are moving towards).

It behooves you to watch all of the WWDC material around adaptivity. You get a lot for free in iOS 8 for universal support of the four collections.