Written by Rook | 11 January 2010

One of the most important parts of your blog or website is your layout. This is basically how the information on your page is laid out. Funny how that works, isn't it? Basically, with a layout, you want to have it be clear and streamlined, rather than cluttered or disorganized.

The "Lingo"

When you do a website or blog, you need to learn the lingo. Fortunately, it is all fairly simple. I'll give you a quick run-down.

Main Content - This is where the "meat" of your website goes. Blog posts, pictures, contact information, forms... Basically individual pages get placed here. It is key that this is uncluttered, large, and clearly marked out. Don't use images as backgrounds for this part, it will look messy and make information hard to read.

Menu or Navigation Bar - These links to individual pages on your site or blog. It needs to appear on every page of your website.

Left Column - Quite simply, the left column. This is often where you place a menu or navigation buttons. This is an optional column only if you are placing a horizontal menu somewhere else in your website. If you aren't using it for a menu, use it for pimping out blogrings or webrings you're involved in, or maybe a donation button. Try not to place flashy advertisements here. Seeing as we read sentences from left to right, advertisements make reading information cumbersome if they're placed on the left. If you have to, keep them to static images or text links. Anything animated is a big no-no. This needs to appear on every page.

Right Column - Hangs out on the opposite side of your main content. This is where you can place more pimpage, or advertisements. Because the eye follows from left to right, these don't trip us up as much. They don't break the natural line that the left side of text makes. If you are going to be using this, it needs to appear on every page.

Header - The header is where you put your, well, header image. Your header image is often something relating to your blog, normally labeled with your blog title. You don't have to have an image, but you do need to have it state the name of your website. A header should appear on every page of your website.

Two & three column based layouts:

The most effective types of layouts are two and three column layouts. You can pretty much achieve whatever you need to do with a three column layout. Here's what a basic two column layout would look like:



Here's what a standard three column layout looks like:



Here's a two column layout with a horizontal menu:



You can get a little more fancy if you would like, by adding in footers and "floating" columns:



Now, I know I'm not explaining how to do it, but this is all taught in the premise that you've had some experience with layout design, or you are capable of doing an eight second Google search. Also, if you use a browser-based design program, such as wordpress or joomla, these are insanely easy to achieve with the usage of modules. (Or whatever wordpress calls them.)

Backgrounds, Color Scheme, Fonts, and the fact that you shouldn't ever need an animated GIF on your website.

If you're going to use a background, for the love of GOD, never use an actual photograph. This looks terribly tacky. Also, avoid images that are very intense. And make sure that your main content has a solid white, black, or gray background. Never underestimate how nice a solid color or gradient background can look. Avoid bright, primary colors. These will burn peoples retinas out of their heads, making them highly unlikely candidates to return to your website.

A color scheme is another key aspect to your website. While an all white or an all black website would be boring, you do need to realize that an excess of colors, even muted colors, can often be overwhelming for people! Your layouts really should fall somewhere in gray-scale: Black, white, or a shade of gray. If you're going to have a black or dark gray layout, white is a good font color. If you're going to have a light gray or white layout, use a black font. However, make sure you save colors for accents! Use bold bright colors when accenting headings for pages and links.  Avoid yellows, cyans, and pastels on light layouts. Avoid dark bold colors such a crimsons, forest greens, and navy blues when dealing with darker layouts.

Fonts are just as important as color schemes. This means STOP USING COMIC SANS SIZED 36PT. This looks terrible, makes your site look so unprofessional, and is undeniably hard to read. I know, you'd think that when you make the font bigger, it gets easier, but when you can only fit five words every line, it tends to slow a person down when reading. Great fonts to put on your website: Arial, Helvetica, Verdana, and Geneva. All computers come equipped with these fonts, so you don't have to worry about it bouncing back to the default Times New Roman, and they're easy to read. Size 10-12 fonts usually look best and mimic what we are used to reading in books and most other programs. After all, browsers have the ability for people to increase the font size if they need it.

Lastly: This isn't 1998 and you're not a twelve year old using GeoCities. Stop using animated gifs on your website. Unless you're deliberately trying to be bad, don't worry about animated gifs. I'm sure there are some exceptions to this rule, but for 95% of websites? You don't need to worry about it.