Exploration

I alluded yesterday to “backstage work”. One of the things going on back there was my work with the folks at WebAssist to create a tool that allows both novice and experienced web developers to create and alter CSS-driven layouts.

The end result is Eric Meyer’s CSS Sculptor (v1.0.0), a Dreamweaver extension that gives the user tons of options and outputs pretty darned clean markup and CSS. (Even if you’ve no interest at all in Dreamweaver tools, you should still follow that link. How many chances are you going to have to see me throw the mëtäl hörns?)

Well you might wonder how much code I contributed to this software. Well, okay, none. What I did contribute was guidance on the interface and its organization; on what options to present, and how; on ways to handle things like print styles and the print CSS options; and on the CSS and markup that results, including the optional explanatory comments in the CSS.

One of the primary goals with this project was to create a tool that would expose as much CSS as possible to users without overwhelming them, and that would actually teach by dint of showing all the options. One of the things we heard a lot in the beta test was users saying things like, “Oh, so that’s what that CSS thingy does! I’d always wondered.” Which was exactly what we’d hoped to hear, along with “Hey, I’ve never heard of this CSS property before!”. (We heard that one too.)

There are some things I expect will be improved in future releases, like shorthand value minimization—the simplest example of that being a condensation of 0 0 0 0 down to just plain 0. We discussed including that feature but decided to postpone it for a variety of reasons, not least of which was working out the logic required to figure out when to minimize, which isn’t as simple a problem as you might first think. There were a few other things we didn’t get in the initial release; such is the way of software. We’ve got a list of potential features, of course, and are looking forward to hearing what users suggest.

As for what features did make it in, there’s a fairly large list, so it’s probably best to check out the Features page or take the product tour—with video commentary starring, you guessed it, yours truly. So if you’ve ever wanted to see me greenscreened over screenshots and being intermittently goofy, then at long last your prayers have been answered! (Or will be, once we get the load problems resolved.)

What makes this whole thing an especially interesting experience for me is that, for the first time in my life, I’m participating in an affiliate program. Basically, what I earn from sales of CSS Sculptor depends on affiliate fees earned by referral links like this one here (and also earlier in the post). That might sound like a rip-off, but it has the potential to be quite the opposite. The affiliate cut is literally an order of magnitude greater than any reasonable per-unit royalty would be.

This compensation scheme (as they say in the UK) is actually an experiment on both sides: WebAssist has never really worked with an outside individual on a product like this, and so they honestly don’t know if the affiliate approach will pay better than a per-unit royalty, or worse. So we’re going to try it out and see what happens. Fortunately, I’m in a position that I feel I can afford to experiment like this, allowing both myself and WebAssist to find out what works best in the long run.

Thus, if you’re planning to buy CSS Sculptor or know someone who is, I’d be grateful if you either clicked through one of the links hereabouts or linked to the product using my affiliate URL. I’ll have a link in the sidebar in the near future as well. The sidebar’s due for an overhaul anyhow.

So that’s one of the things that’s claimed my time over the last few months, and I’m pretty excited that it’s seeing the light of release. I’m even more excited about finding out what people think could be better about it so that we can improve what’s already a pretty darned nifty tool. If I do say so myself.

Jeff wrote in to say...

Yep you throw mëtäl hörns alright, but what is it that you say? The sound didn’t come through when I looked and I couldn’t get the feature tour or the Solution Recipe to load… =( I mean they’d open up their respective windows, but then they’d just hang at “Loading…” and go no where…

At any rate, I may just have me a good gander at this… nice to see you branching out into other arena’s…

Yes, it is a pretty darned nifty tool. The choice for using CSS Specificity, e.g., “#outerWrapper #contentWrapper #leftColumn1” was nice touch. Did you time this release for resolution of The Web Standards Crisis?

Eric :)
looks very intersting – though I’m a bit disappointed it’s for DW as I no longer use it. But congrats on the release – hope you’ll get great feedback :)
(just to let you know – I had problems with viewing the Breeze content in the popups as well…)
.. and who would have thought we’d see your mëtäl hörns!! :) rock on!

Dawn wrote in to say...

I’ve used several of WebAssist’s tools and was pretty excited to see you associated with their CSS product, Eric! It definitely makes it something to look at seriously. Joe, although I was able to view the gallery, I’m experiencing the same hanging issue with the Features Tour. I’m running a new installation of WinXP SP2 on a Dell Dimension 4600 (2GB RAM).

Luke wrote in to say...

Yeah, we’re seeing more and more problems with the video tour. Sorry about that, folks! Joe suspects it’s to do with server load and the way Flash stream video layers. He’s working on the problem as we speak and hopefully it’ll get resolved soon.

Noticed only minor implementation of reset rules. Might be worthwhile to consider an advanced version that includes the full reset, handheld style sheet generation [including the Meyer favorite, iPhone], automatic shorthand. If it did, might be handy for efficiency improvement in getting the basic grunt work out of the way in terms of style sheet and design rather than hard-coding the stuff. Would make a good learning tool, also. The conditional comment feature looks interesting. Examples shown do not indicate if external style sheets are created.

Not crazy about the use of pop-up and images for the galleries presented on the WebAssist site. Actual code would be better – I went to the galleries to specifically view the CSS code of the various layouts and to see how the layouts would perform across various browsers, including browser window size and monitor resolution.

Looks promising and authoring tools like these are definitely needed.

Pricing and affiliate links? Offer a 50% professional discount that demonstrates use of an affiliate link? I am a cheap bastard.

I’ve got it working on Dreamweaver 8 on my MacBook Pro. Give the product time — on first run it hangs a bit until the license key window opens. Once you’ve authenticated, it should run okay, albeit slowly.

I did get a little bit of a runaround on the WebAssist site: to get to the download page (after paying) I had to login, but it wouldn’t take a new registration. I think a user name and password must have been generated automatically. Once I asked for a password email and reset it, the download went smoothly.

Eric: I’ll be a face in the crowd at AEA Chicago on Monday. Looking forward to it.

LeadX – We tested on both DW 8 and CS3 MacOS and it was working fine throughout the entire QA process. Can you contact me (jlowery at webassist dot com) or better still file a Tech Support incident. That will help us track down any problems you’re having.

As for your comment on our support, we try harder every day and have recently enhanced our support staff. Our customer base has been growing steadily and we’re bolstering our support and documentation across the board. I think you’ll see a difference with this release and from now on.

thacker – We looked at a fuller implementation of the reset rule but initially decided to pare it down a bit so that newbies wouldn’t be caught short when they didn’t specify particular values, like line-height. We’ll continue to monitor folks reaction to that and adjust accordingly.

Hand-held style sheets was on the initial feature list, but got deferred. Your mention will move it up the list. :-)

Re: the Layout Gallery. We used figures of the 30 standard layouts X 12 color schemes because we didn’t want to give the code away. You can see a code sample from the Showcase tab on the site.

Eric, where and when can I buy a t-shirt of you throwing up the mëtäl hörns? I think that might sell as well, if not better, than CSS Sculptor. ;) (I will also be at AEA Chicago on Monday. Can’t wait!)

Wasn’t anticipating a response. Thank you. A reset style sheet can be dropped in by the content developer easily … am assuming the reset that is used by the extension can be disabled. Would have purchased it if the extension included hand-held media [which includes screen media type for the iPhone], assisted in developing alternate style sheets [accessibility] and if I knew for certainty that external style sheets were created. I can foresee, with an enhanced version of this extension, getting back into Dreamweaver to create and speed up production of initial and basic design only functions.

justin wrote in to say...

@tacker: On the output tab you have the ability to either embed the css in the page, save it to a new .css file, or append it to an existing .css file. If you choose to use external css, it would link the files in the html, then open them up in Dreamweaver for review. So it definitely supports external style sheets like you mention.

Not to rain on the parade or anything, but I should point out that Dreamweaver CS3 includes a number of CSS page layout templates. They are fully customizable, although you have to do it yourself. I like the idea of the GUI to manage it all for you.

On the question of external style sheets, yes, you can store code in the head, in a new external style sheet or in an existing one. If you choose an existing one, Sculptor checks to make sure there are no conflicts with existing IDs and notifies you if it finds any.

Mike – T-Shirts! Yes! How could I have overlooked that marketing opportunity!?!

leadx – That’s not what our records show. Our sales rep spoke with you several times on Friday and we processed a refund to your PayPal account at 3:48 PST. I’m looking at a response from PayPal that indicates the refund was issued.

I called and left a message at your office. Please call me back so we can clear up this issue.

Cam wrote in to say...

Wow, this does look pretty cool! The tree structure view looks especially helpful! It would definitely save time in the design process (except when I started playing with all the options)!

How is the HTML source order arranged in the CSS Sculptor designs?

All the CSS layouts that ship with Dreamweaver CS3 use source orders that put the sidebar content before the main content, even in designs with right column sidebars.

I was surprised by this. I thought there was a goal or standard that recommended putting the main content section first (following the header) for accessibility and search engine use (such as described in Matthew Levine’s article “In Search of the Holy Grail” on A List Apart).

Is that still something to aim for?

Can you comment on proper source order and what you use in CSS Sculptor?

Watching the feature tour now, looking really good…But, no captioning! The CC button is there, but when I click it, just a blue bar is added to the bottom of the movie display, just above the controls. I am hard of hearing, and the captions would have been appreciated – I am not good at following along with audio presentations like this.

I’ve seen captions in other flash videos (e.g. feature tours for Adobe CS3 products) and that was great, so I was bummed not to get it here as well.

Hi Cam – I can comment on the DW CS3 layouts since I wrote those. :) You said, “All the CSS layouts that ship with Dreamweaver CS3 use source orders that put the sidebar content before the main content, even in designs with right column sidebars.

I was surprised by this…”

There was a reason for that. The DW CS3 layouts shipped within a product with a huge user base that has a wide range of user expertise. Within the product there was no real method of supporting them (save the commenting… but no user manual, etc). We opted for consistency to avoid confusion.

Some of the layouts (specifically the hybrids) would be more complicated to create when floating all columns and using source order techniques. Thus, the decision was made to keep them all consistent and avoid confusion from layout type to layout type. That said, I’m completing a book about the layouts (using and extending them) so I have the ability to address customization there. But I did not have it within the product itself.

I’ve not seen the code that Web Assist and Eric created (so I can’t answer that source order question), but having a user interface as they do, they probably have more options in these areas. (Though I’d bet there were decisions made on their end as well where certain methods of coding might have been passed by to avoid “newbie confusion.” It’s the price you pay for a mass-marketed product.)

tripdragon wrote in to say...

it looks nice and all but it’s still dreamweaver. And there is still no Real sudo-wysiwyg tool for css that tries to blur code v.s. layout in a proper way. Much akin to Apples Pages or indesign, Pages does not make code good at all, but it’s layout athestictics are sweet

I was disappointed to hear how you had your contract structured with WebAssist. As a WA affiliate, I’d like to see you getting a cut of the pie when I sell your product (as would you I’m sure). Hopefully the way you’ve structured your compensation will end up better than the alternative! Thanks for helping WA put out a great product.

Mark wrote in to say...

Due to bugs in version 1, I was never able to get it to run successfully on my system. WA support was unable to help me. 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.

Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...