Basics of Web Layout

When you create a Web design, one of the more overlooked aspects of the design is the layout. Now, many people think about how to do a layout (CSS, tables, frames, etc.), but the basics of Web layout are often completely ignored.

Space and WhitespaceUse the whole space, but don't be specific in your use. In other words, use relatively sized layout sections on your Web pages, so that they expand and contract to fit the browser window.

Keep screen resolution in mind. While the majority of computer users have moved away from 640x480 resolution ( width 1000 px Recommended) , keep that in mind when you're designing. Having customers leave because all they can see is a logo on their monitor is not good customer service.

Use color to define spaces. If you want to have a page that's a specific width, why not center it on the browser screen and make the background color of the page a different color? This will help the page appear to resize for different browsers; larger browsers will just have more background color showing, while smaller browsers will have less or none showing.

Images and GraphicsAlign your images. One of the most common newbie layout mistakes is to slap images into a page willy-nilly without thought to layout. If you just use an img tag and then write text to follow it, you'll have the image and then one line of text to the right of it. Using the align attribute will help make your images part of the layout.

Balance the graphics and text on a page. It's easy to get carried away with lots of images and animations, but they can make a page very hard to read. When you're considering your layout, remember that images are a major part of the design, not just afterthoughts.

Text WidthThink about text width. This is often called the "scan length", and refers to how many words are displayed on one line. Most people can comfortably read about 7 to 11 words on a line. Longer than that, and the text is hard to read, shorter than that and it's disjointed and distracting. When designing your layouts make sure that the major text area displays the text in a readable width.