We have to answer the major, burning technology question of the moment: Are we all about to have folding phones? (What, did you think it was going to be about AI?)
Apple’s new foldable iPhone, the iPhone Duo, is a device that, when unfolded, is nearly a tablet. Announced in September, it isn’t the first foldable device out there, but because it comes from Apple, it has the potential to capture consumer hearts and wallets in the U.S. in a way that other entrants have not yet done.
Today it’s a curiosity. But if it reaches scale, it could change how websites are designed, built and maintained.
EK Art Director Heather Magenta and VP of Technology Sez Giulian have been thinking about what foldable phones mean for web design, development, accessibility and maintenance. Here, they lay out the challenges they see coming and what website owners should prepare.
1. New specs demand new layouts
The new Duo has screen access in both the folded and opened positions. Unfolded, the new device’s inner display has a tablet-like viewing experience, with a much wider canvas than a typical smartphone.
For designers, that means extra work: new breakpoints, new comps, and decisions about what this larger layout should look like. For site owners, it’s an opportunity to revisit responsive behavior, especially in the 440-to-768-pixel range. Typically, most websites are designed around phones topping out at roughly 430 pixels and tablets starting around 768, leaving this middle ground largely untested.
From a development perspective, the challenge isn’t adding another breakpoint, since modern responsive websites should already accommodate a wide range of screen sizes. The real concern is how layouts behave when the available screen space changes while someone is using the site. Which is why…
2. New specs mean new interaction types
Since the same device can operate in multiple screen configurations — sometimes even changing while a visitor is actively using a website — developers will need to make sure buttons, navigation elements and forms remain easy to use across configurations.
For example, a visitor might be filling out a form or navigating a menu while the phone is closed, then open it to its full size, and the experience needs to adapt without them losing their place or interrupting what they’re doing.
Good development needs to account for both the available space and the way people actually use the device. That means paying closer attention to flexible layouts, navigation, forms and interactive components that can adjust dynamically, rather than relying on fixed screen dimensions.
Accessibility considerations, including touch target sizes, keyboard navigation and readable content, will also remain just as important.
3. Sharper screens, heavier pages
The Duo’s displays have about three times the pixel density of other devices. This means design teams will need to export images at appropriate resolutions, and responsive image handling will need to preserve sharpness across both of the Duo’s displays.
That creates a direct tradeoff for developers: Bigger image files mean longer load times, and slower pages cost you visitors and search rankings. Teams will need responsive images, modern formats and a careful asset pipeline, so Duo users get sharp images without everyone else downloading them too.
This is largely a performance and asset management challenge. Fortunately, many of the tools needed already exist. Responsive image techniques allow browsers to select appropriately sized images based on screen resolution and available space, while modern image formats can deliver better quality at smaller file sizes.
The priority is delivering the right assets without sacrificing performance. Development teams should also consider how background videos, animations and other media-heavy components perform on larger foldable displays, particularly when visitors are using mobile networks.
4. More configurations mean more QA
Development teams will need to test not only how pages look at different widths, but also what happens when a device transitions between them. Navigation menus, forms, carousels, popups and other interactive elements may behave differently when the screen changes mid-session.
Quality assurance is one of the areas where we’ll see the most immediate impact, Sez… says. We’re not necessarily building an entirely new experience, but we do need to test more scenarios to make sure the existing experience continues to work.
For website owners, this could mean modest increases in QA time during development, redesigns and ongoing maintenance.
5. Maintenance costs will increase
Every additional screen configuration creates more scenarios to consider when updating templates, adding features or troubleshooting issues.
That doesn’t mean websites will suddenly become significantly more expensive to maintain, but teams may need to expand their testing procedures and account for new device behaviors as adoption grows.
The key is building flexible components from the beginning; a well-structured design system and reusable components make it much easier to support new devices without creating separate solutions for each one. For website owners, that means that investing in adaptable technology today can help control development and maintenance costs tomorrow.
What should you do right now?
Is the Duo worth planning for, or is it a fad? Heather expects that, in the U.S., at least, it will feel like a novelty for the first year or two, much like the first all-touchscreen iPhone. Early adopters and influencers will carry it first, and their visibility will help pull it into the mainstream as it becomes more accessible. And just like that first revolutionary apple mobile device, Heather thinks the Duo will be everywhere before long.
So what should you, as a website owner, do right now?
Nothing needs a redesign tomorrow. Sez notes that flexible, standards-based development is already designed to accommodate emerging technologies. The sites most likely to struggle are those that rely heavily on fixed dimensions or layouts designed for only a handful of screen sizes.
But a few low-cost steps carried out by your design and dev teams now will make the shift easier, later:
- Add an in-between breakpoint, around tablet width, to your design system and test key layouts against it.
- Check how your templates reflow when the screen changes size mid-session.
- Review your image pipeline so high-density assets go only to screens that need them.
- Watch your analytics for foldable traffic, and time your next site refresh to when it becomes meaningful.
The foldable iPhone won’t rewrite web design overnight. But the sites that handle it gracefully will be the ones that started planning before it reached scale.
Want to talk about building future-proof websites? Let’s chat.
