Designing for a fold on an iPhone

iPhone Duo ships on 23 October. The screen your app gets will keep changing shape.

Apple’s new phone, iPhone Duo, is the first foldable iPhone. It has a 5.4-inch outer display and a 7.6-inch inner display. Pre-orders begin on 16 October, it launches on 23 October, and the starting price is $1,999.

There are many things people are talking about, such as the cost and the hinge. However, the more interesting topic for designers is barely discussed.

For as long as there have been iPhones, you could count on the screen being a specific size. You worked with a few sizes and designed for them. iPhone Duo ends that.

The screen is no longer the device

I have not seen the device in person yet, but the most informative source for now is the developer guide by Céss White. Most of what’s in it is a design issue, not a technical one.

The core idea is easy to understand. Opening the phone gives your app more space, but that space keeps changing. The user can rotate it, partially fold it, or put another app beside yours. There are multiple poses with very different proportions. The device is still iPhone Duo, but the window your app works in is no longer fixed.

It is a new approach. Now you are designing for a range, not a screen.

For example, White shows how Mail’s layout changes with the size of the window. On a narrow screen, the user sees the inbox and the message one after another. As soon as there is more space, the inbox appears next to the message. The wider layout just removed navigation that was no longer necessary.

It also does not mean you need a separate design for each position. Additional columns appear when there is enough space and disappear when there is not.

A new zone in the middle

This is the real novelty here.

When iPhone Duo is partially folded, the centre of the inner screen becomes an area that is harder to see and interact with. The recommendation is to keep important interactive elements out of it. Content that scrolls, like an article, a feed or a list, can pass through it, because nobody is trying to tap anything fixed in the centre.

We got used to respecting the edges of the screen: the notch, the home indicator, the rounded corners. Now there is a line down the middle that deserves the same respect.

The edges change too. The camera and system controls create safe areas that can differ on each side and change as the phone rotates. Apple even provides APIs for this: ConcentricRectangle in SwiftUI and UICornerConfiguration in UIKit, so nearby UI follows the curve of the display instead of a standard corner radius.\

The system takes care of it, if you let it

This is where it ties in with a topic I write about a lot.

On iPhone Duo, toolbars and tab bars can move to the side of the display, freeing vertical space. If space runs out, the system pushes low-priority actions into an overflow menu. Sheets change how they’re presented and can move away from the fold instead of lying across it. Split views, popovers, menus and alerts behave the same way.

But only if you use the system components. Use them, and iOS does its job. Build your own, and you are responsible for the behaviour in every state, rotation and fold.

It’s the same lesson as the browser. The platform keeps taking over the mechanics of components. The custom components we’ve got used to building are exactly the ones that break first when the platform changes.

The web has the same problem

If you design for the web, this is not someone else’s story. Your website will also open on this device, in a browser window that changes shape the same way.

The tool for that already exists. Container queries let a component react to the space it actually has, instead of the screen size. Smashing Magazine recently noted that despite broad browser support, container queries remain underused and quite misunderstood. A folding iPhone is good motivation to finally use them.

What I would change in our process

• Design ranges, not sizes. Show how the screen behaves as it gets narrower or wider, not just two fixed sizes.
• Mark the fold. Treat the middle of the open screen like the edges: no important controls in that area.
• Spec the states. Open, closed, partially folded, rotated, and sharing the screen with another app. Each one can expose a different assumption.
• Use system components intentionally. Every custom component is your responsibility in all the states above.

Céss White ends with a nice test: open it, close it, fold it, rotate it, put another app next to it, and use the product normally.

References

• Apple unveils iPhone Duo. Apple Newsroom, 9 September 2026.
• The Apple foldable is real, it’s here, and it’s called iPhone Duo. AppleInsider, 9 September 2026.
• Is your app ready for iPhone Duo?. Céss White, Code with Beto, 15 September 2026.
• Stop treating CSS container queries like traditional media queries. Victor Ayomipo, Smashing Magazine, 16 September 2026.

Designing for a fold on an iPhone was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.