Responsive Scaling Strategies: Liquid UI

Learn to choose and apply different responsive scaling strategies so your components and layouts adapt fluidly to any screen size.

info Quick Definition
Responsive Scaling Strategies define how interface elements behave when available space changes. It’s not just about resizing boxes, but deciding which elements grow, which stack, which disappear, and which maintain their original size to ensure usability on any device.

The Challenge of Infinite Screens

Today, we design for a 30mm smartwatch (Apple Watch) and a 49-inch curved monitor. We cannot design a screen for every width. We need a Scaling Strategy that is liquid and resilient.

There are three main approaches to managing interface scaling:

1. Adaptive Scaling (Fixed Breakpoints)

The design changes in “jumps” at specific points (breakpoints).

  • How it works: You have a design for mobile (375px), one for tablet (768px), and one for desktop (1440px). Between these points, the design is usually centered with fixed margins.
  • Advantage: Lots of visual control for the designer.
  • Cons: Sensation of abrupt “jumps” when resizing and lots of “dead” white space on intermediate screens.

2. Liquid Scaling (Fluid Scaling)

Elements stretch and shrink proportionally or following Intrinsic Sizing rules.

  • How it works: You use relative units (%, rem, vw/vh) instead of fixed pixels. The design adapts smoothly and continuously to every pixel of window width.
  • Advantage: Makes the most of all space on any screen.
  • Cons: If limits (max-width) are not set, lines of text can become too long and illegible on large monitors.

3. Reflow Scaling (Rearrangement)

Elements change their physical layout based on space.

  • How it works: The sidebar disappears under a hamburger icon, cards that were 3-in-a-row become 1-in-a-row, or buttons in a row become a column (Stacking).
  • Key Tool: Auto Layout “Wrap” in Figma or Flexbox in CSS.

Specific Strategies for Components

A. Fluid Typography Scaling (Fluid Type)

Use values that change according to screen width (e.g., clamp() in CSS) so titles grow smoothly on large monitors and shrink on mobiles, always ensuring a good visual hierarchy without abrupt jumps.

B. Image Proportionality (Aspect Ratio)

Ensure images maintain their aspect ratio (e.g., 16:9) ignoring the container’s width. Use the object-fit: cover property so the image always fills its space without distorting.

C. Information Density

On large screens, don’t just make things bigger. Take advantage of the space to show more useful information or advanced tools that are hidden on mobile (Progressive Disclosure).

How to Design for Scaling in Figma

Do not duplicate screens for every change. Use Constraints and Auto Layout capabilities:

  1. Design a component and stretch/shrink it in Figma.
  2. Observe which elements break when reaching a certain width.
  3. Set Fill Container rules so the component “understands” where it should grow and where it shouldn’t.
  4. Define Breakpoints only when the structure needs to change radically (reflow).

Mentor’s Tips

  • Design for the “Center” of the Bell Curve: Don’t obsess over the 320px mobile or the 5K monitor if 80% of your users use 13-inch laptops. Prioritize scaling for your audience’s most common sizes.
  • The Readability Law: The ideal width for a line of text is between 45 and 75 characters. If your liquid design makes text lines longer, add a container with max-width to curb scaling.
  • Try “Extreme Resizing”: Resize your browser window quickly from left to right. If you see overlapping or disappearing elements, your scaling strategy needs an adjustment in Gaps or Reflow.

Useful Resources and Tools

intrinsic-sizing layout-grid-vs-intrinsic auto-layout-constraints breakpoint-vs-container-queries visual-vs-dom-hierarchy