Fixed

What’s fixed design? Fixed design is largely outlining a width on a page – no matter the dimensions of the browser window. You’ll be able to find fixed designs at sites like Yahoo. A standard fixed layout has boxes, text, pictures and most other elements outlined in pixels.

The real benefit to designers in using fixed layouts is they have total control of the design. Unlike conventional media outlets – like papers and mags – the web can be viewed thru a big range of devices from cell telephones to PDAs to computer screens to wide screen HDTVs. With conventional media you always know how your page is going to appear.

With the web, the same page viewed on a phone and a PC can appear hugely different – or perhaps two PCs with different screen resolutions. Fixed layouts give a designer more control of how their content is viewed. Ultimately , as you are outlining the layout of the page you’ve more liberty with background images

- If you spot the examples above all but CNN make in depth use of background photographs for design. There are two main faults of fixed designs. One is that users with massive screens and resolutions viewing sites with small widths have a lot of wasted space.

This is a bad user experience as you are dictating to the user how they should experience your site. The second is if a user is employing a smaller screen or resolution some of your design might flow outside of the window – causing the scary horizontal scrollbar. This also creates a bad user experience.

Fluid

what’s fluid design? fluid design fundamentally permits the user to choose the way the page looks based upon the scale of their browser window and display settings – the page “flows” (thus liquid) to fill the whole available space. Liquid designs can be discovered at sites like Google, Wikipedia and Reddit. A standard lluid layout has boxes, text, pictures and most other elements outlined in ems or percentages. The real benefit to designs using liquid layouts is they can use all the space supplied to them.

The philosophy is that you can not envision the user’s setup so you wish to make your design as adaptive as practical to increase the user experience.

A fluid layout puts the control over the design in the user’s hands. There are two main faults with liquid design. One is if somebody has a huge / tiny screen or resolution your website can appear “wonky” – intensely long / short lines of text and deformed containers. The second is that liquid design makes it incredibly tough to use background pictures due to container distortion. They need gigantic amounts of testing to function correctly – if . In the examples above not one of the sites use background pictures at length – which seriously boundaries your design creativeness.

Cross-breed / ELASTIC A new design not discussed in the title goes by a couple of names and is largely a half-breed of the 2. It uses min and max width (using javascript for IE6) to attempt to get the best of two worlds. Basically it outlines a variety of values in which the design can flow – so you still have some control of the design (like fixed) but users with bigger screens / resolutions can expand the width rather. 456 Berea St and Digg use something along these lines. The real benefit of half-breed / elastic is that it is getting some of the advantages of both fixed and liquid – users and designers split control of the design. It’s main fault is that like any half-breed it does not do either of those things as well as the first.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.