Fluid Responsive Web Design & Development

Fluid Responsive Web Design & Development is an approach where all elements are sized using relative units, allowing the entire layout to scale smoothly with the viewport.

It's a convenient way for designers and developers to keep layouts visually consistent and true to the original design across screen sizes. You don't need to worry about a headline that looks fine on a large screen but breaks the layout on a smaller one.

Check out the demo - https://www.vettvangur.is/demo/#fluid-responsive-web-design-and-development - and resize the browser window to see how it works in practice. Watch how the page switches between modes and pay attention to the UI indicators - current breakpoint, media query range, viewport width, and website scale.

1px in design = 1rem in css - All elements - layout, typography, spacing - are built using rem units. Everything scales proportionally with the viewport, without manual calculations. When set up correctly, 1px in the design directly maps to 1rem in CSS.

1:1 preview - in this demo, the design width is 1800px. When the browser width matches that value, the Figma design and the website are in a true 1:1 scale and look identical.

Design widths & breakpoints - this setup uses three design widths - 393px for mobile, 1000px for tablet, 1800px for desktop; and four media query ranges - mobile when screen < 600px, tablet >= 600px, desktop >= 1024px, ultrawide >= 2100px. They can all be changed and adjusted to your needs.

3 instead of 2 - with this approach, you often don't even need a tablet design. Desktop and mobile are usually enough, which simplifies both design and development. Check the implementation examples - all those projects use only two design widths and three media query ranges.

Proportional scaling - within each media query range, the page scales relative to the active design width. The mobile design is 1:1 at 393px, tablet at 1000px, and desktop at 1800px.

Ultrawide scaling - when the viewport reaches 2100px, scaling locks to the ultrawide breakpoint. In this demo, that's 117%, meaning the 1800px design scales up to 2106px & then it stops.

Website looks the same on all screens - layout, elements and typography scale proportionally with the screen size. Spacing looks right, not too much or too little whitespace on screen.

Pixel-perfect scaling across devices - no jumping layouts, no awkward breakpoints. If there are supposed to be e.g. 4 cards in a grid row, there are going to be 4 cards in a grid row on both small or large desktop screen.

Simple codebase - no need for complex media queries, no additional layout versions to maintain - only 3 or even 2 media query ranges.

Fast prototyping - once the scaling works, you don't need to redesign for different screens.

Great for certain types of designs - good for art-focused sites, portfolios, minimal landing pages, immersive experiences. But not only for that - if the design is done right, with correctly sized typography & UI elements it can be used for any type of website where the main focus is on functionality.

Predictable behavior - everything responds proportionally to window resizing, animations and complex interactions are easier to implement.

Can lead to tiny or huge content - very small devices might show text that is too tiny, very large monitors might stretch text/images uncomfortably. But if designed correctly, it can be easily avoided.

Harder to handle extreme aspect ratios - ultrawide monitors (32:9), foldables, mobile devices in landscape - scaling might be a bit off.

Image crops - since images scale proportionally, you either need to load higher resolution photos or create more crops for in-between screen sizes. So here, even though the design width is 1800px and your photo is e.g. 600px wide, you have to take into account how the website scales up to ultrawide breakpoint - 117% here - so the photo should natively be 702px.

Accessibility - if implemented carelessly, font sizes can become too small for some users, and proportional scaling can conflict with user preferences like larger default font sizes or zooming. This can be mitigated with limits, clamping, or user-controlled scaling - which is demonstrated in this demo. Try to scale the site up or down - even though it's fluid it scales the same way as a regular one.

Scaling can feel "unnatural" - sometimes not everything should scale proportionally e.g. buttons becoming too big on desktop can feel clumsy. It always depends on the design and can be easily fixed with clamping values.

Here's how you set it up - example with 3 breakpoints:

html {
  --mobile-design-width: 393;
  --tablet-design-width: 768;
  --desktop-design-width: 1800;

  font-size: calc((100 / var(--mobile-design-width)) * 1vw);

  @include (width > 768px) { // tablet breakpoint
    font-size: calc((100 / var(--tablet-design-width)) * 1vw);
  }

  @include (width > 1024px) { // desktop breakpoint
    font-size: calc((100 / var(--desktop-design-width)) * 1vw);
  }

  @include (width >= 2100px) { // ultrawide breakpoint
    font-size: calc(((100 / var(--desktop-design-width)) * var(--ultrawide-breakpoint) / 16) * 0.01rem);
  }
}

And that's it. Everything scales perfectly and the design stays pixel-perfect across all screens. No awkward line breaks, no layout shifts, no weird spacing.

After setting it up, creating for example a headline:

h1 {
  font-size: 48rem;
}

It means it's going to be exactly 48px for every mobile/tablet/desktop design but it will scale proportionally when resizing the browser window.

Check out this CodePen example with some Lorem Ipsum layout to see how it works in practice - https://codepen.io/ccrch/pen/XJjKEyj

This approach was implemented on these websites:

• Apparatus
• Háreyðing
• Hómer
• Kalon
• KSÍ
• Nóa Konfekt
• Nóa Páska
• Ný ásýnd Vettvangs
• Vettvangur