Fluid Layout vs. Fixed Layout

I have wondered many times, what should I use for designing a website - Fluid or a Fixed layout? My heart always wanted to have the fluid layout, but the brain insists on fixed layout.

Hey stop it! What's fluid and fixed layout are you talking about? Could you please explain? Getting definitions from the Gurus of Web Design

FIXED WEBSITE LAYOUTS​

​

A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.

​

The image above shows the general outline of a fixed-width website layout. The components inside are fixed to 520, 200 and 200 pixels, respectively. A 960-pixel width has become the standard in modern Web design because most website users are assumed to browse in 1024×768 resolution or higher.

FLUID WEBSITE LAYOUTS​

In a fluid website layout, also referred to as a liquid layout, the majority of the components inside have percentage widths, and thus adjust to the user’s screen resolution.

​

The image above shows a fluid (liquid) website layout. While some designers may give set widths to certain elements in fluid layouts, such as margins, the layout in general uses percentage widths so that the view is adjusted for each user.

Now that we came to know about this, lets see the pros and cons for the both.

Benefits of Fixed layouts:

With fixed design layouts you have control over the line length, flow and placement of the elements on the web page. The designer has a fixed space to work with and the line lengths of the text and the placement of images can be designated easily.

Drawbacks of Fixed layouts:

Fixed design layouts tend to leave lots of empty space on either side of the design when viewed on high screen resolutions. This dwarfs the size of the web page and gives an impression that it is floating on the screen.

Benefits of Fluid layouts:

One of the major benefits of fluid design layouts is their accessibility features. They cater to more number of users. This is because, whatever may be the screen resolution or device of the user, fixed design layouts adapt better. It makes use of the entire browser window by spreading out. This maximizes the area for the content to be displayed and more information can be seen at one go. Therefore, there is no empty space on the window screen.

This is a better bet as compared to fixed layouts that leave a great deal of empty space.

Drawbacks of Fluid layouts:

Unlike fixed design layouts, fluid design layouts don’t let you have control on the placement, line length and flow of page items. At high screen resolutions, when users scan back and forth repeatedly, the line length can crop up some legibility problems. Moreover, when you don’t have controls on how and where the item is placed on the website, you fail to lead visitors to areas you want them to focus on.

So both have merits and demerits! What can be done?

Designers also create a hybrid of the two by using both the fixed and fluid elements in the layout of the website. The most common application of it is a three-column layout where the left and right columns maintain a fixed width while the central column scales to fill the space in the middle. This central column inflates and deflates as and when the browser is resized or whenever the screen resolution changes.

The hybrid approach works best in most cases. The major part of the design is made fixed but the background elements are made fluid so that it fills up the browser window. It adds up the advantage of both the layouts and works well for the users. The alignment of text and images are not altered at the same time there are no empty spaces too.