Categories
CSS Expression Web News

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.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

10 replies on “Eric Meyer’s CSS Sculptor for Expression Web – Start things right”

It’s a smart little tool that makes it easier to get started. Check back when you’ve tested it for a bit and share your thoughts with us. It’s always nice to get a second (and third, and fourth) opinion.

Morten

I think even for someone whith zero CSS experience, this application is better than the stock option that comes with Expression Web 2. That said, I wouldn’t recommend anyone with zero CSS experience to shell out $100 on this software right off the bat. I think they’d spend their money more wisely by buying an introductionary book on CSS.

Hello Morten,
I’ve now been experimenting with the trial for a while. Doubtless it is excellent, but a bit of an extra layer of complication for someone of my limited experience. I’ve posted a longer response on EW Forum below your original post.

Regards – Andrew C.

Unfortunately, its still an unfinished product. I didn’t even create one layout with it and I found a bug in the CSS with the background position CSS.

background-position: left left;

when saving the file, it becomes background-position: left 50%;

Hard to imagine that Eric Meyer had a hand in this. I am sure he got his check or royalty to but his name and videos on this.

Bob: That’s strange. I don’t see that problem anywhere. I found the program would at times generate some extra code I didn’t need, but it didn’t generate erronous code as you say. Can you tell me exactly what you did so I can try to reproduce it? I’m curious.

Due to bugs in version 1 (for Dreamweaver), I was never able to get it to run successfully on my system. The version I had would crash after I had spent considerable time tweaking the look. Pretty frustrating. Now I hear there is a version 2.0 version. I’d be tempted to try it, but there is no upgrade pricing. After being burned once, I’m reluctant to fork out full retail pricing again for a product I already paid for. I understand thet the Expression version is 1/2 price right now. If that were the case for the DW version, or if they had upgrade pricing for their existing customers, I might be tempted to try it again as the concept is promising…

I can’t speak for the Dreamweaver plug-in and I don’t have any experience with version 2 myself but I’ve never had any real problems with the Expression Web plug-in myself. That said, I don’t really use it any more because I find it easier to just code the CSS from scratch. I suggest you drop them a line and ask if your problems are common and why they don’t have upgrade pricing. I’ve been in touch with them a couple of times and they always responded promptly to my questions.

Comments are closed.