(Fixed Width) vs (Variable Width) Website Design

I am learning how to design a website. One of the decision seems to be how 开发者_如何学Cto present the data to the user i.e. with the presence of different monitor sizes, whether to structure the data to occupy the entire screen (a.k.a GMail) or make it fixed width i.e. choose a standard monitor size (1024x768) and make it appear the same across all monitors (a.k.a. StackOverflow).

I am inclined towards Variable-Width design, what I am trying to understand is that what implications does this design decision have on programming? i.e. what do I have to keep in mind when I am programming a website with variable-Width design (to be specific - CSS usage) ?

I'm not a designer by any stretch, but I am doing a design for a site of my own I'm currently building. Take everything I say below with a couple large grains of salt.

I think which width style you use depends largely on what sort of content you have, and how well it stretches.

Gmail actually cheats (<div> elements have their width redefined in Javascript when the window width changes), but in principle this sort of design works because the sidebars are known quantities and the dynamic content wraps well. This means they can just throw in their sidebars at a fixed width, then use margins to make sure the content in the middle never overlaps with these sidebars. If the content grows too large, it simply wraps to the next line and nobody cares, because it's usually freeform text. If your site has a lot going on in its main content block, where there's real danger of content overflowing its container, variable widths probably aren't the right call. There are experts that can make these types of designs work, but if you're just starting out you might not want to try it. I tried it, and it only frustrated me.

Fixed designs tend to be easier. I've likened it to just drawing a design on a piece of paper. Basically, you know the size of the paper (because you specified it explicitly), so when you draw a box, you know it won't overlap the box next to it because you also know where you drew that other box and where it's going to be. You just tend to have more absolute control over where things will ultimately get rendered on the page.

The caveat to this is that you need to be aware that your chosen font sizes won't always be the ones used. A user can change the default font size the browser uses, making it bigger than you expect, causing your content to once again break out of their boxes. The way I tend to get around this is to test the design often using my browsers text-only zoom feature, and making sure that everything looks reasonable when the font increases 3-4 times.

As far as choosing your "standard monitor size", the common practice now is to define your sites width to be 960px, give or take. This is about the right size for a viewport of 1024px width, once you factor in browser chrome (e.g. the vertical scrollbar). If you have a lot of users who might still use 800x600 resolutions, use a 760px design instead. It's still somewhat recommended to make sure your key content fits in 760px just in case, and use the remaining 200px for less critical content.

Hope that helps a bit.

Code-wise, there's really not much difference if you think about it. The approach I personally find to be the best choice is a combination of both: create an outer wrapper and then set all the elements inside it to percentage values. This way, regardless if you decide to use percentage or fixed widths on the outermost wrapper, the inside will always scale nicely.

Although I usually use fixed widths for the outermost wrapper, I still code the inner elements with percentage widths (most of them anyways, with the exception of elements that must have a fixed width). In the eventuality that a client wants a full width website, it's just a matter of changing a single value.

I think that in the end, it's just a matter of personal preference, be it yours or your client's.

Hope this helps.