Updated
Preparing Ribbons for iPhone Duo
More room for the things you want to keep close. The same familiar way to save them.
A restaurant link while you’re out. A booking PDF when you stop for coffee. A note with the details you need to check before you go. Ribbons brings those things together, ready for the next time you need them. With iPhone Duo, the space around them can change as you open, close, or turn your phone.
Our latest work makes more of that space: a Drawer sidebar when there’s room, cards arranged around the fold, and ways to move useful content between Ribbons and the app beside it.
Screenshot comparison placeholder
Your Ribbons, open and closed
Set up: Use the current development build on iPhone Duo, Light appearance and standard text size. Populate Ribbons with a sample packing note, photo, restaurant link and booking PDF.
- Capture the library on the closed outer display, with the library title, compact browsing controls and Add visible.
- Open the phone in landscape and capture the same library with the Drawer sidebar visible. Place the two full screenshots beside each other, labelled Closed and Open in landscape.
Before using this image: Keep the same content and appearance in both shots. Use the real sidebar from this build; the old assessment screenshots predate it.
duo-open-and-closed.png
One library, with room to adapt
iPhone Duo has an outer display for use while it’s closed and a larger inner display when it’s open. Apple’s design guidance for iPhone Duo encourages apps to adapt their existing layouts as the available space changes, keeping the experience familiar across both displays.
In our updated layout, a wide Ribbons window can show your Drawers beside the library. You can move between a trip’s bookings, restaurant links, and reference photos with the sidebar close at hand. A narrow window keeps the compact browsing controls. The available room determines the layout.
Narrower portrait windows give browsing and the selected item the full width in turn. Back returns to the library. Adaptive can fit three cards across a wide library view, then use fewer as the pane narrows or text grows. Wider windows can keep the library beside the preview, with enough room to read both.
Screenshot pair placeholder
Room to read in portrait
Set up: Use the open inner display in portrait, Light appearance and standard text size. Load the same sample library used for the other images, including the Kyoto weekend note. Dismiss the keyboard and any menus.
- Choose Adaptive and capture All Items across the open portrait window at standard text size, showing three complete readable card columns when they fit. Keep normal page margins and Add visible. An empty Preview pane should not squeeze the library beside it; do not resize or composite cards to manufacture three columns.
- Open Kyoto weekend and capture its title, body and inline image using the available width. Include Back as the only preview exit control. Label the panels Browse and Read a note; do not stretch or crop a landscape capture into portrait.
Before using this image: Confirm Back returns to the same library context. Rotate the selected note into landscape and back before using the images, checking that its selection and readable margins survive. In landscape, drag the library/preview divider in both directions: cards and the All Items heading must remain inside the library pane, with a single card column when narrow. Repeat at larger text sizes; these stills alone do not prove editing continuity.
duo-portrait-layout.png
Give each card a clear place
A photo or booking card becomes harder to read when it runs across the curved centre of a partially folded display. Our library and Drawer grids now use the space on either side of that fold, leaving a gap between the columns.
Apple describes this approach in Strike a pose with adaptive layouts on iPhone Duo. For Ribbons, it means arranging the cards within the room each side provides, including when the two sides have different amounts of usable space.
We’re also refining how cards reflow while a pane is resized. A narrow library pane should use one readable card column, even in landscape. Making it wider can bring more columns back. The space inside that pane matters as much as the space across the whole display.
Screenshot comparison placeholder
Cards on either side of the fold
Set up: Open a sample Lisbon Trip Drawer with at least 12 mixed notes, photos, links and PDFs. Use the automatic item layout and dismiss any sidebar overlay so the browsing pane is unobstructed.
- Capture the Drawer fully open, then partially folded vertically like a book. Keep the same visible group of items and capture the device frame so the fold position is clear.
- Place the two captures beside each other, labelled Flat and Book pose. Keep complete cards, their titles and the gap between columns visible.
Before using this image: Inspect the live layout first: no card should cross the reserved fold area. Do not paint in a gap, rearrange cards, or reuse the original crossing-the-fold capture as an after image.
duo-fold-aware-grid.png
Media previews can also sit beside their title, personal note, and details when there’s enough room within the preview pane. A narrower pane stacks the preview above those details, keeping the artwork useful rather than squeezing it into a thin column. A flat display doesn’t need an empty strip for an inactive fold. We’re checking these arrangements in book and tabletop positions as well as fully open.
Screenshot pair placeholder
A readable preview beside the library
Set up: On the open inner display, hide the Drawers sidebar and select the sample Banff National Park link. Keep the library and selected-item preview visible together, before opening the external website. Use standard text size and Light appearance.
- Capture the fully open device with the selected Banff card in the library and its artwork, title and details in the preview pane. Show the complete device frame and normal navigation.
- Capture the same selection in book pose. Label the captures Flat and Book pose. Let the real pane width determine whether artwork and details stack or sit beside one another; do not assemble the layout from separate screens.
Before using this image: Confirm the artwork has a useful width, the library cards stay within their pane, and the active fold does not cut through the preview. A stacked preview is expected when there is insufficient room for two readable columns. Do not use the earlier tiny-thumbnail layout as an after image.
duo-preview-and-details.png
Keep the task in hand
Opening your phone halfway through a packing note should let you carry on writing. Closing it while looking through a Drawer should keep the things you were browsing close by.
We’ve brought compact and expanded browsing into one navigation structure and added item-based scroll tracking. That gives the app a consistent place to keep your route and browsing position as its layout changes.
Notes need room to read and write, too. Our latest refinement keeps each note as one scrolling page inside its pane, with ordinary page margins. It removes an extra fold inset that left a large gap beside the text. This follows Apple’s guidance to preserve continuity for scrolling documents as the device folds.
The next checks are deliberately practical: the same search and filters, the same note draft and selection with the keyboard open, and the same PDF page and useful zoom after folding or rotating. These checks remain in progress.
Screenshot sequence placeholder
The same note through a display change
Set up: Open the sample Kyoto weekend note so its title, text and inline image can be compared. First check the fully open preview: normal page margins should replace the old large blank strip beside the text. Then type one sentence and select a few words with the software keyboard visible. Make a continuous recording to check the transition before choosing still frames.
- Take a frame while closed, then open and partially fold the phone without leaving the note or entering more text. Capture the same draft and selection again.
- Arrange the two frames in order, labelled Before opening and After opening. Keep the note title, edited sentence and keyboard visible; preserve the real selection and caret state.
Before using this image: Use this image only after confirming the draft, selection and editing focus survive, and Close saves once. Check the title and body share a consistent leading edge, with no extra hinge-sized blank strip inside the note pane. Two unrelated screenshots cannot establish continuity.
duo-note-continuity.png
Useful things, ready for the app beside you
A natural use for the open display is collecting a reference from Safari or bringing a saved reply into an email. We’ve added outgoing dragging for saved notes, links, images, PDFs, and videos. File content needs to be downloaded to the device before it can be dragged out.
Incoming drops can now contain several supported items. They open a review before you tap Save, using the current Drawer as the starting destination when you drop there. If part of a batch fails to save, retry continues with the remaining items. Share and Copy stay available too.
We’re checking actual transfers with compatible apps, including Safari, Mail, and Photos, before calling this workflow ready.
Screenshot pair placeholder
Collect a few things, then reuse one
Set up: Use the fully open inner display in side-by-side multitasking. Prepare three sample photos and one locally downloaded PDF in the Lisbon Trip Drawer.
- Drag the three selected photos from Photos into the Drawer. Capture Ribbons’ review with all three previews, the Lisbon Trip destination and Save visible before saving.
- Beside Mail, drag the saved PDF into a new unsent email. Capture the delivered attachment with its filename and the source Drawer still visible. Label the panels Review before saving and Reuse in Mail.
Before using this image: Verify the batch saves exactly three items and the attachment opens. Keep the email unsent. Capture a completed transfer rather than adding a decorative drag arrow or attachment.
duo-cross-app-drag.png
A sharing preview that leaves room to save
The familiar saving flow stays the same: use Share, choose Ribbons, review the item, and tap Save. A title, note, and Drawer are optional. Website artwork can finish loading later; saving the available link doesn’t wait for it.
The sharing preview has a sizing budget that leaves room for the destination and Save. Opening the keyboard doesn’t shrink the artwork again. With larger text, the review can scroll while Save keeps its own area.
In the app, we’ve also adopted the system toolbar overflow and confirmation placements on supported iOS versions. We’re checking that Add, Back, Close, and Save remain easy to find in narrow windows and when controls move to the side. Our accessibility guide covers more of the work on larger text and named actions.
Screenshot comparison placeholder
A sharing review with room for larger text
Set up: Share the same public restaurant page from Safari to Ribbons. Use the narrow side-by-side layout on the inner display, first at standard text size and then Accessibility 3 in the device’s Larger Text settings.
- At standard size, capture the Save Item heading, complete preview artwork, Save to destination, optional-details control and Save action.
- At Accessibility 3, add the sample note Try this for dinner, dismiss the keyboard and scroll the review until the destination and Save are both visible. Label each screenshot with its text size.
Before using this image: Confirm Save stays reachable while scrolling and during keyboard use. Keep both screenshots at a readable size. Record artwork loading honestly and exclude personal browsing data.
duo-share-and-larger-text.png
Two Drawers, two contexts
On supported wide windows, Drawer menus now offer Open in New Window. The idea is simple: keep your trip bookings in one Ribbons window and your packing list in another, with each window holding its own browsing and search.
Two-window use is part of our remaining hands-on testing, including editing in one window and directing a Shortcut to the focused window. Availability depends on the system and window size; a new window isn’t offered on Duo’s outer display.
Screenshot placeholder
Two Drawers open together
Set up: On the fully open inner display, open Lisbon Trip in Ribbons. Use another Drawer’s Open in New Window action to open Home Ideas beside it.
- Search booking in Lisbon Trip and lamp in Home Ideas, with matching sample items available. Capture both Ribbons windows, both Drawer titles and both different search queries in one device screenshot.
- Keep each window’s navigation and normal controls visible so it is clear these are two live Ribbons windows.
Before using this image: Confirm searching or navigating in one window leaves the other unchanged. Also test a note draft and focused-window Shortcut delivery before describing those behaviours as verified.
duo-two-drawers.png
What we’re checking next
Automated layout and capture checks have passed. We’re following those with everyday tasks across the closed, open, book, and tabletop positions, and with Ribbons on either side of another app:
- Browse a populated Drawer, search, open an item, and return to the same context after folding.
- Edit a note and read a long PDF, checking the draft, selection, page, and zoom through display changes.
- Share from Safari, Photos, and Files; drag content between apps; and work in two Ribbons windows.
- Repeat the core actions with larger text, VoiceOver, and dark appearance, with Share and Copy available alongside dragging.
We’ll update this article with screenshots and confirmed results as those checks finish. If a control is hard to reach or content is difficult to read in your build, let us know which task you were trying, the phone’s position, and which Ribbons version you used.
The Apple guidance behind the work
You don’t need to be a developer to use Ribbons. If you’re curious about the design decisions, these are useful starting points:
- Designing for iPhone Duo — Apple’s overview of the displays, device poses, and adaptable layouts.
- Preparing your app for iPhone Duo — Apple’s overview of resizing, display changes, and adapting controls.
- Prepare your app for iPhone Duo — a short introduction to flexible layouts, navigation, and space around system controls.
- Strike a pose with adaptive layouts on iPhone Duo — a closer look at how interfaces respond to the fold.
- Leverage multiple displays and scenes on iPhone Duo — Apple’s guidance on working beside another app and supporting multiple windows.