Fixed vs. fluid CSS layout

<< Serializing XMLDocument to binary format | BlogEngine Widgets Tutorial >>

Mar 20

CSS

People are arguing about which layout is better since web exists. Some like it fixed, others prefer it fluid (or elastic). I always used fluid layouts, mostly because I really hate to see narrow column with unreadable small text on the screen with large resolution - and I used to see it a lot. Naturally - large companies going after broad audience don't want to alienate even tiny portion of potential customers and always go with lowest common denominator^W. Lately, though, I start noticing these ugly sites disappear. To confirm my guess, I went to Google analytics^W for my blog and looked at screen resolution for clients that access this site. Wow... you guys! Every time I visited local library, I felt bad for people still using low-end computers with small screens and thought about myself as been rich and spoiled (hmm… technically anyway). Not anymore! It turns out - I am the one using cheap low-end monitors here.

This discovery lead to uneasy decision I made - I will revolt and try something... old. I'm switching to fixed layout. Here are my reasons:

It looks decent on wide variety of screens - as long as you don't have to support 640x480 anymore...
It is much easier to design and support.
You can guaranty that everybody sees (almost) exactly what you see.
This greatly simplifies your main task, which is supposed to be content (and not layout) creation.

Let me know if you hate it and think this is a blinder on my site :)

CSS survival guide (developer addition) When you are a developer working with CSS on “as needed” bases, you have to be prepare...Transforming unsorted list into CSS horizontal menu Lately I’ve been working on the new cool theme for BlogEngine that I’m going to shar...CSS survival guide, part 2 There are two important things to understand when dealing with CSS - how to address element yo...

Comments

3/22/2008 12:43:59 AM #

Fixed layouts are for suckers. Screen real estate should not be wasted. There are still people who use 800x600. And there are also people who use resolutions over 1920x1200. Monitors are not getting smaller.

Be a man. Stick with the fluid layout.

Josh Stodola |

3/22/2008 6:13:49 AM #

The screen real estate and ever growing resolutions are all legitimate concerns (not to mention a man thing). Still, I want to give it a try and see if I'll like it. You never know...

rtur.net |

3/25/2008 9:24:28 PM #

I think your site is for us (developers), all of us have the biggest monitors and the best graphics card that we can pay. But what about other people.
Can you get information about other site (not tech of course).
Finally, what about mobile device?.

Julio Tentor |

3/26/2008 1:36:27 AM #

I have similar results on resolution stats, but a small percentage (2%) of visitors to some of my sites have 800x600 resolution. Don't forget to check the analytics other pages for the other sizes (like 5120x1024).  I think 640x480 is dead, but 800x600 is still viable and in use.  Keep in mind, just because I may have a bigger monitor doesn't mean I want a web site to use up the space.

Also keep in mind a lot of folks with larger monitors may use an increased font view size to make the fonts appear larger.  A font size in em's versus px will allow them to view the larger size.

With regard to the fixed versus float.  I faced a similar decision.  Fixed just saves a lot of headaches.

BTW, nice site.

Tim Stanley |

3/26/2008 4:06:56 AM #

I agree with all the above, and honestly I can’t say which layout works best. I guess, the right answer as always is “it depends”. Not campaigning for fixed layouts, just think it might work for me (or may not).
In defense of fixed layouts, almost every professionally designed site that stands out uses fixed today. I didn’t pay attention, but when I took a closer look – yep, most designers vote for fixed layouts. And (I think) I understand why – you absolutely need to know your boundaries to layout content nicely.
Of course I’m a coder and most of what I’m laying out is a code and text with few illustrations, so fluid always worked for me too

rtur.net |

8/25/2008 1:02:34 AM #

good arguements

papichulo |

8/28/2008 7:23:42 AM #

Fluid layouts are a thing of the past. These days it's important to have a fixed width design with a width of somewhere around 900px, this is my professional opinion.

This opinion was made by always having trouble with fluid layouts. When I was on a small screen the text were too squashed together and reading them was a pain. When I was on a large screen my neck almost fell apart from turning too much. So instead of using fluid designs it's better to make something more static and have it positioned somewhere near the comfortable middle of the screen.

I know I'm right because most modern websites are designed this way.

Swizec |

10/2/2008 7:13:59 AM #

I agree with Swizec, around 900 pixels width is ideal. Not only to keep the user fixed on a smaller area, but also because too long text-lines are proved to be bad for readability.

Also as mentioned above a fluid layout is a lot harder to get to work well in all browsers (especially IE).

Jonas |

1/13/2009 10:46:56 PM #