You are here

Fixed versus fluid width layout design

Designers and clients will at some stage find themselves asking or being asked "Fixed or fluid width design?" The question is nothing new but has the answer been found yet? There are pros and cons of both methods, so which one is right?

Youtube website screenshot

Fixed website layout

No matter what screen resolution, browser window size, or device orientation,  a fixed width layout will always remain the same size. It is important to note that on handheld devices such as smart phones and tablets, the browser will zoom the viewing area in our out so the page fits the width of the screen depending on orientation, but the width of the page still remains the same.

Wikipedia

Fluid layout

A fluid layout is designed so that the contents will adjust itself to use the maximum width of the browser window no matter what size the window is, screen resolution or orientation.

Hybrid layouts

A hybrid layout is a combination of fixed and fluid, where some elements on the page are fixed width (sidebars, side menus) whilst other fluid (body text). I consider hybrid layouts as fluid and will treat them as such for the remainder of this article.

Pros and cons of a fixed width layout

Pros

  • How you see it on the design concept is how it will look once turned into a live site.
  • Consistent appearance - no matter what screen resolution or window size, the layout will look the same.
  • By controlling the width of the layout and all the page elements in it, you can optimise the display of the content. For example, you can set the width of body text to a size that will allow for easiest reading (short widths being easier to read than long lines of text).
  • If you're using a grid framework, the design process will be much faster, and we all know that time equals money.
  • Fixed layouts have greater opportunity to effectively use white space. White space is good, it will draw the users eye to the content on the page, which is why they're on your site.
  • It is easier to apply the golden rule and the rule of thirds to designs and content.

Territory FM website screenshot

Cons

  • If you need to display very wide objects like data tables, ¬†they may not fit into a fixed width design.
  • Small browser window sizes (where the user doesn't maximise the window) will result in the need to scroll horizontally to view the page contents.
  • On really large monitors and window sizes (24" and above), the layout may have lots of empty space outside of the page content area. The counter argument to this is that a good designer will use that empty space to feature advertising or include value add imagery/design elements.

Pros and cons of a fluid width layout

Pros

  • Greater compatibility with varying screen resolutions and browser window size.
  • Can accommodate very wide objects without breaking the design.
  • Makes greater use of screen real estate i.e. the content will fill the entire window usually resulting in less scrolling.
  • Can fit more into a page if the content is laid out thoughtfully.
  • Suitable for mobile and tablet devices - fluid widths can potentially scale down better to suit the smaller resolutions of mobile devices.

Cons

  • Less control over final appearance. How it looks on your screen will most likely differ on somebody else's.
  • Too much room for content editors to go crazy. Content editors tend to want to use up as much real estate as possible when entering in content without considering usability or the technical ramifications. Too much content squeezed onto the page is also less likely to be absorbed by the user.
  • On larger screens the line length will be too long, resulting in poor readability and scanability. Long lines are harder to read whilst website users tend to scan the along and down the page in an F or an E pattern, meaning they will miss all the text on the right hand side of the page.
  • On really small screens, users may end up having to do a lot of scrolling to get to content further down.

Accessibility and usability

In terms of passing accessibility tests, as long as standards compliant HTML and best practice coding is used, then both layout methods are the same. A fixed width layout can be turned fluid and vice a versa because the cascading style sheets (CSS) control the appearance and not the actual markup.

The fluid width layout has the greater potential for device compatibility as the content will adjust itself to the width of the screen. With a fixed width layout, the design needs to be considered more carefully to ensure maximum compatibility i.e. a best fit needs to be determined.

In any case, the accessibility and usability of a website is largely determined by proper planning and analysis of the site architecture, functionality and of course the content itself. Whether fluid or fixed, the same development process needs to be undertaken with consideration given to which layout method is being used.

What's the trend on the web?

I had a look at some of the top English language websites in terms of traffic (according to Alexa) to see what layout type they were using.

Website

Type

Notes

Google (web search)

Fluid

Uses a min width of 817px and a max width of 1181px. You could say its a fixed-fluid layout.

Facebook

Fixed

981px wide.

Youtube

Fixed

970px wide.

Yahoo

Fixed

975px wide.

Wikipedia

Fluid

Really old design

Twitter

Fixed

763px wide.

MSN

Fixed

972px wide.

Amazon

Fluid

Min width 980px

LinkedIn

Fixed

920px.

Bing (web search)

Fixed

It is fixed-fluid but the difference in minimum and maximum widths is so small I'll classify it is fixed width.

Looking at the figures, out of the 10 sites surveyed, 7 are fixed and 3 are fluid. Of the three fluid layouts Google has a minimum and maximum width of 817px and 1181px respectively and Amazon has a minimum width of 920px leaving Wikipedia as the only pure fluid width layout.

Twitter is the only anomaly of the fixed width designs, but that can be attributed to the nature of its micro-blog service.

Conclusion

Which one is better? They both have their pros and cons and there will be times where one method is more suitable than the other.

7 of the biggest websites in term of traffic use fixed layouts compared to 3 who use fluid. One can safely assume these websites have very large teams behind them and have most likely thought long and hard and spent a lot of money determining what layout method to use. Wikipedia hasn't changed its layout much, if at all, since it first began many years ago. What's the bet they would switch to fixed/fluid-fixed if they were to update their templates?

At Captovate we consider the fixed with layout the better option for the majority of cases. The greater ability to control the positioning of elements of the design goes a long way towards a successful website. By knowing exactly where elements of the page will sit, whether it be a heading, an image or a button, you can design the page to both look better whilst at the same time getting the site messages across clearer, the latter being the reason why users are on your website in the first place.