Fluid Vs Fixed Design: Which is Better?

387 Flares Filament.io 387 Flares ×

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.

Fluid Vs Fixed Design: Which is Better?

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.  Fluid Web Plage Layout

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.

Fixed Web Page LayoutAs 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, 2011Shannon 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.

If you enjoyed this post, make sure you subscribe to my RSS feed!

EvolutionaryDesigns.net runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

About James

James spends most of his free time using social media and loves to teach others about design, web development, CSS, SEO, and social media. He is addicted to Wordpress, social media, and technology. You can reach him on his, personal website, Do not forget to follow him on Twitter @element321

Loading Facebook Comments ...

Comments

  1. I love the fluid layout if did not show different on different screens. I wonder if it would be possible to create the zoom effect so that the page appeared same as when it was designed. But fixed design is a must to stay safe. Most of the blogs are using Fixed design though half of the screen width is wasted.
    Suresh Khanal recently posted..Should I buy WP Dollar or WPZon Builder for My Amazon Niche Sites?My Profile

  2. What about responsive design?

    I see it as a great combination between the options of fluid and fixed. It can be more like a series of fixed layouts rather then the full screen stretch that fluid payouts can give you.

    There are a lot of cool examples of where it works well:
    http://webdesignledger.com/inspiration/30-creative-examples-of-responsive-web-design

    • Hi Leah,

      I had looked into other layout methods when working on this article, but I decided that I would talk about other design layouts in the future and go into more detail if readers ask for more information on a topic. I do plan on doing an article about responsive design.
      James recently posted..Fluid Vs Fixed Design: Which is Better?My Profile

  3. I guess I didn’t realize there was a difference, as I am not a web designer. It does get frustrating as a viewer to have to do a horizontal scroll if I am on a computer that has a smaller screen, especially if it’s shopping. I would think you could adjust your design in a fixed design to allow for those conveniences—to not have to scroll.
    Jason Mitchev recently posted..Virginia Beach Dentist Choices GuideMy Profile

  4. I prefer fixed designs, if only for the fact that I find them easier to develop and fluid designs can alter the balance of your design considerably if people have large screens. Though it would cool if a user had a choice but then I guess that’s more work for the web designer.

Speak Your Mind

*

387 Flares Twitter 41 Facebook 2 Pin It Share 0 StumbleUpon 342 Google+ 2 Buffer 0 Email -- Filament.io 387 Flares ×