Examples of Fluid Website Design

As you look at your website, does it appropriately adjust to fit the size of the screen? Does your website look great on desktop, on tablets, and on mobile? If your website adjusts well to different screen sizes, that means you have a fluid website design. 

If you are on an older website, there is a high likelihood that your website has a more fixed design. Not only is fixed design bad for the user, but a fixed design also hurts your ability to rank well in Google. If you aren’t sure if your website has a fixed of fluid website design, here are the major differences, the ways to determine if your website is fixed or fluid, and a few examples of fluid websites.

What is Fixed Design

Before we dive into fluid design, we have to take a step back and review another term: fixed widths.

The majority of older websites are built on static, fixed widths that don't react or respond to different screen sizes. This means the website is set to display at a fixed column width, like 900 pixels. Consequently, you can adjust your browser window or view the website on your phone and the site will stay "fixed" at that width. As the number of devices and screen sizes exploded over the past 15 years, these sites became very user-unfriendly.

Many newer websites are built on platforms that automatically incorporate mobile-responsive design (which we will touch more in a moment). If you have recently updated your website, you may have not ever considered that your website may not work well on mobile devices. 

If it’s been more than a decade since you last touched your website, there’s a chance your website isn’t designed with mobile responsiveness. Not only is a fixed website bad for the user, but Google has also prioritized mobile responsiveness as a part of their ranking algorithm. That means a bad website experience will result in poor rankings and poor rankings mean you won’t be found on Google.

Today, a fixed design need to go in order to find long-term business success. Pull up your website on your smartphone. If you have a pleasant experience that scales down to your screen, congrats! You don’t have a fixed layout. If your website doesn’t scale with the size of the screen, it’s likely you’ll need some website design and development help.

What is Fluid Design

Website design trends have solved the problem of multiple screen sizes in a few ways. One solution is fluid design and it is becoming more and more popular. Instead of fixed columns and widths, a fluid website is built on relative widths, grids, and percentages. This allows the website to scale up and down fluidly.

To give an example, let’s say you have three images next to each other on the screen. When you are building the page, you’d set up fluid grids with three columns. Then you can determine what percent of the web page you want each image to take up on screen. In this example, each image will take up the same amount of space on screen, so the percentage will be set to 33%. As a result, the images now always maintain the same layout design without sacrificing the user experience.

What's the Difference Between Responsive and Fluid Website Design?

You may have heard the term "responsive design" before and now you're wondering, what's the difference?

Responsive websites use CSS media queries to control the design and content as it scales up or down on the device. They also have breakpoints and set containers, so you have different "breakpoints" for a variety of screen sizes; from extra small (mobile) to large (large desktop).

To put that in layman’s terms, websites using responsive web design will eventually reconfigure the layout based on specific points where it deems the screen is too small. 

If you have a two-column section of your website, that simply means that when the screen gets too small, your website will show one column first (typically the left column) first. That’s why it’s important to look at your website on a mobile device to understand what content will show first.

As for how responsive design is different from fluid design, fluid websites do not have breakpoints or set containers. A fluid website will scale up and down with the size of the screen. Responsive design will adjust the layout of the website to fit (respond) to the size of the screen. Our web developer at Mojo says that:

"A fluid site is responsive, but not all responsive sites are fluid."

Fluid Website Design Examples:

Now that we have a clear understanding of the differences between fixed design, fluid design, and adaptive design, here are a few of our favorite websites that implement fluid design.

SPLI

ICUC

TaxPlanIQ

Array

OneAscent

Interested in learning more about how to create a website that will make you money?

Check out the website audit kit below!