Choosing Fixed Layout Over Fluid Layout

I had been using fluid designs over a couple of months until the big screens came into picture. The fluid designs became so drastically different on those big screens that I found all my imagined design going down the drain. The web site rendered itself in such an ugly manner that it came down to negative remarks of the big flat screen owner. So the ultimate question to me was, why did I choose a fluid layout in the first place?

Fixed Layout vs. Fluid Layout
Image Credit – mountaingoat

If you are bewildered about the fluid and fixed terminology then their concepts are somewhat self-explanatory:

Fixed Layout – The dimensions of blocks in your web design structure are defined by pixel length and not by percentages. The design gets defined by hard coding the pixel lengths. Such designs are displayed uniformly on screens of any resolution or size.

Fluid Layout – The dimensions are on the contrary made in such a manner that they become fluid. Its similar to the concept of water taking the shape of its container. The fluid designs take the shape of the resolution in which the design is being viewed.

After trying my hands on a fixed layout for designing a theme for Techtracer, I felt somewhat relaxed over my earlier efforts of going for a fluid scheme. I am feeling a necessity of sharing it with the readers of this blog, what pros and cons I consider for fluid and fixed layout when it comes to designing your web site from what I have gathered till now.

Fixed Layout vs Fluid Layout

A fixed layout as defined simply means that the length which you give for a certain area will remain the same no matter what. If that is the case, then I am happy because I know that the change in the resolution of size of the screen wont cause problems for my design.

But in case of a fluid layout the area widens on a big screen and if the screen is really huge then your area will be stretched like a rubber band. In short, the mood of the design is dampened. The main problematic area for a fluid layout is the rendering of text.

An Example

Suppose you are viewing the article 5 Rules For A Good Web Design in a 15″ screen of resolution 1024 x 768 then you would notice 7 lines of text in the first paragraph. But this design is built on the fixed layout so even if I view the same article on a wide screen then still it remains the same. But suppose the design was made with the fluid layout then you would have seen,

  • 10 to 12 lines on a resolution of 800×600 because of squeezing of content area
  • 2 lines probably on a wide screen with larger resolution because of expanding of content area

The large screen with less lines of text make the site look more with large spaces and less content and the reading become harder. Similarly on low resolution, the content area gets squeezed making it look ridiculous. The impression for the design falls down.

For that matter a fixed layout would be perfect because even if the screen comes to a lower resolution the content remains intact. In this case, a scroll bar appears on the browser to view the content placed beyond the browser area. But I would be comfortable with this because the essence of the layout remains as it was designed to be.

For the above reason I believe that fixed layout reigns over fluid layout and I would continue with the same thought. I think this will give a food for thought to the web designers who are in a dilemma of whether to go for a fixed layout or a fluid layout.

5 thoughts on “Choosing Fixed Layout Over Fluid Layout

  1. But again, you’ll have to optimize for your readers. I think its better to go in for a fluid layout if you have many readers in the lower resolution niche.

    Being a psychology student, I opine that the “mood” is set by the percentage of the screen occupied, not the amount of space.

  2. I prefer the combination of both, even that not all, especially older browsers support it.
    I use css like minimal width which makes design looked like fixed if window size is less than set value and gives you fluid option on bigger screens.

  3. But what how the fixed layouts looks in the screens with different resolutions ?? They would sometimes fix themselves to the middle portion of the screen .

  4. In a liquid layout, the width of the search results on a Web page shrinks and expands to fill the available space as a user changes the screen resolution or the width of the browser window

Leave a Reply

Your email address will not be published. Required fields are marked *