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.
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
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.
Which one is your favorite?