Common Website Layout Mistakes

One of the most important things to remember when designing for the web is that although your Photoshop document has a fixed right and bottom, a web browser does not. If you design a background that assumes that a browser will be opened to a certain size you may be making too many assumptions. Left and top are static, but right and bottom will change from browser to browser.

Because of this dynamic you will need to be careful how you might use curves as background elements. The illustrations below show the problem that results when designing background elements with curves.

It can be tempting to break out of the grid like structures imposed by the web by throwing in some curves here and there. But be careful, curves will continue to extend past the arbitrary box used in the layout. Figure 2 demonstrates the problem when you consider a browser opened wider than the predefined layout.

There is another limitation to these kinds of design elements. In order to accomplish this design the entire curve would need to be a part of a background graphic unless coded properly. Background graphics repeat themselves (see figure 3), this is why there are so many bad web pages with repeating logos in the background. So wherever your curved background ends, if content scrolls past it, or the browser is opened past it, it will begin to repeat itself as in figure three.

Background graphics introduce another layout consideration for web design. There are really only two layers on a web page, the background graphic, and everything else. Everything else will lay on top of the background graphic. This means that if you want two graphics to overlap, one will be the background graphic (and will repeat) and the other will be the main HTML. Things like vignettes, transparencies, and drop shadows will be difficult to reproduce in HTML. This is due to the fact that true image transparency is not yet supported in web images. If you do have images or textures in your background graphic don't design drop shadow effects over them. Any of these effects should always occur over a flat background color.

You will need to remember that all graphics are defined by squares. So if you have two independent graphics, make sure that the boxes that contain them do not overlap each other.