169 views
30. January at 15:50
CRCristian Ghita

Responsive design is dead. Long live fluid design!

I’ve been thinking a lot about this lately. For years, responsive design has been our go-to solution for crafting web experiences that adapt across devices. But with foldable screens, rollable displays, and dynamic viewports becoming more common, it feels like our old approach is starting to crack under the pressure.

Foldable devices don’t just resize — they reshape. They transform the way we interact with screens. Flipping, folding, and stretching make fixed breakpoints feel rigid and outdated. It’s becoming clear that if we want to create seamless, future-proof designs, fluid design is the way forward.

Image Description
responsive relies solely on breakpoints, fluid is continuously resizing. Foldable mockup credits due: https://www.behance.net/gallery/118766249/Free-Galaxy-Z-Flip-Mockup-Folding-Phone

Responsive vs. Fluid:

Let’s start with a quick refresher:

Responsive design adapts to fixed breakpoints, resizing layouts for specific screen sizes.

Fluid design focuses on flexibility. Instead of reacting just to predefined sizes, it adapts continuously to any screen shape or size, no matter how it stretches, folds, or rotates.

Adaptive design is a honorable mention and it consists in having separate layouts designed for each device. Although it still has some use-cases this is to be avoided generally, especially from a SEO perspective as mentioned here:

Serve the same HTML code on the same URL regardless of the users’ device (for example, desktop, tablet, mobile, non-visual browser), but can display the content differently based on the screen size.

For years, responsive design worked beautifully because we were designing for predictable devices. But with foldables (and what’s probably coming next) predictability is no longer on the table.

Foldables are challenging the rules

Foldable screens are introducing design scenarios we haven’t faced before:

Dual states: A foldable phone isn’t just one device but two. Closed, it’s a compact phone. Open it and it becomes a small tablet. Your layout has to work perfectly in both states, as well as during the transitions in between.

Dynamic viewports: The user might interact with your site on one panel, spread it across two, or partially fold the screen to multitask. Unlike fixed-width breakpoints, fluid layouts adapt naturally to these continuous transitions. To be fair, this used to also happen on desktop where resizing the browser window is common practice.

New behaviors: Users are already finding creative ways to interact with foldable (think multitasking apps side-by-side or “tent mode” for media). Your designs need to flex and adapt without breaking.

Image Description
Image credit: ZDNET/CNET/TCL

Best practices to integrate in the design process

Moving from responsive to fluid starts in the design phase. Here are some practical steps to rethink how you approach layouts:

Start with the box model

Most websites are structured around rectangular containers, whether it’s buttons, images, or blocks of text. In design tools like Figma, think about how elements will live within these boxes and adjust dynamically:

  • Group related content into logical rectangles.
  • Add consistent spacing and padding between boxes to reflect how CSS handles layout structures.
  • Plan for these containers to expand, shrink, or stack when the screen changes.

This approach not only makes your designs more fluid but also simplifies the handoff to developers or even help you to build them yourself (one example that comes to mind is the Figma to Webflow plugin workflow)

Leverage auto-layout in Figma

Figma’s auto-layout feature is a must-use for fluid design. It lets you create designs that automatically resize, stack, or rearrange based on available space. Some tips:

  • Use percentage-based spacing and padding where possible to mimic how HTML and CSS handle containers. Right now Figma doesn’t support this, but feel free to add a +1 here: https://forum.figma.com/t/use-percentage-for-size-variables/46409/46. There are a few tedious work-arounds but I have been putting off writing about how to manage the issue in the hopes that Figma will release this update. Let me know in the comments if you wish for me to do this.
  • Nest Auto-Layouts inside each other to create flexible, layered structures.
  • Test resizing your frames regularly to see how your design responds to different dimensions.

Plan for micro-interactions

Foldables thrive on transitions, and your designs should anticipate these moments:

  • Use prototype transitions in Figma to mimic how your design adapts to folding, expanding, or screen rotations.
  • Consider interactive states for components — think about how buttons, menus, or cards will behave as users fold or unfold their device.

Prioritize content hierarchy

Fluid design relies on flexible stacking, but not all content is created equal. Start by asking:

  • What’s the most important element? (This should stay prominent at all sizes.)
  • What can shrink, hide, or rearrange?

For example, in a hero section, your headline might remain prominent while the image scales down or becomes a background element. Plan these shifts during the design phase to ensure a smooth user experience.

  • Does it hurt the experience?

Text is fluid, but only up to a certain point. Think about a paragraph squished into a sidebar. Not so easy to read, right? Maybe text heavy layouts should re-consider fluidity, or maybe include hard-stop rules like adding “ch” units as a min-width on a paragraph.

Image Description
the auto-layout panel in Figma

Integrating CSS for fluid design

Once you’ve nailed the design, it’s time to bring it to life with CSS. Some key techniques to consider

1. Think in percentages, not pixels

Instead of fixed sizes, use percentages or relative units like em or vw. For example:

width: 50%;

max-width: 40ch;

This ensures your containers scale naturally while staying within logical boundaries.

2. Use modern CSS tools

Properties like clamp(), min(), and max() give you even more control over scaling. For example:

font-size: clamp(1rem, 2vw, 2.5rem);

This dynamically adjusts font sizes based on screen width while staying within your chosen limits.

🚧Update 10.01.2025 — Proceed With Caution!🚧

One reader pointed out a possible violation of the WCAG Success Criterion 1.4.4 while using the clamp() function! And he is absolutely right! You should always check your designs adhere to the WCAG. One of my resolutions for 2025 is to actually get more up to date with these standards for accessibility.

Anyway, long story short, should you avoid using the clamp() function? No, not really. Here is a useful resource that can help you make sure your parameters are set up right and don’t result in a red flag at your next accessibility audit. It’s a clamp() calculator born from the fantastic collaboration between these three extraordinary gentlemen: Maxwell BarvianZach Barvian and Adrian Roselli. At the bottom of the page there is also a link to documentation on how to achieve the same result with a Tailwind plugin (how great is that?).

*Here is a great article with more context on the subject. Give it a read if you have the time. It’s very interesting. Or not, you do you.*

3. Grid and flexbox for layouts

CSS Grid and Flexbox are ideal for fluid layouts. With a single line like flex-grow: 1;, you can make elements automatically adjust to available space. Grid adds even more precision, letting you define dynamic rows and columns.

4. Test transitions

Add smooth transitions to create a polished experience. For example, when a screen folds or expands, use transition properties to make content rearrangements feel natural and seamless.

The future of screens, beyond foldables

Foldable devices are just the beginning. Rollable displays, wearable tech, and even augmented reality interfaces are already on the horizon. Imagine designing for a display that rolls out from a smartwatch to a tablet, or a car dashboard that adapts to passengers. These aren’t sci-fi concepts anymore; but real possibilities.

Fluid design equips you to handle these emerging formats by focusing on adaptability, not constraints. It’s about designing systems that respond to whatever comes next because, let’s face it, the screens of tomorrow will be anything but predictable.

Image Description
Image credit: Samsung Display

Design for possibilities, not devices

It’s no longer enough to design for a checklist of devices. Instead, start designing for flexibility, adaptability, and user needs. By thinking in terms of content flow, hierarchy, and interaction, you can create experiences that feel seamless on any screen. Even the ones we haven’t imagined yet.

Fluid design isn’t just a technical shift, it’s a mindset. It’s about letting go of rigid frameworks and embracing the beauty of uncertainty. The future of design is flowing and dynamic so let’s design to keep up with it.

Behind the words — disclaimer:

English isn’t my first language, so to ensure my ideas are communicated clearly and efficiently, I use AI as a helpful writing assistant. However, every sentence in my articles is carefully curated, revised, and refined multiple times to reflect my own knowledge, beliefs, and insights. Rest assured, this isn’t a pile of AI-generated slop — it’s my genuine voice, polished for your reading experience! 😊

Originally published at medium.com

CR
Cristian Ghita

Cristian Ghita

Freelance CX & Brand Design Consultant / Art Director / Based in Europe

More Articles