Layout

This page will talk about some of the fundamentals of web page layouts.

The layout is a sub-category of web design and is one of the most important parts of web design. It refers to the structure of the information (the placement of items) on your page. The type of layout you use will be based on how much information you have and what type of site it is. For example, if you have a blog you will probably have a center-aligned, fixed-width layout.

CSS vs. Tables

Since the beginning of the internet web designers were using HTML tables to dictate the layout of the site. Then CSS came along and changed people's assumptions that tables were the only way to do the layout. Although the CSS camp is gaining ground by the day they are still a minority overall - although they probably comprise a majority of high-quality designers. Most non-CSS designers haven't switched over for the simple reason that they haven't had an over-riding need to. Tables can accomplish almost everything you need. And design, like this site stresses, is only 1 part of the overall webmaster game.

As a beginning webmaster I would recommend you start off using CSS, for a couple of reasons. First, CSS can do things more easily than tables as well as do things that tables can't do - like line height and easy border customizing. Secondly, the CSS revolution will eventually kill table design because table design, like the CSS proponents say, is primitive. You'll have to learn CSS design later so just do it now.

Number of columns

Assuming your site is a content site you will have to decide on how many columns you will need. One of the most popular layouts is the 3-column layout. In these layouts, the left column is narrow and will serve as navigation, the middle column will be wide and will be for content, and the third column will be narrow have either ads or internal links to other pages. A variation on this is the 2-column layout. It is the same as a 3-column layout but without the last column. This is more popular for webmasters who don't want to put ads on their sites. The number of columns will depend on how much information you will have on your site - the more information then the more columns you will likely need. You can check out the different layout types on this page.

Variable vs fixed width?

Another basic and important decision you will have to make is whether to have a fixed-width page or a variable-width page (also called "fluid"). Fixed-width have the same width all the time while variable-width layouts are based on a percentage of the browser's window size.

Fixed-width layouts allow a designer to have more control over how the page looks in different situations. If the width of the page is too big though, it can cause horizontal scroll bars at the bottom of the browser which everyone in the world hates. And if you have a CSS layout with the ability for users to change their font size then an increase in the font size can look bad on a narrow text block. Fixed-width layouts also have a lot of unused (and valuable) space on big monitors.

Liquid layouts use all of the available space but on big monitors the text columns can expand to a size that makes the lines of text in your body way too long and uncomfortable to read. Liquid layouts can also distort the overall layout and affect the look and feel of the site in a negative way.

Which one should you use? That is a personal preference but I'll give you three points to contemplate that may help you. Many webmasters don't like fixed-width pages because in big monitors the dead white space to the right can be almost as big as the content area, which can affect the branding of the site. To counteract this, many fixed-width sites have a header that has a 100% width so the header, which contains the logo and identity of the site, is still dominant. The second thing I would recommend looking at is using a script that reads the visitor's computer monitor size to determine how wide to make the design. These are becoming more and more popular. The third tip is to consider having a center-aligned fixed-width page with a different background than the content section. This way the whole background isn't white and won't look like a huge empty white sea of space on a big monitor.

Left align vs. center-aligned

This is one of the easier things to decide on because it can be easily changed. Most people think that center-aligned sites are more intuitive because the content is in the middle of the page and is therefore dominant. Center-aligning also gives the page balance.

Page length

A trend that started a while back was to stop putting too much information "below the fold" because people theorized that visitors didn't want to scroll. I always thought this was complete garbage and the trend sems to be reversing lately. Blogs, which many times are have all their content on 1 long page, have changed pages from having little content below the fold to sometimes having content stretching 50 pages downs. The truth is that not putting your content below the fold forces users to click through to another page to finish the content. Scrolling beats clicking any day of the week. One of the most obnoxious web trends is to have an article that isn't particularly long unnessesarily spread over 5 different pages. This is o-b-n-o-x-i-o-u-s.

Tips

Have a simple layout. A simple layout will be easier to make and it will look better but most importantly it will meet the users needs the most.
Your front page is the "face" of your site. It should make a good first impression because many users will use the front page as their judgement of the site as a whole. And many users will leave a website immediately if the front page doesn't so anything for them.
Decide what are the most important areas of the front page and make sure these are stressed. Less important items, like a search feature, should be easily accessible but not have a dominant position on the site.
Have plenty of white space to separate elements. Don't make your page too crowded. Busy pages confuse people.
Make sure the elements on a page are aligned with each other. Pages that have visual symmetry will be easier to read.