It looks different - why can't websites look the same

Have you ever wondered why web sites look different on different monitors? Also some websites look different on the same monitor - some are on the far left of the screen, some in the middle and some take up the whole screen. The answer to your questions are below.

IT DEPENDS ON THE TYPE OF DESIGN USED - LIQUID OR FIXED.

Fixed vs Liquid Design

Great Plains Log Home is a fixed site - the site must remain the same width so that the grass on the right side of the page remains aligned directly under the cabin.

Retro Bowl is a liquid site with a fixed width navigation. The wood grain and bowling pins are the same width across on every monitor. The right side, however, expands and contracts, displaying more or less words as the browser is increased or decreased. This expanding and contracting is considered a liquid layout.

Here are the advantages to fixed width:

1) You guarantee the site appears exactly as you want. The number ofwords per line are chosen by you, where things are placed on thescreen doesn't vary, etc.

2) Fixed width sites appear the same across different browsers andresolutions. This is a big deal to clients whose corporate brandingwants the site to be consistent.

Here are the disadvantages to fixed width sites -

1) If you size a site too wide for a user's monitor they may have toscroll across to read your text. Users NEVER like having tocontinuously scroll back and forth to read.

2) To accommodate lower resolution monitors, users with large monitors usually end up with a bunch of white space on the side of their screen.

Here are the advantages to liquid width -

1) There's a huge variety of monitor sizes out there - liquid widths mean you can accommodate every size resolution.

2) Liquid widths can handle user changes like increasing the font size FAR better than a fixed width site.

Here are the disadvantages to liquid width

1) The amount of text per line increases in large browsers. In some cases, this can make the text harder to read if you have big paragraphs (which we try to avoid if possible anyway).

2) Liquid width sites are way harder to code and make look correct inall browsers, particularly in IE. A fixed width site of 1000 pixels is a thousand pixels whether its in IE, Firefox, Konqueror, etc. In aliquid site, a right side may be 80% of the browser and because of howIE works that 80% is a completely diferent area than 80% in Firefox(an oversimplification of the IE issue but you get the point - if youever look at my CSS files you'll see a lot of places where we put incomments like "needed to work in IE").

3) Liquid sites accommodate the ever growing numbers of people using iPhones, Treos, and other PDAs, since the content will shrink to fit their tiny screen. Sometimes it's abundantly clear by the design (like GPLH) that a site must be fixed. Other times, we have to go back and ask what the site should do if resized in order to determine if it should be fixed orliquid (for example, ADC).

We have always been a liquid width supporter, however as monitor sizes increase fixed width gives you a lot of control that a user sees the site exactly as you intended. In a lot of cases, the content will dictate what the design should be - if you have lots of text a liquid site allows you to take advantage of all the user's screen real estate. Client base can also dictate - if we design a site for affluent techies you can bet it's be liquid to accommodate the probably large percentage who have supersized monitors.

That being said, we think the trend is toward hybrids. Take a look at http://www.htmldog.com/ - see how the left is fixed but the right isfluid? Very cool.

If we haven't bored you to death yet, there was a very good debate at
http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/.
Ignore the digs about IE if that's your favorite browser.

Comments welcome.

Pat Pierson
Imaginative Designs