October 17th, 2014

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).

writes about design & innovation.never goes in against a Sicilian when death is on the line.does it the hard way.ships.loves it when a plan comes together.rides down sweet trails.spends time with customers.pities the fool.makes hard things easy.finds product-market fit.