Third question I ask clients about their potential website is content orientation. Content orientation is how the content of the page is laid out and how it will interact with the browser. I’ve been able to group all the possible designs into two main categories with one sub category that is very widely used that it should be mention. The two main categories are Fixed Width and Elastic Width websites.
Fixed Width – (Demo)
A Fixed Width website has a finite width that is not depended on the width of the browser window, although is sometimes influenced by. So if designing for a 1024 by 768 pixel(px) screen resolution (Current Standard, W3school – Jan 09) the fixed width can range from 850 to 980. My Website is based on 950px width and is aligned to the center (WebNote: margin:auto;). Fixed Width is the most commonly so far.
Pros / Cons
The best attribute about using a fixed width is control over how the content is displayed in the browser from user to user. Since the width is independent from the browser the text doesn’t get resized each time the user moves the browser thus text looks the same regardless of the computer. Unfortunately, in the event that a website is designed for a 1024 by 768 screen resolution and the user has a 800 by 600 (next resolution down) the website is to wide and the user has to scroll but if the user is using a higher resolution (1280 by 1024) the site seems small with a large amount empty space.
Elastic – (Demo)
Elastic websites scale to the edge of the browsers and will always take up the predetermined percent of the total browser’s viewable area. So if you have to side bar that you want to be 20% of the total width then the rest of the site will be 80%.
Pros / Cons
Unlike the problems with smaller resolutions when using fixed width elastic never gets cut off and always fills the screen BUT, with large screen the content gets so stretched out that it to the point that it seems like there’s nothing there. In contrast a small browser will scrunch up the text so much that it become over whelming even if all that’s there is 2 to 3 sentences. With the variable of width constantly changing there is no way of fully controlling the over all look of the text.
Infinite – (Demo)
Infinite can be described as the best of both worlds. It is a Fixed Width website that’s visual theme reflects a Elastic look. This site uses that concept of design. Infinite has been described as a “Super Clean” look, usually having clear division of the website sectioning off the content. These divisions are what appear to extend to the edges. A simple gradient or solid color can be used to create a similar effect but doesn’t always carry over the same feeling of endless expansive.
Pros / Cons
The great thing about this style is that there is only one pro and one con. The pro is that it give the same feel of an elastic layout but keeps the control of a Fixed Width layout.