What Is Fluid Design and How Is It Used on Websites?

The rising popularity of smartphones and tablets has left web designers with quite a challenge — to create online experiences that not only display in a standard browser window, but also on screens a fraction of the size.

“Why not just shrink it down?” a younger, more naive version of myself might have asked. “Just take the desktop version and make it smaller. Problem solved!” If only it were that simple...

In reality, every successful website needs to be planned with mobile users in mind. There are now even web development frameworks that prioritize mobile interfaces. Most online businesses can’t afford to lose mobile users with poor design and usability.

And it’s not just smaller screens either we need to worry about — viewports (the area on the screen that displays the web page) are expanding in the other direction too, thanks to wider desktops and smart TVs. So, what solutions do we have to accommodate for the range of screen shapes and sizes?

In this post, we’ll explore one way to approach this problem, fluid web design. You’ll learn what fluid design is, how it works, and how it sizes up with other designs, so, you can decide the best way to scale your web pages and the elements inside them.

Let’s imagine a website with three adjacent elements, one with a width set to 50% and two smaller elements with widths of 20% (for this demonstration, heights are unimportant). Let’s also put some margins between them.

When displayed in a browser window 1000 pixels wide, the website looks like this:

The width of each element in pixels is based on the 1000 px width of the viewport.

When we shrink the browser window to just 600 px, a fluid design scales these elements proportionally:

Fluid design ensures that a website always looks similar in layout regardless of the screen. A consistent layout benefits the user experience while ensuring usability for as many visitors as possible.

Fluid Grids in Web Design

Fluid grids are a common implementation of the fluid design approach. A fluid grid breaks down the width of the page into several equally sized and spaced columns. Page content is placed according to these columns.

When the viewport expands horizontally, each fluid column expands accordingly, as does the content within the columns:

Image Source

Grids are a widespread layout for structuring page content in a digestible way, and applying fluid principles to grids is one way of making grids suitable for different screens.

However, fluid design isn’t the only approach — let’s compare it with three other common layout designs: fixed, adaptive, and responsive.

Fixed Design vs. Fluid Design

Layouts that follow a fixed design do not conform to the viewport size. Unlike those in fluid designs and fluid grids, elements in a fixed layout are set to specific pixel widths, and these widths do not change by device or screen size.

Fixed design has lost favor among designers for its lack of flexibility and user-friendliness across devices. You’d be hard-pressed to find it applied to any professional website — designers now usually for fluid, adaptive, and/or responsive sites instead. In most cases, it’s worth the effort rather than stick to fixed sizes.

Adaptive Design vs. Fluid Design

Fluid layouts help make websites more usable, but they lack the fine-tuned control of adaptive design. In the adaptive approach, designers create multiple separate website layouts for specific screen widths, the goal being to cater to multiple specific devices. So, a website might have a separate layout design for viewing on desktop, tablet, and smartphone.

Web designers achieve adaptive design with media queries, a feature of CSS that detects properties of the user’s device including screen dimensions. The media query reads the screen size, then selects the best-suited fixed layout from multiple fixed layout options.

Whereas fluid designs might look clunky on very large or very small screens, adaptive design lets us make more precise layouts for specific devices. You don’t need to worry about a poor user experience if you account for any device they use.

The tradeoff here, perhaps obviously, is that adaptive designs take much more time to make than fluid ones. Essentially, you’re creating multiple layouts rather than a single dynamic layout, so this approach may not be sustainable for individual website owners to pull off, especially as new devices enter the market.

Responsive Design vs. Fluid Design

You might have heard the term “responsive” to describe any website that adjusts its layout for different devices. In this sense, both fluid and adaptive designs are technically “responsive.”

However, the terminology becomes a bit confusing here — “responsive” can also refer to a particular way of making these adjustments. Here I’ll be discussing responsive design in the latter sense.

A responsive design layout is a single layout applied to a web page that reformats and resizes elements based on breakpoints. A breakpoint is a specific viewport width value (in pixels) that triggers a change in the website layout. Breakpoints are set in CSS with media queries.

Unlike fluid design, responsive websites use breakpoints to rearrange or eliminate elements on a page, instead of simply resizing them. Therefore, a responsive layout might appear quite different on a desktop versus a tablet versus or a smartphone.

Take the responsive website for the clothing brand Kotn, for example. Its breakpoints are set to 960 px and 560 px. Notice the effects of these breakpoints as I shrink the browser window.

Image Source

There’s more going on here than just shrinking widths of elements, though that is part of the design as well. But also, the content itself is changing

Responsive designs are the go-to for business websites with content-rich, highly interactive pages. Though they take more work to implement than purely fluid pages, a responsive design ensures that text, media, and interaction elements look great at any viewing width, especially when simply shrinking page elements width-wise doesn’t guarantee good usability or aesthetics.

When Should You Use Fluid Design?

Fluid design isn’t a one-size-fits-all solution, nor is responsive or adaptive design. These methods don’t have to be used in isolation, either — principles from any of them can be combined to improve the mobile experience.

When considering a fluid design, you should think about:

• Audience metrics: Tracking tools like Google Analytics can segment your traffic by desktop, tablet, and mobile. Use metrics to inform where you put your design resources.
• Site content: If your site is relatively light on text, media, and interactive features, you can get away with a purely fluid design on some or all pages. Otherwise, it’s better to incorporate adaptive and responsive principles. Mapping your layout with wireframes is helpful in this phase.
• Resources: Because of their relative simplicity, fluid designs generally take less time, money, and effort to incorporate from scratch. However, website builders with out-of-the-box responsive page templates have made complex responsive pages more attainable for those lacking the design chops.

Lastly, if you incorporate fluid elements on your pages, test your site on a range of screen sizes, from smartphone to a large desktop browser window. Without specific instructions for how to accommodate specific dimensions, a purely fluid approach might not perfect your UX. But, it can get you pretty close.