Eric Meyer’s CSS Sculptor for Expression Web – Start things right

I always say that unless you start things right, you’re going to run into problems somewhere down the line. Nowhere is that more true than in building websites, especially if you venture into the realm of standards based scripting. Fortunately there are people out there who know how to do things the right way, and they are more than willing to share their knowledge with us layfolk. One such person is Eric Meyer and with his new CSS Sculptor for Expression Web he sets out to make the deceptively complicated task of making web sites look the same across all browsers easier for one and all.

If you’re one of those people who like to write all your CSS in Visual Studio and you know absolutely everything about standards-based coding, you need read no further. If on the other hand you are like me and CSS is like a second language you still have trouble with, this is vital information.

I’m not saying that CSS Scupltor will generate all the code for you or even solve all your problems. What it does is start you off on the right foot, with proper high-end runners and a good night’s sleep.

Why do I need this?

There are two answers to this question: The first one is that for some reason different browsers interpret CSS differently so unless you really know what you are doing, chances are the sites you build end up looking slightly different depending on whether the visitor uses Internet Explorer 5, 6, 7 or 8, FireFox, Opera, Safari or any number of other browsers. There is no good reason for this other than that in spite of many years of work, the “standards” that govern CSS and other web code are so vague and flexible that there is no joint agreement on exact interpretation. It’s worth noting that Internet Explorer has always been the big culprit here and that with the release of IE 8, Microsoft is finally joining the fold and matching the rest of the world. But I digress. What Eric Meyer and other CSS gurus have been telling anyone willing to listen is that with some strategic coding, you can still make the all browsers act the same way. But this requires work. CSS Sculptor sets out to do the brunt of this work for you.

The second answer is that even though Expression Web has many CSS templates, they are mostly empty and they require you to insert all the little pieces that make the code compliant. And that’s a lot of hard work on your part.

To give you an idea of exactly what CSS Sculptor does that EW doesnt, I’ve built two examples. They are both out-of-the-box layouts with standard text inserted. They were both created with about 5 mouse clicks and I only made minor adjustments to get this demo up and running – specifically I separated the CSS from the CSS Sculptor project and put it in a separate file and I inserted the dummy text from the CSS Scupltor project in the EW project to have some filler. Both these pages were made using Expression Web 2 Beta and they have no alterations of any kind from me. You can see the Expression Web example here and it’s CSS code here. The CSS Sculptor example is here with it’s CSS code here.

Anyone can see that the two examples are miles apart in both layout and functionality and you’ll also notice that the CSS part of the generated pages are hugely different. And while none of the pages will apper exactly the same across all browsers (mostly due to lack of defined elements like a background colour), the CSS Sculptor page is by and large fully working while the Expression Web page is unuseable garbage (notice where the footer is located).

OK. So what exactly does it do?

As is obvious from the examples above, CSS Sculptor spits out a lot more code than the native CSS generator in Expression Web. The code generated by CSS Sculptor also contains parts of Eric Meyer’s CSS Reset code which goes a long way in ensuring browser interoperability. In addition, the program gives you a ton of plug-and-play options like menu bars, colour schemes and so on to get you started quickly and easily. To top it off, it even inserts both dummy text and plenty of commented out instructions and explanations to make it easier to understand exactly what’s going on. To an avid coder this might seem excessive or even unnecessary, but to a designer who dabbles in code it will be a life saver.

So should I buy CSS Sculptor or not?

Whether this application is for you depends on what you do and how you do it. Like I said before, if you know what you’re doing and you usually type out your CSS in Visual Studio for a perfect result with no testing, you’re not likely going to use this app even if you should. If on the other hand you are constantly creating new CSS layouts and you find yourself sifting through the web again and again to figure out why your margins keep shifting or why your header is hiding under the main body, this is a good tool to get your on your way.

I’m not saying that CSS Scupltor will generate all the code for you or even solve all your problems. What it does is start you off on the right foot, with proper high-end runners and a good night’s sleep. That way you spend less time fiddling with the framework which means you have more time to tackle the intricate details. And time saved means more time for the important stuff.

Personally I can see a hundred uses for this application and I’m not going to think twice about shelling out the dough to get it. Eric Meyer’s CSS Sculptor for Expression Web will sell for $99.99, retail but for the first couple of weeks after it is released, WebAssist will be offering a discount on it. For my purpose, the many colour schemes and other nifty editing options included are superfluous, but that’s because I like to see what I’m doing when I’m doing it and I tend to change my mind a lot during the designing process. Even so, having a quick and easy way to get the framework up and running properly means a lot less wasted time and increased productivity, and for that alone it’s worth it.

Eric Meyer’s CSS Sculptor for Expression Web is a simple one-click install that snaps into Expression Web automatically and requires no work on your part. Once installed, it shows up on in the program and works flawlessly. And although it doesn’t build stunning websites for you all by itself, it gives you a solid foundation to start from.