I recently redesigned an ISP management app where the Home screen is intentionally designed around a single iPhone display: connection status, billing, support, promotions, and navigation are arranged in a compact vertical hierarchy.
On iPhone Duo, simply expanding this layout would introduce a lot of empty space and make some of the cards unnecessarily large. But completely redesigning the Home screen for Duo could also make the experience inconsistent.
What would you recommend as the design approach here? Should we recompose the Home screen for the additional space, or is it sometimes better to intentionally keep a phone-optimized content width even when more space is available?
Hi @Angelica_Riddle,
When designing for iPhone Duo, avoid fixed widths, breakpoints, or metrics tied to specific device dimensions. Build your layouts using size classes, layout margins, and horizontal safe area insets to allow the existing layout to naturally expand based on the available space.
A compact width layout for the outer display and a regular width layout for the inner display provide the fundamental responsive structure across all device poses. Allow the existing layout to expand rather than reinventing a custom layout for every screen size.
Keep your app's functionality, state, and information hierarchy consistent as users move between displays. Recompose or expand content gracefully to utilize the additional width on the larger inner display without fragmenting the overall experience or introducing unnecessary inconsistencies.
Then, leverage built-in system components and containers such as split views, arrangement views, navigation stacks, and tab bars. These standard components automatically handle resizing, adapt to outer and inner displays, and gracefully manage reserved regions like the fold and camera occlusions.
Lastly, use Device Hub in Xcode to preview your app on iPhone Duo and test how it appears across its various poses and orientations. Verify that your interface scales fluidly and responds properly to layout constraints before publishing.
For more information, see Designing for iPhone Duo and Preparing your app for iPhone Duo.
Cheers,
Paris X Pinkney | WWDR | DTS Engineer
