by WeaselWarDance

Created on: May 24, 2007   Last Updated: May 28, 2009

Fixed vs. flexible design is one of the main arguments of the modern web design era. Much of the argument derives from the fact that IE (Internet Explorer) did not support the min- and max-width properties until version 7. As of this date version 6 and lower are still in such high usage that you cannot count on these properties to work. So the question of "fixed vs. flexible" is asked at many design meetings.

FIXED

What is fixed design? Fixed design is essentially defining a width on a page - no matter the size of the browser window. You can find fixed designs at sites like Helium, CNN and Yahoo. A typical fixed layout has containers, text, images and most other elements defined in pixels.

The main benefit to designers in using fixed layouts is that they have total control over the design. Unlike traditional media outlets - like newspapers and magazines - the web can be viewed through a large variety of devices from cell phones to PDAs to computer screens to wide screen HDTVs. With traditional media you always know how your page is going to appear. With the web, the same page viewed on a cellphone and a computer can appear vastly different - or even 2 computers with different screen resolutions. Fixed layouts give a designer more control over how their content is viewed. Finally, because you are defining the layout of the page you have more freedom with background images - if you notice the examples above all but CNN make extensive use of background images for design.

There are 2 main faults of fixed designs. One is that users with large screens and resolutions viewing sites with small widths have lots of wasted space. This is a bad user experience because you are dictating to the user how they should experience your site. The second is that if a user is using a smaller screen or resolution some of your design might flow outside the window - causing the dreaded horizontal scrollbar. This also creates a bad user experience.

FLUID

What is fluid design? Fluid design essentially allows the user to decide the how the page looks based upon the size of their browser window and display settings - the page "flows" (hence fluid) to fill the entire available space. Fluid designs can be found at sites like Google, Wikipedia and Reddit. A typical fluid layout has containers, text, images and most other elements defined in ems or percentages.

The main benefit to designs using fluid layouts is that they can use all of the space available to them.

• 1
• 2
• Next Page >>