Adapting your app for iPhone Duo

Part 1 in the series "Adapting your app for iPhone Duo", based on Apple's Design for iPhone Duo talk.

1. Adapting your app for iPhone Duo
2. Adapting controls for iPhone Duo
3. Adapting content for iPhone Duo
4. Sheets and fold avoidance on iPhone Duo

iPhone Duo gives your app different spaces to work with as people open, close, or partially fold the device. In this article, we will focus on the essentials: size classes, layout margins, and safe area insets.

Six poses to consider

The design principles give us three states to consider: closed, fully open, and partially folded. Each state can be used in portrait or landscape, giving us six poses to consider when adapting an app.

• Closed in portrait and landscape.
• Fully open in portrait and landscape.
• Partially folded in portrait and landscape.

The Mail example below shows how the same app changes across these six poses. The content, columns, and controls adjust to the available space and the position of the fold.

You can easily support sarunw.com by checking out this sponsor.

Localization Buddy: Easiest way to localize and update App Store metadata.

Try it for Free

How to adapt your app to six poses

Six poses can feel like a lot of design variations to handle. But adapting to them boils down to two things we have had for years, even if we haven't paid much attention to them:

• Size classes.
• Layout margins and safe area insets.

Start with two size classes

Look at the six Mail layouts above: only open landscape and partially folded landscape switch to a two-column layout. The other four show the selected message on its own.

That gives us a simpler starting point: compact width and regular width. Compact width shows one column, while regular width has room for the inbox and selected message side by side.

Native components such as NavigationSplitView give us this adaptation for free. A split view can show columns side by side when space allows and automatically collapse into a single navigation stack at narrow size classes.

The goal is to make your app freely resizable. Focus on two main cases: compact and regular width.

You don't need to design a separate layout for every pose. The six poses are useful for checking how that layout behaves.

Build around layout margins and safe areas

Once we have the overall layout in place using size classes, there are two things to pay attention to for the content inside it: layout margins and horizontal safe area insets.

These are existing layout concepts. Layout margins provide spacing for your content, while safe areas help keep it clear of overlapping interface elements. Apple documents both in layoutMarginsGuide and Positioning content relative to the safe area.

When working on a traditional iPhone in portrait, we often focus on the top and bottom safe areas. It is easy to give the horizontal insets less attention.

On iPhone Duo, controls can sit along the side, so those horizontal insets become more noticeable. In the Mail example below, Apple highlights the layout margin on the left and the horizontal safe area inset on the right, where the controls sit.

Build your layout around these guides so content has room when controls move to a different edge.

You can easily support sarunw.com by checking out this sponsor.

Localization Buddy: Easiest way to localize and update App Store metadata.

Try it for Free

Summary

If you have limited time or resources, start with size classes and layout margins and safe area insets. Getting these two areas right should help your app feel at home on the new platform.

In the next article, we will look at how controls move around in different layouts and poses.