After four years of CSS coding I realized the importance of prototypes applied to CSS. My approach to web development is essentially based on two steps: first structure (HTML), then presentation (CSS). I begin finding this approach too limited when I developed the Icosfitness front-end part. I actually had a series of screenshots and all the images that made up the graphics of such drafts. The problems started arising when some change needed to be applied to the drafts. In short, all the graphics had to be updated. This was really time-consuming.
But then it came the light at the end of the tunnel: I did read a fantastic book by Andy Clarke, Transcending CSS, where he emphasized the importance and role of CSS prototypes. One great method is the approach called grey boxes, as shown below:
All you have to do is drawing a grid system based on a series of boxes filled with solid colors and some sample text. As you can see, graphics come only later in the development process, so you don't have to get mad to handle a design that is still in progress. So our process is actually made up of three steps:
- structure (HTML)
- prototyping (CSS)
- presentation (CSS and graphics)
This approach is really flexible and useful. You'll find yourself sparing a lot of time without worrying too much about the final design.
Then you may be interested in his approach using browsers as a design tool.