Eric Meyer's CSS Sculptor simplifies initial page design

Last week, I got the chance to discuss Eric Meyer's CSS Sculptor from WebAssist with Joseph Lowery, their VP of Marketing. While I did not get to put my hands on the new CSS tool (the official release and announcement was on 8/23/2007), Mr. Lowery did give me an extremely in-depth walkthrough of the tool — much deeper than what I am used to vendors giving me. [Added 8/30/2007 {Justin James}: The reason I was not able to try the tool myself was due to this discussion taking place before the product's release.]

Eric Meyer's CSS Sculptor is a rather interesting tool from my standpoint. It plugs into Dreamweaver (which is not what makes it useful), but it could very well stand alone. Eric Meyer's CSS Sculptor allows you to set up an entire CSS layout in one fell swoop. I primarily do CSS by hand, but I will occasionally use TopStyle, particularly when I am a bit confused about how to lay something out, or when I am using elements that I rarely use and need prompting. So for me, the traditional course of action is to layout an HTML page, flesh out the elements needed, make shell styles for them, and then iteratively tweak the styles until I am where I need to be. Depending on what I am trying to do, it could take me anywhere from an hour or a full day — and that is before I have even touched the graphics. The last design I worked on took me even longer, since I had to do a ton of research to figure out an effect I wanted.

While many tools let you start with a particular layout and have a few standard ones, Eric Meyer's CSS Sculptor has you perform all of the changes up front with a quick preview at the bottom and provides the ability to view the design in a browser. Instead of the constant, iterative tweaking, you start from a library of about 30 designs (split up by the number of columns, use of headers and footers, and if they use fixed, liquid, or elastic layouts) which you can add to later. After picking the base design, you make the changes (e.g., fonts, colors, sizing, etc.), press Finish, and the whole thing is done. You cannot use Eric Meyer's CSS Sculptor to go back and re-edit the design, but you can edit it by hand. It automatically creates a print style sheet, which is a hugely useful and often neglected task. The tree view of classes is helpful to show the relationships. It also creates comments in the CSS to explain certain things like if something is a browser-specific hack.

Overall, I was pretty impressed by the tool. For a graphics designer or full-time Web designer, they would probably want to pass on it. But for a Web developer, this tool is pretty nifty. Web developers all too often do not know more than basic CSS and are usually not so hot or inventive at design either. Letting them use this tool to give them something to work in and have the Web designer come behind them could leverage their time pretty well. Eric Meyer's CSS Sculptor's list price is $149.99, but at the time of this writing, it is on sale for $99.99, and it is available for Windows and Mac OS X. At that price, if it saves one Web developer two hours of work, it has paid for itself.

Eric Meyer's CSS Sculptor was created in partnership with Eric Meyer, a noted CSS expert. He has reviewed it for standards compliance and browser compatibility. Without fooling around with it myself, I cannot double check that, but I am familiar with Mr. Meyer's work (i.e., I've read a few things by him), and he knows what he is talking about. My only real problem with Eric Meyer's CSS Sculptor is that it is a Dreamweaver plug-in, and I do not use Dreamweaver.



Justin James is the Lead Architect for Conigent.

Editor's Picks