Written by nitinpai on December 12th, 2007
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?
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.
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.