Getting Ready for Foldable Web and App Design

With more foldable models becoming available and sales steadily increasing, is it time for designers to start incorporating this new type of “fold” into their workflows? Here’s what you need to know to prepare for this new tech trend.

We’ve all been doing responsive design for so long that it’s not really something we have to think much about. But what happens when the literal face of smartphones changes?

Foldable smartphones may have been an easy-to-dismiss fad prior to 2020 when Samsung alone had entered the fray. But now? It’s become impossible to ignore this smartphone trend.

If you haven’t encountered this new style of smartphone yet, you will soon enough. Top phone manufacturers have either launched their own foldable smartphone models or have announced ones to come.

While we probably have a year or two before foldable technologies inundate the market, it would be wise to get acquainted with this new type of responsive design as it’s going to greatly complicate things. The guide below will help clear up some of the confusion over what’s going on and give you some tips on how to begin to adapt your workflow to the new smart tech.

What’s the Difference Between Folding and Flipping Smartphones?

There are two types of folding technologies currently emerging. I’m going to use Samsung as our visual example since it’s been leading the charge these last few years.

Fold phones are ones that fold vertically down the middle. So when they open, it’s like opening a book.

Here’s what the Samsung Galaxy Z Fold4 looks like:

When the phone is folded, one of the outer sides of the phone looks just like a regular smartphone. The other side looks like the typical backside of a phone—with holes for the camera.

When the phone is opened, both sides make up one-half of a connected screen. It’s essentially like they’ve created a compact, collapsible tablet.

A foldable phone can be opened and used in two different manners. It can be completely flat so that it mimics the larger surface of a tablet. It can also be so that the screens are angled away from one another, allowing for a dual screen experience.

Flip phones are ones that fold in half horizontally. These phones mimic the old school flip phone style. Like the Motorola Razr:

This style of flip phone was popular before the heyday of smartphones and responsive design though. This new era of flip phones is different.

Here is what the Samsung Galaxy Z Flip4 looks like:

The main phone screen when fully opened and flat looks just like a regular smartphone.

Unlike regular phones, however, a flip phone has a hinge that goes horizontally through the middle. This clamshell-style flip phone allows for more compact and convenient storage.

When closed, one side of the phone will display alerts, the time/date, etc. Think of it like a bigger version of a smartwatch that doesn’t have to be affixed to your wrist.

When opened, the two parts of the flip phone can be set at an angle the same way that foldable phones can. Or they can lay flat and mimic the screen of a traditional smartphone.

Who is Making Foldable Smartphones?

You’ve got to give Samsung a lot of credit for leading the way when it comes to foldable smartphones. They took a lot of heat as consumers quickly discovered the flaws in the construction of a totally new smartphone (more on that below).

That said, it seems like the biggest names in phones are now getting into the foldable game.

• Samsung’s Galaxy Z Fold5 and Flip5 are hotly anticipated. Tech insiders expect an announcement of the launch date to come soon.
• Google is expected to launch a foldable phone in summer 2023.
• Motorola has a modern version of its old Razr set to come out in 2023.
• OPPO is already selling the Find N2 Flip.
• Xiaomi has launched two foldable phones, the latest being the MIX Fold 2.

Apple is the only major phone brand that hasn’t officially put forward plans for a flip or fold smartphone. There’s tons of speculation about what’s going on. Many tech experts believe they have foldable tech in the works, but are waiting until it’s perfected before they put out their own version. However, we most likely won’t see anything from the company until 2024 or 2025, if that.

I think once the hardware issues get nailed down and designers master the foldable trend, we’re going to see some really funky things happen with smartphones. TCL and LG, for instance, have been playing around with super flexible phone designs, 360-degree screens, as well as flipping, folding, sliding and rolling hardware.

Is There Demand for Foldable Smartphones?

Samsung launched the Galaxy Z Fold in 2019. At the time, consumers were wary about the new smartphone design.

In this older Quora thread, the overwhelming consensus was that foldable smartphones were unnecessary.

Some admitted that while we don’t need a new type of smartphone to consider, the technology itself is exciting.

In just a few years, things have changed on that front. A 2022 report from IDC forecasted major growth in the foldable smartphone space.

Here’s a table from that report showing the projected growth of foldables within the next couple of years:

Foldable phones are by no means dominating the smartphone space—not back in 2021 nor will that be the case in 2025. But the industry is expecting a big leap in terms of adoption, from 0.5% of the smartphone market share to 1.8%.

Something else worth factoring in is the development of foldable tech in the Android vs. iOS space. IDC research director Nabila Popal explains:

“Although foldables did not capture a significant share of the market with 7.1 million devices shipped in 2021, they made up a third of the premium ($1,000+) Android market. So, it will not be long before foldables, just like 5G, become a signature and expected feature of the premium Android market.”

A 2021 YouGov survey found that roughly 50% of Americans are interested in owning a foldable phone.

What’s interesting to note is that Android users seem more excited about foldables than iOS users. I’m not sure if that’s because Samsung had a viable offering at the time or if there’s something about the typical Android user that’s drawn to this type of tech. Either way, it’ll be interesting to see what happens if or when Apple launches their own foldable.

What are the Concerns with Regard to Foldable Phones?

There are many reasons why smartphone users are interested in getting a foldable phone. According to the YouGov survey, the main reason is portability and convenience.

However, there are reasons why it’s taken a while for other brands to enter the market with foldable hardware. And why consumers have been slow to adopt the existing phone offerings.

Hardware Quality

According to the YouGov survey, this was users’ top concern. 50% were worried about the screen or hinge breaking.

As you can imagine, opening a phone as many times a day as we do can weaken even the toughest of hardware. But that’s the problem. Foldable phones can’t be built with the same type of durable screens as traditional smartphones. They need that flexibility to bend back and forth, which can make these screens more likely to dent, bulge, wrinkle or break.

The hinge is also a concern. If it’s not built sturdily enough, it will eventually give out. And the second that a user can no longer open their phone or prop it up, the whole thing becomes unusable.

Price

As you can imagine, if a phone manufacturer is going to make a foldable phone that works and looks good, it’s going to have to invest a ton of money in the research and production of it. And while consumer demand might be high enough, many customers are already reluctant to pay the high price of smartphones.

37% of YouGov respondents said that foldable smartphones were just too expensive. The Galaxy Z Fold4 is currently $1900+. Samsung’s traditional smartphone—the Galaxy S23—is a little under $1400. So there’s definitely a big difference there.

Design

While phone brands have been hard at work on coming up with the hardware and systems for foldable screens, UI and UX design has yet to catch up. Few websites and mobile apps are designed for what foldable screens can do—like the wide boxy layout of the fold phone or the dual screens that come about as a result of the partial fold.

So the UX isn’t great for foldable smartphone users right now.

It’s not the fault of designers for failing to anticipate this trend becoming a reality. It’s just that it hasn’t really been worth their while.

Look at the market share data above. It’s already difficult enough trying to design interfaces that look good on every type of available screen dimension and resolution that’s out there. If designers are going to switch up their workflows in order to accommodate foldable screens, the demand needs to be high.

New Considerations for Foldable Design

User demand is growing, thanks to all the hard work that’s been done to fix the known hardware issues. What’s more, industry sales are projected to increase within the next year or so. If Apple releases a foldable or flip phone of its own, you can expect those projections to get blown out of the water.

While I don’t believe that every web and app designer needs to incorporate foldable design into their workflows today, I do think now is the time to start getting ready for it. Here are some things to consider as you tackle this new type of design “fold”:

The Thumb Zone

You won’t have to worry too much about Fitt’s Law and the thumb zone changing on flip phones when they’re flat. On the bigger fold-out screens as well as the partially folded flip phone screens, however, you will.

In this photo from the Samsung website, the first two images are of the Samsung Galaxy Z Fold4. The third is of the S22 Ultra smartphone:

When the phone is closed, users will likely interact with the outer screen the same way they do a regular smartphone. So not much will change there. But the inner screen will be handled differently. This will require some user testing and observations to get a sense for how they’re likely to hold the phone (one-handed vs. two-handed) and to identify where their natural comfort zone is.

The Fold

A folding phone now means you have to design for a variety of experiences and use cases for a single device.

For instance, with the Z Fold, you’d have to design:

• The outer screen
• The flattened inner screen
• The partially folded inner screen

Again, this will require some research and testing to figure out the best way to design for these new devices. In some cases, it could be as simple as expanding or shrinking the design based on the screen size. Adding new breakpoints to your existing responsive design workflow won’t be too difficult (once it becomes worthwhile to do so, that is).

However, you’re now going to have to think about dual screens. Is there a way to break your user interface into two compatible portions?

For instance, let’s say you’re designing a mobile app to store recipes. When the phone is unfolded and flat, you can display the entire recipe page across the screen. When the phone is folded at an angle, though, could you set each screen to display a specific portion of the page—like the ingredients on one screen and the directions on another?

Best Use Cases

Foldable design isn’t going to be a trend that makes sense for every website and app—at least not for the time being. However, there are certain types of digital products where you should seriously start thinking about how to incorporate this into your workflow.

The YouGov survey asked respondents what drove their interest in these types of phones. Among the reasons were the following:

• 28% said they would be useful for multitasking.
• 25% said they’d be good for watching videos or playing video games.
• 13% said they’d be better for photography (looking at or editing).

I say we start there.

If you’re designing or developing apps or websites for productivity, think about how a larger smartphone screen or even a dual screen could enhance the user experience. This could be good for something like a calendar or booking app or even an email service, for instance.

Content-heavy apps and websites would also be good ones to target with foldable design. For instance:

• Video streaming platforms
• Gaming apps
• News sites or apps
• Blog aggregators
• Social media platforms

Users will no longer have to deal with struggling to view content on smaller screens, having to turn their phones to landscape mode, or scrolling excessively in order to see everything.

Your Workflow

The last thing to think about is what foldable design is going to do to your workflow. Not just how much longer it’s going to take you to develop digital products that can work on traditional and foldable smartphones, but the extra work involved.

In addition to modifying how many screens you design for, you’ll also need to incorporate rigorous user research, testing and feedback collection into your workflow.

In addition, you’ll be working with longer project timelines and higher costs. If you’re already having a hard time convincing clients to sign off on either of these factors, then making the move to foldable design will have to wait. Either that or you’ll need to start targeting a different type of client.

Wrapping up

With more phone manufacturers entering the foldable smartphone fray, it doesn’t appear that this is a passing fad that can be ignored. While it’s probably safe to hold on revamping your design process today, I’d suggest keeping an eye on Apple. The second they announce a foldable or flip phone, adoption is going to skyrocket on the iOS side of the market and will make this a much more worthwhile venture for designers to get involved with.