One of the questions often asked before slicing PSD to HTML and CSS, is whether the website should have a fixed or fluid Layout.

Most websites have fixed width, therefore, elements will always appear in the same width, regardless of the screen size. If you define a fixed width of 500px for your content, it will stay fixed at all times.
Fluid width on the other hand, means that elements in your site will have a different width when displayed in different screen sizes. Element will always “try” to to be as wide as possible.

fixed-or-fluid layout

To test if a web site have a fixed or fluid width, simply change the width of the browser window. When narrowing the browser, if the words jump to the next line – it’s fluid width. If instead, a horizontal scroll bar appears – the website has a fixed width.
There are pros and cons to each of the methods. Some common complaints are “It doesn’t look well on my 25″ monitor”, “It’s not user friendly in my iphone” or “It just doesn’t look as it was in the original design”.

If you choose fixed width and use a large monitor, the main area will be displayed on a small portion of the browser. However, if the monitor is small, the user will have to scroll right and left to see the entire content.
If you go width a fluid width, elements and text especially, will look different in different screen sizes, and you may be unsatisfied with the inconsistency of the layout.

To make the right decision, ask yourself (or your client for whom you build the website) a few questions: how many visitors using mobile devices will the website have? Do you plan to build a different version for mobile? Does your site focus on content or it is an application or tool?

The second step is to try to analyze what screen resolutions the expected visitors are using. Google analytics is a great tool that can give you all the info you want: browsers, resolution, javascript, etc.

screen-resolution-trends

The results displayed above may seem confusing at first, because there are so many screen resolutions being used. However, this chart comes with some great news: people don’t use 800/600 resolution anymore. These are great news because you can start thinking from 1000 pixels and above. More than 50% of the visitors use 1024 and 1280. If you want to maximize the usability of the website on these 2 widths you can go for 1000px. A 1000px website don’t look so bad on 1280 resolution.

Take this blog for example . Here is how it is rendered in 1280 resolution:

webtechwise-1280-resolutio

And here is how it looks in 1024 resolution:

webtechwise-1024-resolution

The higher the resolution is, the more space displayed between the centered content and margins. At a resolution around 1600 you will think that there is more space than content.
Why most bloggers go for fixed width? Blogs are powered by content and we want to provide the content in the best way possible. If the text is too wide it will be very hard to read it. Look at the following image to see how is to read a wide text.

blog with fluid layout

I reccomend you to avoid this and to set the optimal width for your blog text. The optimal text width is about 500px-550px width a font of 13px, so there are 10-15 words in each line.

Besides content, blogs also have one or two columns sidebar.
The sidebars contain widgets and small banners. Their width should be fixed because in this case, there is no reason to make the width fluid in the first place.
The conclusion is, that while there are some successful blogs with fluid layout, for better user experience and readability, a blog should have a fixed layout.

What kind off layout do you prefer? Fixed or Fluid?

Additional resources

PG

Lucian Apostol is a web developer and programmer who tries to make the web a better place. You can read more articles about Web development and WordPress at his blog: FlameScorpion. You can also check his LinkedIn profile and Twitter account.

Topics:   |