Blog

SpinWeb is an Indianapolis-based digital agency, specializing in enterprise website design & digital marketing

6 Beautiful Examples of Fluid Website Design

Posted by Stephanie Fisher on 10/20/15 9:30 AM

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

 

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?

 A website evaluation toolkit for banks, credit unions and wealth management firms.

 

Topics: website, web design, Responsive design

Let's Talk

Ready to get started

Seamlessly expedite sustainable experiences whereas clicks-and-mortar e-tailers. Credibly create cooperative testing procedures with high-quality applications. Synergistically enable granular convergence whereas client-based convergence.