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. Fortunately, screens both smaller and larger than normal can be approached with fluid design.
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. Fortunately, screens both smaller and larger than normal can be approached with fluid design.
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. Fortunately, screens both smaller and larger than normal can be approached with fluid design.
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:
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:
Website windows that are 1000 pixels wide
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:
example of how fluid design scales website.
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. It’s rarely, if ever, applied to any professional website — designers now usually opt for fluid, adaptive, and/or responsive sites instead. It’s almost always worth the effort to use fluid instead of fixed designs
Adaptive Design vs. Fluid Design
Adaptive web design “is about creating interfaces that adapt to the user’s capabilities in terms of both form and function,” according to Aaron Gustafson, the founder of Easy Designs.
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. The tradeoff here is that adaptive designs take much more time to make than fluid ones, which may not be sustainable for individual website owners. This can be a deep topic, so feel free to read more about it in one of our articles.
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 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.
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.
The Benefits of Fluid Design
Obviously, the main benefit of fluid design is the ability to display a website properly on any screen size, and this is especially important for mobile users. Why is this so important for mobile users? Well, according to Pew Research, 85% of Americans own a smartphone, and even 15% of American adults are “smartphone-only” internet users. This means a lot of mobile internet users are out there, and designing websites with them in mind will only become more important as time goes on.
If thinking from the perspective of Search Engine Optimization (SEO), then you would also benefit from knowing that Google does something called mobile-first indexing. This means that Google makes sure the top search results are mobile-friendly. In order to ensure your site is a top search result, your site needs to be mobile-friendly.
Finally, another benefit is that fluid layouts tend to load fast. The reason is that there’s not many adjustments to make in the positioning and sizing of elements when they’re loaded. Performance is often an extremely important metric, so this benefit is nothing to gloss over if that’s what you care about.
