Creating a Layout

I wrote this article to explain to new and old webmasters alike the basic mistakes that people make when they create layouts. These are just a few mistakes I've seen webmasters make when they publish layouts. A good first impression is critical. A layout or enter page is usually the first thing a visitor sees, and based on that, the visitor makes up their mind about your site - whether it will be a worthy visit or not, so presentation is important.

The basic things that make up a layout are: the layout header(s), the color scheme, the navigation/links, and the font. Lets talk about these one by one.

Headers

Layout headers are the main images in your layout. Usually they are found at the top of the page, some sort of graphic with your site title. Headers are what basically make the layout, or where the navigation and colors derive from, so selecting a great header is important. Make sure your header does not take half of the window, so that visitors won't have to scroll for ages to reach your content. Your header should not be overbearing. The most important thing about a website is the content - not the graphics. After a while, there is only so many times you can look at an image; you must move on from there. If you are going to add text to your header, make sure it is clearly visible and easy to read, with enough contrast so that your visitors can clearly distinguish your site title from the background. Also, make sure that the colors in your header are complementary and easy on the eyes, which brings me to the next point.

Color

The color scheme should complement the header or main image. Colour Lovers is a great resource for color scheme ideas. Blinding colors like hot pink, fluorescent yellow, or neon green are not pleasing to look at and should be buried along with all of those blinding trends of 2001. If you love classic bright colors (like me), make sure they are bright but tasteful. Use good judgement when you choose bright colors. Readers shouldn't be squinting at your layout once it loads -- they should be drawn to it. The color scheme includes font colors as well. If you have a light background, make sure that you have a darker font color and vice versa; this contrast makes it easier for the reader to read your text. If you're not sure about your contrast, ask someone to view your website and get their feedback or use this constrast checking tool.

Navigation and Links

Navigation (links to your content), or content menus, should be easy to find and obviously, easy to navigate. If you're using different words other than About, Visitor, Links, etc. (ie Femme, Guest, Loves), make sure you add a title attribute (<a href="#" title="description here">) to your link tags to provide a description. Links should be in a slightly different color than your regular text or have a text decoration when hovered or when linked. Underlined or bolded links are a good option. This makes it easier to distinguish links from text. However, if your layout is narrow in width, then a hover text decoration shouldn't be bold; they tend to shift the rest of the text. Consider the titles of your subpages. Believe it or not they make a difference.

Font

The font you use should be easy to read and large enough to make reading comfortable. Avoid line-heights unless you know how to use them. You should have at least two pixels between your lines. Again, if you can't judge for yourself, ask someone else. Tips on text and legibility can be found here.

Resources