Fluid Vs Fixed Design: Which is Better?

Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

For as long I can remember, the question I am always asked or ask myself when working a design is, “Which is better? Fixed or fluid design?” This is a great question and the answer is it depends. Personally, I prefer a fixed design.

Today, I decided it was time to talk about fixed and fluid designs. I will go into short detail about what each layout is and the pros and cons of both. This article was written for those just getting into design or those that are not familiar with design layouts and are wanting to know more so they can get their site up and running and still look good.

Design Elements to Think About Before Deciding to Go with a Fluid or Fixed Design

Before getting more into fluid and fixed design, there are few things a designer needs to think about before designing a new layout.

• Not everyone browsing the internet has the same hardware and software settings.
• There is more than just one web browser available. Each browser can display a website differently. Make sure to test your finished design in the four major browsers.
• Its not that big of a deal, but some users may have some toolbars installed in their browsers. Some of these toolbars may block certain elements of your site.
• In my opinion, screen resolution is the most important thing to remember when designing a new layout. Test your design with different resolutions and see what it will look like.
• Some people will browse the web with their browser not fully maximized. What does your design look like if they are using the browser at different window sizes?

What is Fluid Design?

A fluid design, is a type of website layout design where most of the elements that make up the site will adjust to the users screen resolution (screen size). These layouts will use percentage widths for all its containers and columns. 

Pros of using a Fluid Design

As you can see from this screenshot of Evolutionary Designs it has a fluid layout set, it stretches everything out. You loose the background, the columns are stretched to across the screen, and the floating icons are setting on the content. Its not very attractive.

Check out the pros and cons before deciding if you want to use fluid or fixed layouts on your site.

• In most cases, the amount of extra white will look the same in most screen resolutions
• Most design layouts will look the same in modern web browsers. NOTE – IE 6, will look different than modern browser. Lucky for us, IE6 is no longer supported! Or should say it won’t support much longer.
• Fluid designs is more likely to adjust to a users hardware and software settings.
• If designed right, a fluid web page layout will eliminate horizontal scrolling when a fluid layout is viewed by smaller screen resolutions.

Cons of Using a Fluid Design

• With today’s large screen resolutions, readers will see more white space than content.
• Sometime images with fixed widths may display incorrectly on different resolutions. After testing you may have add extra widths for different screen resolutions.
• What I find most annoying when using a fluid design, is not being able to test all the possible screen resolutions and monitor sizes. There have been times, when I tested a design on variety of screen resolutions and browsers and I thought they looked good. Then loaded the page on an old dinosaur of a computer with a tiny low resolution monitor to the final testing and it looked bad. At that point, I had to decide, if this was going to be a major issue for the readers or will be ok. Some sites its not that big of a deal but on others, it is.

What is Fixed Design Fixed Design

With a fixed design, the layout has a set of fixed widths instead of percentages. Most designers, including myself, prefer fixed layouts. That is because, they have some control of how a layout will look on most browsers and screen resolutions.

As you can see from this fixed layout screenshot, it does not stretch across the screen, but its balanced and looks good.

Check out the pros and cons of a fixed layout.

Pros of Using a Fixed Design

• You do not need to worry about min-width or max-width properties. NOTE – These properties may not even work in some browsers.
• With fixed layouts, websites designed for low resolution, the content is still legible. But does it look? Think about this and test it to see how good it really looks.
• You do not have to worry about fixed-width content looking different browsers. All browsers will read the widths the same.
• Fixed widths are easier to customize. If you need to change a column width. Then make the changes and make changes to the other columns to keep the overall layout measurements the same.

Cons of Using a Fixed Design

• May have issues with background images. You will have to use continuous patterns or use a graphic editor to fade the image into the back and set it so it doesn’t repeat.
• Sites that have large layouts may need a horizontal scroll bar for users using very low screen resolutions.
• With a fixed-width layout, large screen resolutions can cause unwanted white space. This can cause an unbalanced look (Rule of Thirds) to your site.

Final Thoughts

When I create a new layout, I generally create sites and choose templates that use a fixed layout. Fluid layout design has its uses and I have created fluid layouts in the past but I was never happy with the final results. So whenever someone asks “What’s better? Fluid or a Fixed layout design.” I will tell them that it all depends on the design, (this includes what clients want in their design and audience requirements.) But I prefer a design that is fixed, it doesn’t matter if I created or if I am just a reader on a site. I prefer to view sites with a fixed width.

Image Source: Water Drops

Edited: July 18, 2011 – Shannon Mølhave mentioned on Twitter: “It shouldn’t “depend on the design” but on the audience & context imo – Fluid vs. Fixed Design http://t.co/BNHct4e via @Element321 @mlane” Shannon make’s a great point and when I realized that I didn’t give more details in the last paragraph, I went back and gave a little more detail.  – Thanks Shannon.