<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=120091&amp;fmt=gif">

Mojo Musings

Our thoughts on everything from inbound sales and marketing to design, social media, and more

close
Written by Stephanie Fisher
on August 10, 2018

What is fluid website design?

Before we define "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 decade, these sites became very user unfriendly.

fluid-blog-post

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.

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 sites use media queries to control the design and content as it scales up or down on the device. They also have break points and set containers, so you have different "break points" for a variety of screen sizes; from extra small (mobile) to large (large desktop). Fluid websites do not have break points or set containers.

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

So, now we're getting a little more technical than I am comfortable with explaining and most likely you don't really care to go there either. Seeing is believing! Words do these websites no justice. You have to see them in action to understand the difference and why fluid design is special.

Many of these websites have very minimal navigation, moving elements on the homepage, and all use the entire width of the page. Click through the links below and check out how they perform.

6 Examples of Fluid Website Design

 

Endeavor Capital

Endeavour-Capital

Prodigo Solutions

Visit Prodigo Solutions' website (our client) and play around in the About section to see how the content and images rearrange themselves fluidly as you resize the browser window. In this example, I've captured the entire page. 

Prodigo-Solutions-Fluid-About

Nike

Nike-Fluid-Design

Uber

UBER-Fluid-Design

Born Group

BORN-Group-Fluid-Design

White Frontier Brewery

white-frontier-fluid-design

Which one is your favorite?

You may also like:

optimization, website, social media

Optimize Your Website for Social Media

Most blogs and the websites they live on today have social widgets that allow readers to share the website's content on ...

website, web design

4 Steps to Negotiating for a Domain Name

Let's say you are the owner of a business, Sandwiches Unlimited. You are an established business and you've been operati...

marketing, website, Inbound Marketing, web design

5 Reasons to Love Responsive Web Design

I remember it well. The year was 2009 and I was getting my first cell phone, an iPhone 3GS...the latest and greatest! Ye...