Fixed vs Fluid Website Layouts
Monday, August 20th, 2007Categories: Web Usability
RSS Comment Feed
Trackback
This was a topic brought up by several commenters regarding the appropriate width and height for webpages during last week’s installment in the Web Usability Series. Some posters noted that “Designing web sites for fixed width is a pretty dated approach now-days.“, “Fluid will fit regardless of desktop or hand held device resolution.” and “Fluid templates will solve the problem of different screen resolutions.” I will approach this comparison as unbiased as I can, but personally, I do prefer designing websites with fixed layouts.
What is a Fluid or Fixed Website Layout?
Before we jump into the comparison, I’ll go over what each of them mean really quickly. A Fluid Layout is a website layout that expands (or compresses) with your browser window’s width. A Fixed Layout is a website layout where your website’s size doesn’t change as your browser window’s width increases or decreases. If you’re a more visual type of person, have a look at the following (very crude) examples:
Fluid Layout in an average screen resolution (1024×768)
Fluid Layout in an above-average screen resolution (1280×1024)
Fixed Layout in an average screen resolution (1024×768)
Fixed Layout in an above-average screen resolution (1280×1024)
Advantages of a Fluid Website Layout
- See more content - Users that buy big computer monitors, buy them for a reason. And that’s so they can see more and have more room to work with.
- Accommodate small viewing areas - Fluid website layouts make it easy for you to build for users using mobile devices, users with small monitor resolutions (800×600) or users that just don’t have their browser sized up to its maximum.
- Website printing is easier - You have one less stylesheet to make for making sure your website looks decent when printed.
- Never have to scroll sideways - Mentioned as being one of the biggest pet peeves of users, when your layout is fluid, you’ll rarely have to have a side scrollbar.
Advantages of a Fixed Website Layout
- Know exactly how your website will look for everyone - Some designers are very meticulous about their designs and don’t want them stretched or skewed, it could throw off navigation/content ratios.
- Prevent Long Line Lengths - Long line lengths hinder readability (how easy something is to read). If your content expands on a wide scale, users might be annoyed have to shrink their browser so they can feel comfortable reading your content.
- Prevent Overwhelming the User with Content - Let’s face it, having a big monitor and having lots of text can be over whelming for people with larger monitor resolutions: 1280×1024+
- CSS Overcomes Fixed Layout Disadvantages - Unfortunately, this means three times more work in the CSS department. You can develop custom printing and mobile CSS so that your website so that your website looks great in these formats.
What’s the solution?
Which layout someone prefers is often subjective. It usually depends on which factors the developer/designer/content-writer place the most value on.
Personally, the last point in the Advantages of Fixed Website Layouts: CSS Overcomes Fixed Layout Disadvantages puts Fixed Layouts as the winner vs Fluid Layouts. This may not be a surprise, I stated that I preferred them in the beginning.
That’s all for now, I’d love to hear the opinions of readers on the matter. 
IVA
Related Posts
- Hundredth Post - Looking Back On The Blog
- Devil’s Advocate - 6 Reasons To Keep Using Tables For Your Layout
- How To Optimize Your Body Text For Readability
August 20th, 2007 at 1:58 pm
Line length, font size, and readability are problems I am often faced with. However, I frequently find it easier to code a site for a specific resolution. There is no cut and dry answer, and not all advantages are created equal. That said, I believe that most sites should be liquid (as does Jakob Nielson). Here’s why:
Knowing what your site should look like all the time: You should know what it’ll look like in different situations anyway, and you can use css to reduce some of the variety.
Preventing long line lengths: This is the biggest problem in my opinion. However, just because a user has a 1920×1200 pixel resolution doesn’t mean they are/should be filling the entire thing up with a web page. I believe maximizing everything is primarily a Microsoft Windows behavior. If the line lengths are too long, at least the user has the option of reducing the browser’s width with a liquid layout. Liquid is also more accommodating is the site’s visitor is using a larger-than-normal font size.
There are sites that have columns that when there is space available move to the right, reducing the vertical scrolling. Otherwise they place themselves below the regular content. This is in my opinion the ideal situation.
At any rate, many of these line length issues will be solved (or at least delayed) once the CSS 3 spec is finished and implemented on web browsers. The column attribute will allow columns to be implemented easily without javascript hacks to equal out the column height.
In the end however, I believe that choosing one over the other depends on the content of the website. Photo galleries for instance look best with the more space they have. Also, search engine result pages are often superior with long ling lengths so that more results can be fit in vertically. Blogs on the hand look best with reduced widths.
August 22nd, 2007 at 9:20 am
Thanks for the lengthy comment Kevin.
Being a Adobe Flash guy myself, I often find it convenient and exponentially easier to design for a fixed layout.
As for site looking the same all the time, for example, if you have a graphical banner, sometimes it’s inconvenient to make sure it’s left side and/or right side of the graphic can expand as the monitor expands.
The sites where content is moved based on browser/window size, do you have a link to that resource? I imagine it has to do with Javascript figuring out browser/window size and changing style attributes, eg. changing display from inline to block.
I’m definitely looking forward to CSS 3 spec and agree with the suggestions you mentioned in your final paragraph.
Again, thanks for the comment Kevin, appreciate it buddy.
August 23rd, 2007 at 9:01 am
Your post + Kevins comment makes this an interesting topic. It is highly essential that the site looks consistent. And when I say consistent, I also mean the issues like: When you goto another page on the same site, and you notice this ‘nudge’ or some of the content move.
Remember the old days when there wasn’t any CSS ? Oh man. Anyway, I do prefer a fixed layout. Most people with widescreen monitors and high resolutions usually work in window mode anyway. Unless they are doing heavy duty stuff that requires alot of real estate - like 3D, or post production.
August 23rd, 2007 at 8:47 pm
Xeos, please don’t mention font tags, I might get a hernia.
Anyways, I am working on a slight redesign/tweak. I’ll be honest, when I did this template (really quick) i didn’t know the limitations/options in WordPress. Now I’m pretty aware of what’s going on, so I can afford to do something a little cooky.
August 25th, 2007 at 12:09 pm
[…] Fixed vs. Fluid Layouts from Patrick Burt. This article covers the differences between the two different styles of layout, with the advantages of each. […]
November 27th, 2007 at 8:45 am
[…] more of it at Fixed vs Fluid Website Layouts and do you see why this affects your post […]
April 3rd, 2008 at 10:22 am
Well, this is an interesting topic. I prefer the fixed size. A website is merely a marketing tool. There are lots of debates but when it comes down to it even if you are selling products directly the site is there for a marketing purpose. Now, if you come at it from a marketing perpective you want to keep the look to be the overal experience that was intended. I have not seen a fluid/liquid layout that actually does this. For example, on this sit the article whould be about 1/3 the size (hieght wize) and the comments would be very tiny looking. Giving the website a baron and laking feeling. I am sure not what the author would want to portray.
It is just like movie, it has an aspect ratio because that is the way it is ment to be viewed. Sure some televisions will strech and pull an image but that is up to the end user. Much like what browsers are doing now with zoom. Anyway that is my 2 cents. The idea of fluid is great but when a site does go really big or small i have never seen one that looks good (or looks like what the designer would intend), there is always a general browser size that works best for any site. Which is why i think that people with large monitors don’t have the browsers in full screen. So why not just fix the size.
April 3rd, 2008 at 10:37 am
Hi Devman, thanks for the comment.
The fluid/liquid layouts I’ve seen were often the result of web developers rather then web designers. Although there are bare areas to the right and to the left of fixed layout websites, they don’t give a sense that the website is barren or lacking. Which I like.
June 13th, 2008 at 5:37 am
In fluid layouts you can solve the problem with line length by using css to give that div. a “max-width: 700px” (or whatever width suits you).
See the effect at the simple layout I ‘m experimenting with on my website.
June 13th, 2008 at 8:26 am
min-height as well as max-width, are not valid in all browsers iirc.