kallasoft

When I first got into web development, the new layout craze for websites was “table layouts”. The idea that you could slide and organize everything in a grid (using <table> tags) was a godsend for designers. All you had to do was learn how to “slice” your Photoshop mockup into the appropriate squares and they could be aligned correctly on a page.

With current day web design far exceeding anything done 10 years ago, the new method for slicing up and converting mockup renderings of site designs to a webpage is known as “CSS Slicing”.

I’ve giving CSS-based XHTML layouts a try… many many times, and for some reason I always get caught up with some random CSS directive that won’t render the way I want it to, or I’ll hit an IE rendering issue that just won’t go away (or occur on Firefox, Opera or Safari).

I’ve begun working on a new project that requires a bit more attention paid to the design of the pages and decided to give CSS-based XHTML page layout another stab (for the 6th time). I started digging into how exactly to best convert a mockup of a webpage to a webpage itself and that’s when I came across the CSS Slicing Guide.

I almost dismissed the guide at first glance on the principle that it was too simple, but was very happy to find that in the middle of the guide the author digs into some of the exact same layout snaffus I have always run into (clears as well as scalable relative fonts) and gives really clear and concise instructions on how to work around them.

Another thing I loved about the guide was that I didn’t see an IE hack anywhere in it, everything was straight forward, standard and well designed with rediculously little actual HTML being written (I think he ends up with a total of something like 20 tags).

If you are trying to learn CSS-based page layout or want to better understand how to convert your web page mockups to actual HTML, I’d highly recommend reading over this guide, it helped me jump start past a lot of the hikcups I’ve always had with that approach.