if batman had a utility belt for mobile apps
it would be web ascender
Article
Liquid versus fixed width websites

The majority of websites you come across today feature layouts that have a fixed width for content that fits in two, three, or even four columns and is centered in your browser. People.com is a standard example of this layout. There are many reasons that this has become the current standard for websites, from both a designer and a user's perspective, but it is not the only, or best, solution for all websites. 
people 1
A fixed width website contains all of its content in a set width of space, commonly between 800 and 1000 pixels. This type of layout gives the designer maximum control over how the page will look, and keeps the site appearance consistent throughout all browsers, which designers love. But consistent appearance doesn't always equal a convenient user experience. 


The most common screen resolution today is 1024x768 pixels. At this resolution, websites between 800 and 1000 pixels wide will fill their browser windows nicely, with a bit of buffer space on either side. But for web users with older, lower quality monitors and 800x600 pixel resolution, fixed width websites can become a hassle to use. Users will often have to scroll horizontally to view the entire content of a site, which is not an easy or intuitive thing to do. Below is what the People website looks like in a 800x600 browser window.
  people 2
Alternately, a fixed width website of 800 pixels may fill less than half of a high resolution or widescreen monitor. (Although, fans of "white space" won't see this as much of a problem at all.)
The screen resolution disparity is one of the main justifications that designers of liquid, or fluid width websites have. A liquid width website will have one or more columns that expand in width to fill a browser's window, no matter what the screen resolution, or how large or small a user makes a browser window. Craigslist.org is one popular website the uses a liquid width for most of its pages. Unfortunately, this brings up a new set of problems. Without control over paragraph widths, lines of text can become excessively long, and consequently more difficult to read.  To users of high resolution monitors this is usually a bigger problem than excessive space on the left and right of the website. This can be noticed in the craigslist image viewed in a 1280x800 pixel browser window.
  craigslist 3
It is possible thought to set limits on this liquid width, so that the text won't fill the browser from edge to edge. A site can be set to fill 80 or 90% of a browsers width, which would leave a nice margin on the edges of a site no matter how it viewed. Or a width can be set in pixels, so that lines of text won't get excessively wide on a high resolution monitor. This is commonly referred to as an elastic layout.


Ultimately, there is no best layout for all websites, it depends on the content and audience of each site. Websites that contain large amounts of text can benefit greatly from a liquid width layout to use the space for all that text most efficiently. For a fixed width website, it may be acceptable to have a website that is 1000 pixels wide, especially if the intended audience is known to be more tech savvy and likely to own newer, higher resolution computers. But, if a website is catering to a group with a higher likelihood of owning an outdated monitor, it’s a good idea to keep fixed width websites within 800 pixels, to minimize horizontal scrolling. So, know your audience, know your website, and consider your options when choosing a layout for your website.

Posted in: Article
Actions: E-mail | Comments (2)

Comments

Tuesday, July 07, 2009 8:21 AM
Excellent article. I am in the middle of adjusting the page width on my site and this has help. Thanks, chris
Tuesday, April 24, 2012 7:52 AM
Thanks for your article. However, the best and universal answer is to use Responsive Web Design. I can use fixed width columns, wide column are difficult to read. but rearrange the columns depending on screen width. I do this with just CSS2 and HTML 4.01. There are so many screen sizes now with iphones to wide monitors and RWD also caters for visually impaired people who can zoom up without having to scroll horizontally. Unfortunately, most web designers seem to be stuck in the past.

Malcolm

Post Comment

Name (required)

Email (required)

Website

CAPTCHA image
Enter the code shown above:

     The blog is one way to stay current on all things Web Ascender. On this page you'll find articles with tutorials, advice, industry news, and other general Web Ascender announcements.  Checking this page regularly (or subscribing to our RSS feed) will help you get the most out of SiteCTO, Enlighten, and our other web marketing and tracking services.

    Michigan Website Design and Development | Link to Web Ascender  |  Related Content
    Michigan Web Design Blog