meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

CSS Sculptor Released

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.

57 Responses»

    • #1
    • Comment
    • Thu 23 Aug 2007
    • 0916
    Christopher Schmitt wrote in to say...

    Congrats on the software release!

    • #2
    • Comment
    • Thu 23 Aug 2007
    • 0930
    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…

    • #3
    • Comment
    • Thu 23 Aug 2007
    • 0942
    Joe Lowery - WebAssist wrote in to say...

    Jeff – C’mon, what else Eric say, but “ROCK!” On the Feature Tour and Solution Recipe, we haven’t seen the hanging issue you’re talking about. What’s your system and OS?

    • #4
    • Comment
    • Thu 23 Aug 2007
    • 0942
    Sean Fraser wrote in to say...

    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?

    • #5
    • Comment
    • Thu 23 Aug 2007
    • 0956
    Jeff Skinner wrote in to say...

    If there was any better way to start the day than with mëtal horns, I would not know.

    Shame that the featured tour isn’t loading for me. The world of WYSIWYG editors could use some semantic sense of humor.

    • #6
    • Comment
    • Thu 23 Aug 2007
    • 1002
    prisca wrote in to say...

    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!

    • #7
    • Comment
    • Thu 23 Aug 2007
    • 1008
    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).

    Hope this helps! I’d like to take a closer look.

    • #8
    • Comment
    • Thu 23 Aug 2007
    • 1030
    Luke wrote in to say...

    Can’t see the Features Tour on Windows Vista, IE 7.

    • #9
    • Comment
    • Thu 23 Aug 2007
    • 1033
    Eric Meyer 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.

    • #10
    • Comment
    • Thu 23 Aug 2007
    • 1037
    Joe Lowery - WebAssist wrote in to say...

    It’s looking like one of thoee “good” problems – all of our feature tours are extremely slow, so it’s the number of folks hitting the link at the same time. We’re looking into fixes.

    • #11
    • Comment
    • Thu 23 Aug 2007
    • 1040
    David Mead wrote in to say...

    Congrats on the release Eric.

    Though I’d like to see you “greenscreened over screenshots and being intermittently goofy” it didn’t play for me in Flock0.9 on XP Pro.

    The mëtäl hörns made me smile this morning.

    • #12
    • Pingback
    • Thu 23 Aug 2007
    • 1042
    Received from eyedeas » Blog Archive » CSS sculpting anyone ?

    […] → read Eric’s post on CSS Sculptor posted by priscaAugust 23rd, 2007 filed in handcoding, thoughts […]

    • #13
    • Comment
    • Thu 23 Aug 2007
    • 1103
    Eric Wiley wrote in to say...

    :D The server load problem is not being helped by people like me who hit refresh three times just to see you go from demure to full-rock formation.

    • #14
    • Comment
    • Thu 23 Aug 2007
    • 1217
    Scott Powers wrote in to say...

    Congrats Eric.. may have to give this a shot. Is there a projected timeline on a second release or is it a wait and see how the first release does.. type thing?

    • #15
    • Comment
    • Thu 23 Aug 2007
    • 1221
    thacker wrote in to say...

    Interesting.

    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.

    • #16
    • Comment
    • Thu 23 Aug 2007
    • 1329
    leadx wrote in to say...

    I’d be careful with this product. I just bought it and it’s not running on Dreamweaver 8 Mac 0SX. (Intel)

    Sorry Eric, but I cannot recommend a product that doesn’t work. By the way, webassist’s support is terrible!

    • #17
    • Comment
    • Thu 23 Aug 2007
    • 1334
    Joe Banks wrote in to say...

    I couldn’t believe it when I saw it. Wait, yes I could.

    I’m buyin’ in soon.

    Your Father’s Oldsmobile would be proud of your horn flashing.

    See you at the NASA Explorer’s session later this year!

    • #18
    • Pingback
    • Thu 23 Aug 2007
    • 1343
    Received from Todo lo automatizable será automatizado • Grancomo

    […] el turno al arte y ciencia de CSS gracias a CSS Sculptor, un producto-extensión de Dreamweaver desarrollado por Eric Meyer que incorpora y automatiza las mejores prácticas del momento en la creación de […]

    • #19
    • Comment
    • Thu 23 Aug 2007
    • 1414
    Lisa Firke wrote in to say...

    Leadx:

    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.

    • #20
    • Comment
    • Thu 23 Aug 2007
    • 1414
    Joe Lowery - WebAssist wrote in to say...

    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.

    • #21
    • Comment
    • Thu 23 Aug 2007
    • 1444
    Joe Lowery - WebAssist wrote in to say...

    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.

    Appreciate the feedback – Joe

    • #22
    • Comment
    • Thu 23 Aug 2007
    • 1453
    Mike Aparicio wrote in to say...

    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!)

    • #23
    • Comment
    • Thu 23 Aug 2007
    • 1552
    thacker wrote in to say...

    Lowery–

    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.

    Again, thanks.

    • #24
    • Comment
    • Thu 23 Aug 2007
    • 1605
    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.

    • #25
    • Comment
    • Thu 23 Aug 2007
    • 1651
    Jason Friesen wrote in to say...

    Who’s a rock star? :)

    • #26
    • Comment
    • Thu 23 Aug 2007
    • 1653
    leadx wrote in to say...

    Lowery – sent you an email…

    Lisa – I did close and re-open dreamweaver. I even did a restart of osx.

    Problem is not only that the program is extremely slow, it’s also un-usable. I’m not able to select anything.

    It’s very unstable, I don’t want to be a beta tester after paying.

    • #27
    • Comment
    • Thu 23 Aug 2007
    • 1655
    Tom wrote in to say...

    Rock? I always considered you a big band type of guy.

    • #28
    • Comment
    • Thu 23 Aug 2007
    • 1704
    Grant Palin wrote in to say...

    Niiiiiice! I want to try it out – no trial version?!

    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.

    • #29
    • Comment
    • Thu 23 Aug 2007
    • 1740
    Chriztian Steinmeier wrote in to say...

    What?? You mean you don’t use my CSS Box Model Exploratorium anymore… it’s a sad day. :-)

    Looks great – I’m sending all my Dreamweaver-using friends your way, that’s for sure!

    • #30
    • Comment
    • Thu 23 Aug 2007
    • 1800
    Joe Lowery - WebAssist wrote in to say...

    thacker – Again, sorry you’re having problems. We’re trying to track down the issue.

    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!?!

    • #31
    • Comment
    • Fri 24 Aug 2007
    • 1451
    Tom wrote in to say...

    Oh snap! I missed your WRUW gear yesterday due to slow server loads. Rock on!

    • #32
    • Pingback
    • Fri 24 Aug 2007
    • 2225
    Received from Trevor Davis | Blog » It’s Still a Stinking WYSIWYG

    […] the other day, Eric Meyer announced that he has been working with WebAssist to create Eric Meyer’s CSS Sculptor. It’s a […]

    • #33
    • Comment
    • Mon 27 Aug 2007
    • 1123
    Scott wrote in to say...

    Eric,
    Nice product. When the kinks are worked out with the video perhaps it could make it to The Deck.

    • #34
    • Comment
    • Mon 27 Aug 2007
    • 1312
    George wrote in to say...

    I read metal horns, then I clicked.

    Wow. That’s funny.

    Wish I would have had this product a few years back, good stuff.

    • #35
    • Comment
    • Mon 27 Aug 2007
    • 1423
    leadx wrote in to say...

    Hey Joe,

    Thanks for NOT emailing me back… further proof of your crappy support!

    I’d avoid working with this company in the future Eric.

    • #36
    • Comment
    • Mon 27 Aug 2007
    • 1510
    Joe Lowery - WebAssist wrote in to say...

    leadx – I was told you were working with another of our customer reps and didn’t want to duplicate their efforts. Did that not happen?

    • #37
    • Comment
    • Mon 27 Aug 2007
    • 1626
    leadx wrote in to say...

    No one has ever resolved my issues….

    I have had nothing but the run around with Webassist. I can promise to spread the good word everywhere. :) I’m just finishing a detailed blog post about my experience.

    • #38
    • Comment
    • Mon 27 Aug 2007
    • 1705
    Joe Lowery - WebAssist wrote in to say...

    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.

    • #39
    • Comment
    • Mon 27 Aug 2007
    • 1829
    Cam wrote in to say...

    Hi Eric,

    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?

    Thanks!

    • #40
    • Pingback
    • Tue 28 Aug 2007
    • 0451
    • #41
    • Comment
    • Tue 28 Aug 2007
    • 1326
    Tom L wrote in to say...

    Ok. I have to ask, but I’ll apologize now if I missed the latest something something, though I try to keep up with the ‘Jones’ (and Meyers) on all this CSS stuff…

    Your sample code uses pixels for font sizing? (Right off the bat for H1 and H2) The units are changeable, correct?

    • #42
    • Pingback
    • Thu 30 Aug 2007
    • 1759
    Received from Tripix.net » Blog Archive » YAML - Otro generador de Layouts CSS

    […] a la hora de hacer sus maquetas en CSS. A rejillas como YUI Grids o Blueprint y herramientas como CSS Sculptor de Eric Meyer o Constantinology se une ahora YAML Builder, que mediante un interesante interfaz realizado en […]

    • #43
    • Comment
    • Fri 7 Sep 2007
    • 1624
    Grant Palin wrote in to say...

    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.

    • #44
    • Comment
    • Sun 9 Sep 2007
    • 1513
    Stephanie Sullivan wrote in to say...

    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.)

    Hope that helps… :)
    Stef.

    • #45
    • Pingback
    • Tue 11 Sep 2007
    • 1053
    Received from Webdesign und Usability » Blog Archiv

    […] übersetzt wurden), bei Lynda.com sogar einen Screencast dazu aufgenommen und nun gibt es den CSS Sculptor von ihm. Achtung: Diesen Abschnitt nur dann weiterlesen, wenn man/frau mit Dreamweaver ab Version 8 […]

    • #46
    • Pingback
    • Fri 14 Sep 2007
    • 0625
    Received from ) design collected ( :: links for 2007-09-14

    […] Eric’s Archived Thoughts: CSS Sculptor Released 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. (tags: webdesign webdevelopment css dreamweaver software) […]

    • #47
    • Pingback
    • Tue 18 Sep 2007
    • 0819
    Received from Best of August 2007 | Best of the Month

    […] CSS Sculptor Eric Meyer releases his Dreamweaver-extension which can be used to generate CSS-based layouts with clean markup. Price: 149$. […]

    • #48
    • Pingback
    • Tue 18 Sep 2007
    • 0819
    Received from Nachlese August 2007 - Die Seiten des Monats | Nachlese

    […] CSS Sculptor Eric Meyer veröffentlichte die Release-Version seiner Dreamweaver-Erweiterung, mit der sich vielfältige standardkonforme CSS-basierte Layouts generieren lassen. Preis: 149$ […]

    • #49
    • Pingback
    • Tue 18 Sep 2007
    • 0953
    Received from Best of August 2007 .

    […] CSS Sculptor Eric Meyer releases his Dreamweaver-extension which can be used to generate CSS-based layouts with clean markup. Price: 149$. […]

    • #50
    • Pingback
    • Tue 18 Sep 2007
    • 1222
    Received from lost node » Blog Archive » Best of August 2007

    […] CSS Sculptor Eric Meyer releases his Dreamweaver-extension which can be used to generate CSS-based layouts with clean markup. Price: 149$. […]

    • #51
    • Comment
    • Wed 19 Sep 2007
    • 1005
    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

    • #52
    • Comment
    • Thu 20 Sep 2007
    • 1102
    Jesper wrote in to say...

    Thank you! I can now make the jump from based coding :-)
    *duck and covers’s*

    • #53
    • Comment
    • Thu 20 Sep 2007
    • 1112
    Jesper wrote in to say...

    that should be <table> based coding above…

    • #54
    • Pingback
    • Wed 26 Sep 2007
    • 1412
    Received from » Best of August 2007

    […] CSS Sculptor Eric Meyer releases his Dreamweaver-extension which can be used to generate CSS-based layouts with clean markup. Price: 149$. […]

    • #55
    • Comment
    • Sat 19 Jan 2008
    • 1115
    Phil wrote in to say...

    Very good extension. The only feature missing, is a way to order the blocks, eg. display content before sidebars, essential for SEO.

    Here’s what they told me…

    “There is no option in CSS sculptor for changing the order that content blocks are generated in. This is a change you would need to make manually after the pages have created.

    I will add a feature request for engineers to consider in a future version of CSS Sculptor.”

    …Fingers crossed it gets added.

    • #56
    • Comment
    • Mon 4 Feb 2008
    • 1457
    Ryan wrote in to say...

    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.

    • #57
    • Comment
    • Tue 18 Nov 2008
    • 1419
    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.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



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...


August 2007
SMTWTFS
July September
 1234
567891011
12131415161718
19202122232425
262728293031  

Sidestep

Feeds

Extras