Category: css design xhtml

Interesting thoughts on precise front end development

Author: mark June 19, 2006

Have you ever sliced up your PSD layouts and turned them in to XHTML web pages only to find that the two are not equal (column widths are not right, margins and paddings are off…). I know it can be a great pain but there is a simple but effective solution to this problem that does not require constant print-screening. In the initial state of any design the foundations are made up of a grid based system. This means that a layout is first seen through mathematical building blocks. By doing this you can precisly predict user habbits like why should the navigation be on the left, the content on the right and so on..

Before you start coding, get your first draft grid system save it in any web safe format. Next you apply that image as a background image to your document body using CSS (remember this image is here only to assit you in setting up intial xhtml layouts). And thats it, you can now continue your development and not worry about breaking the original design.