Method of design mock-up for CSS-based sites?

So for years sites have been prototyped using Photoshop comps, and the
web developer/authoring task was to slice and dice the format and
images using tables and clear/transparent spacer gif's.

We know CSS-based layout moves beyond the notion of fixed-width
inflexible layouts -- but as a developer I still receive comps based
in Photoshop with those same fixed-width assumptions in place. Apples
and oranges, right?

So I'm left with the question -- what is the best way to prototype for
a CSS deployment?

"Chuck W1CEW" <cewyattjr (AT) gmail (DOT) com> wrote

So for years sites have been prototyped using Photoshop comps, and the
web developer/authoring task was to slice and dice the format and
images using tables and clear/transparent spacer gif's.

We know CSS-based layout moves beyond the notion of fixed-width
inflexible layouts -- but as a developer I still receive comps based
in Photoshop with those same fixed-width assumptions in place. Apples
and oranges, right?

So I'm left with the question -- what is the best way to prototype for
a CSS deployment?

You still prototype using Photoshop or whatever, you just have to be a bit
more judicious about how you slice it and ensure that there are both
horizontal and vertical areas in your design that will tile.

I've written an overview of doing just this here:

http://nrkn.com/overview.html

Please note that it is somewhat out of date and that I have better
techniques for doing this now (specifically the alpha transparent layout
technique I mention is not very good) but unfortunately I don't have the
time to revise the site. It should still give you a good idea of the
concepts involved though. If you want more info about how I do things now
flick me an email when you're through and I'll see if I can describe it for
you or put up a quick demo page