--- title: "iPhone Duo Design: Two Formats, Not Extra Breakpoints" description: "Apple’s iPhone Duo design guidance is simpler than the hardware looks: design closed portrait and open landscape, lean on native iOS components, and skip extra breakpoints for every pose. Closed portrait and open landscape are the two formats that cascade to the rest. Laptop..." publishDate: Mon Sep 21 2026 00:00:00 GMT+0000 (Coordinated Universal Time) author: Romain Penchenat language: en tags: ["iphone duo design","native ios components","adaptive foldable layouts","product design","foldable ux"] canonical: https://blog.romain.garden/blog/iphone-duo-design-two-formats-not-extra-breakpoints/ estimated-read-time-in-minutes: 7 --- Apple’s iPhone Duo design guidance is simpler than the hardware looks: design closed portrait and open landscape, lean on native iOS components, and skip extra breakpoints for every pose. A foldable can look like a design tax. Two screens. A hinge. A pile of poses that do not exist on a regular phone. I went through Apple’s documentation on **iPhone Duo design** — Apple’s first foldable — looking for what actually changes the work, and the answer is calmer than the hardware. You do not invent a third product. You design two formats you already know, you let **native iOS components** carry most of the adaptation, and you treat one pose as the real exception. iPhone Duo has an outer display that reads like a classic iPhone, a bit shorter and a bit wider, and an inner display that sits closer to iPad mini. Two screens, not two products. The complexity is in how people hold them. *** ## iPhone Duo Design Starts With Two Formats > **Design closed portrait and open landscape. Do not add extra breakpoints for every other pose.** Two screens still produce a lot of positions. Closed, you get portrait and landscape. Open, you get portrait and landscape again. Apple also lets the device sit partially open, like a book that is not flattened on the table. There is a laptop pose: folded about halfway, set on a table, one pane down and one pane raised — useful for taking photos or watching media. And there is an easel pose, where the phone is partly folded, the outer display stays in use, and the inner panes point at the table so the device can stand. That list is enough to scare a team into a breakpoint soup. Apple’s recommendation is the opposite. Design two primary formats, and let those layouts cascade: - **Closed, portrait** — the closest thing to a classic smartphone. - **Open, landscape** — the closest thing to a classic tablet. If the app is already solid on a phone, or already solid on a tablet in landscape, it should behave well on iPhone Duo. Apple does not want extra responsive breakpoints for the other modes. Use native components that adapt, or a few conditions tied to a specific mode. Think in modes, not in extra widths, and keep the focus on those two formats. The one **adaptive foldable layout** that does need a particular design pass is the laptop pose. Folded about 50% and parked on a table, the device splits into a keyboard-like zone on the surface and a raised screen. Apple’s rule is simple: put content on the upper display and controls on the lower one. The pane on the table is the keyboard. The pane that stands is the content. That split is obvious in video: picture on top, playback on the bottom. A music player can put the current track, lyrics, or extra context on the raised screen and keep controls within easy reach below. You get a stable device, a content surface that can take the space, and controls you can actually hit. Apple does not ask for that kind of custom work on the other poses. Everywhere else, stay fluid. *Laptop pose: content stands, controls sit* | | Raised screen | Table screen | | ----- | --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | Job | Content — The standing pane is the screen. Put what people came to look at here. | Controls — The pane on the table is the keyboard. Keep interaction close to the hands. | | Video | The video — A stable device is wasted if the picture shares the canvas with chrome. | Playback controls — Transport lives on the lower pane so the film can take the raised screen. | | Music | Track, lyrics, or extras — Use the raised screen for the song, the words, or complementary context. | Playback controls — Keep controls easy to hit while the content stays large and readable. | ## Native iOS Components Handle the Outer Display > **If you already ship the system tab bar and the standard back control, most Duo adaptation is already done.** The good news is mechanical. Native iPhone navigation — the classic tab bar, the usual back control in the top left — adapts almost by itself from a regular iPhone or iPad app onto iPhone Duo. Those same **native iOS components** also travel to iPad, Mac, and Apple Vision Pro. That is the time save for the team: one set of system pieces instead of a custom chassis for every device. The outer display is the place this shows up first. It is a bit shorter and a bit wider than a classic iPhone, which sounds awkward until the system parks navigation on a bar to the right. The remaining canvas gets roughly the same aspect ratio as a regular iPhone. Your app does not have to invent a new phone layout just because the glass is a different shape. That right-hand bar still needs a review. Push too much into it and items collapse behind a three-dot control, or another overflow button. More chrome in that strip usually means less discoverability. Test it. If navigation is custom — not one of the system patterns — it will not teleport onto that bar for you. You have to redesign it so it can live there. The audit is binary: native behaviors, leave them; custom chrome, plan the work. Layout on the outer display is the second pass. On a regular phone you often center the content. Here, that is the wrong default. On the left, the hinge needs an extra margin so copy does not sit tight against the fold. On the right, another margin protects the navigation strip and the round camera punch. Do not put important content behind either edge — no text, no interactive controls. You still own those zones. Images and backgrounds can run into them when you want the interface to feel immersive. Apple’s Calculator example goes further: an app with no navigation at all can take the full width, including the space usually reserved for system chrome. The safe areas are real. They are not a museum rope. Use them when there is a reason. **Outer display: stop centering by default** *The hinge and the camera need margin. Click a layout.* - **Centered, edge to edge** — The usual phone habit. On iPhone Duo, content gets tight against the hinge on the left and collides with navigation and the camera punch on the right. - **Offset with hinge and camera margins** (recommended) — Keep text and controls inside the readable field. Images and backgrounds can still bleed into the hinge and camera zones when you want the app to feel immersive. ## Adaptive Foldable Layouts Stay Predictable When Open > **Opening the phone should not switch the product. Same app, same features, more space used well.** Unfolded, the inner display is an iPad-class canvas, closer to iPad mini than to a full-size tablet. The first requirement is predictability. Opening the device cannot swap an app that does A for an app that does B. The content stays the same. You simply have more room. Apple points to two good uses of that room. One is faster navigation: a crowded tab bar can become a sidebar and cut the hops. The other is a more pleasant canvas — more visuals, two columns instead of one, more content on screen before anyone has to scroll. Those are the only two jobs. The goal is not to unlock extra features when the hinge opens. It is to make the features you already have more accessible, faster, and nicer to use. **Quick check** When someone opens iPhone Duo, what should change in your app? - New features that only exist on the inner display. - The same features, made faster, easier, and more pleasant to use. **(correct)** - A different product: closed does A, open does B. Predictability comes first. Extra space is for quicker navigation or a richer canvas — not a second feature set that appears when the hinge opens. iPhone Duo can also split two apps side by side. If your app sits on the right, navigation stays on the right. If the person moves it to the left, navigation follows, so the thumb can still reach it. That matters if you painted backgrounds or decorative work into the navigation zone: those visuals have to survive a flip from one edge to the other. The half-folded, book-like pose has one hard rule. The fold is a separator. Do not put content in the crease — it is hard to read and hard to use, in portrait and in landscape. Native components already avoid that region. Sheets and buttons move off the fold on their own. Your job is to use the two remaining panes well, including for navigation, instead of pretending the inner display is still one flat rectangle. None of this requires a new mental model if you already trust system components. A short review still does. Launch the iPhone Duo simulator from Xcode on a Mac and put the real app through the poses. A developer on the team can help with the setup. You will not have the physical object, but the behaviors are realistic enough to design against — which is the cheapest way to learn a device you do not own yet. If a pose is still hard to picture, Apple’s Design for iPhone Duo videos are the visual companion: explicit, and built for this exact problem. *** ## Final Thoughts The hardware looks new. The design system is built so you do not have to start over. **iPhone Duo design** rewards teams that already ship native patterns, and it punishes teams that treat every pose as a new breakpoint. Design the two familiar formats, give laptop mode its content-and-controls split, keep the open state predictable, and go sit with the simulator until the hinge feels ordinary. That is the whole job. *** ## FAQs ### Which two formats should you design for on iPhone Duo? Closed portrait, which is closest to a classic smartphone, and open landscape, which is closest to a classic tablet. Apple’s guidance is that those two layouts cascade to the other poses. ### Should you add extra breakpoints for every iPhone Duo pose? No. Apple recommends against extra responsive breakpoints for the other modes. Use native components that adapt, or a few mode-specific conditions, and keep the focus on closed portrait and open landscape. ### What is the only iPhone Duo pose that needs a special layout? Laptop mode: the phone folded about 50% and set on a table. Put content on the raised screen and controls on the pane that sits on the table — video on top with playback below, or track information and lyrics above the music controls. ### Should opening iPhone Duo add new features? No. The same app and the same features should be there closed and open. Extra space is for faster navigation, such as turning a tab bar into a sidebar, or a more pleasant canvas with more visuals or two columns.