Jeffrey Zeldman’s Web Standards Advisor

Launched today (my birthday), Jeffrey Zeldman’s Web Standards Advisor is a $49.99 extension for Adobe Dreamweaver. It includes two major interfaces:

  1. The Web Validator validates your HTML and CSS and verifies the proper use of microformats, including hCard and hCalendar, for single pages or entire websites.
  2. The Web Standards Advisor checks for subtleties of standards compliance in nine different areas—everything from structural use of headings to proper ID, class, and <div> element use. Nonstandard practices are flagged and reported in the Dreamweaver Results panel for quick code correction. A full report with more details and suggested fixes is also generated.

How did it get here?

Over coffee in New Orleans last year, WebAssist’s Joseph Lowery and I chatted about a fantasy product that could improve the markup of even the most experienced front-end coder. The benefits were obvious. After all, better markup means lighter, faster web pages whose content is easier for search engines (and thus people) to find.

The product would look over your shoulder and notice things.

  • If you were using a class when you might be better off using an ID (and vice-versa), the fantasy product would cough gently and tell you.
  • If you skipped a heading level—say, if you had h4s and h6s but no h5 on your site—it would discreetly whisper in your ear.
  • If, on an old site (or sadly, on a new one) you used class names that were visual instead of semantic (i.e. class=”big_yellow_box” instead of class=”additional_info”), it would quietly let you know about it.

To me, this was a fantasy product, because so many of these things seem to require human judgement. I didn’t think programmers could develop algorithms capable of simulating that level of judgement. Joseph Lowery took my doubt as a challenge.

A year of collaborative back-and-forth later, Jeffrey Zeldman’s Web Standards Advisor is a working 1.0 product.

How good is it?

I ran Jeffrey Zeldman’s Web Standards Advisor on the four-year-old markup of this site’s current blog layout, and discovered embarrassing mistakes that don’t show up on validators. (I haven’t fixed those mistakes yet, by the way. For fun, or extra credit, see if you can figure out what they are.)

Then I ran the product on several new sites coded by some of the best CSS and markup people in the business, and found a surprising quantity of mistakes there, as well. Nobody’s perfect—not even the best coders.

Some of the errors the product found were mere errors of style, but were still worth correcting, if only to set a good example for those who view source on your sites. Other errors the product revealed could affect how easy it is for people to find a site’s content. Fixing such errors is a business necessity.

Some issues are purely judgement calls: is it okay to sometimes use <b> instead of <strong>? When is it perfectly fine to skip a heading level? To address those subtleties, there is a wiki where such topics are discussed, and “error” messages link to the relevant topics in the wiki, so you can click straight through to the online discussion.

Who is it for?

  • Jeffrey Zeldman’s Web Standards Advisor will help beginning and intermediate coders write smarter, more compliant markup that makes site content easier to find.
  • It will help coders at any level (including expert) who use Dreamweaver as a primary web development tool, and who know about web standards but don’t spend all day thinking about them. Now you don’t have to—and you can still create leaner sites that work for more people, and whose content is easier to find.
  • Site owners might run the product on their site, to see how compliant it is and how findable their markup allows their content to be.

But what about many people reading this website, who write their XHTML and CSS by hand, and who rightfully consider themselves standardistas? That’s right. What about you?

You aren’t the primary customer, but you might find the product useful. I’m a hand-coder and always will be. I own Dreamweaver mainly because it comes with Adobe CS3 and CS4. Installing Jeffrey Zeldman’s Web Standards Advisor is a no-brainer, and running it on my work (or that of people working for me) turns up enough surprises to more than justify the time and expense.

Plus, after you use it to clean up your own, small, embarrassing errors of markup, you can run it on your heroes’ websites and revel in their mere mortality.

Disclosing the obvious

Jeffrey Zeldman's Web Standards Advisor

Jeffrey Zeldman’s Web Standards Advisor is a product. It is not a free product. At $49.99, it’s not terribly expensive, but it’s not free.

I have a small financial interest and a gigantic brand interest in it. If it’s a weak product, it reflects badly on me, my agency, my conference, my books, and possibly even the very category of web standards. I therefore have a huge stake in making sure it’s a good product—that it’s easy to use, meets real needs now, and evolves in response to customer feedback and the slow but steady evolution of standards. (XHTML 2? HTML 5? More microformats? Stay tuned.)

[tags]webstandards, advisor, dreamweaver, extension, markup, helper, assistant, webassist, zeldman[/tags]

80 thoughts on “Jeffrey Zeldman’s Web Standards Advisor”

  1. This looks like a great tool for those of us in the corporate world stuck with Dreamweaver. At my job I’ve inherited a lot of pages that need a lot of cleaning up, this would help me quickly identify the low hanging fruit problems.

  2. Congratulations!! I’ll have to ask Joseph if he used the plumbing we put in place for the Browser Compatibility Check feature — as a geek (and as one of the implementers of BCC), I’m dying to know how it works. :-) This is an awesome addition to a web developer’s toolbox, and I have no doubt it will make the web a better place. Woo!

  3. Jeffrey, This sounds awesome. I haven’t fired up Dreamweaver for years, working mostly in TextMate. This could make me break it out every once in a while to make sure I am not messing things up. Good job!

  4. This looks like a thoroughly useful concept. I don’t use Dreamweaver on a regular basis, but would definitely consider putting my code through it to ensure I’m keeping standards at the forefront of my development.

    It could be interesting to have a paid web service which worked in a similar way, though I’m sure that would require another year of development…!

  5. Hi Jeffrey

    It sounds like a great product. I’d love to see it available as a CODA plugin or similar though as there’s a large number of us ‘experts’ (I use the term lightly on myself!) who have moved away from Dreamweaver/Adobe due to licensing costs and the ‘average’ code it produces.

  6. Nice. Any hopes of releasing a standalone validator that one could run on a local Machine. Independent of DW. I know that wasn’t the purpose of this product, just curious if you see it as an idea worth looking into.

    Congrats and I hope it sells 873,092 units!

  7. Sounds like a fantastic product, and very much needed in the industry. I’m not a Dreamweaver hater (if you have to use a GUI, i wouldn’t recommend anything else), but I do hand-code, and I’d love to see a standalone version of this, preferably something that could interface with a plugin in any of the many hand-coder’s editors (like TextMate).

    Or… maybe this is a good excuse to re-acquaint myself with Dreamweaver, i’ve heard it’s improved since I last used it in… oh… 2001?

    Kudos, and best of luck with the launch!

  8. PROPER standards?
    His Microformat are anti-standard!
    rel=”bookmark” IS NOT a proper standard.
    The standard-complaint method is class=”permalink”

  9. This is great! I don’t use Dreamweaver on a regular basis, but now I have an easy way of running a check on the pages and sites that I create to make sure they comply with the latest standards. Thanks for taking the time and effort into making a create add-on to a web development tool. Any thoughts/plans to add this to other editors as well?

  10. Jeffrey – wishing you a wonderful day today — and all the very, very best, ever!!! Happy birthday XOX

    Shame this is a DW extension – hoping Coda will soon get a similar treatment. With Eric’s CSS Sculptor – this is now the 2nd good extension we’re missing out on, those of us who abandoned DW for the sake of Coda… :'(

  11. This is fabulous. I would buy it simply because it does, in fact, have your name on it. I’ve trusted your name, your opinion, your brand, for years. I’m really look forward to integrating this into my work environment, as I expect it will make me look wonderful and guide me (gently) into better coding practice. Happy Birthday to you as you celebrate your birthday by launching this product. I will celebrate my birthday (1/17) by purchasing it.

    Obviously a win-win for us both.

  12. “Some issues are purely judgement calls.” I find myself arguing with other designers over topics like this a lot and usually it’s just a matter of “that’s the way I’ve always done it so therefore it’s the right way.”

  13. @Matthew: “I’m not a Dreamweaver hater (if you have to use a GUI, i wouldn’t recommend anything else), but I do hand-code”
    I use Dreamweaver at work, and have never once used the GUI. DW is a first-rate hand coding text editor, containing the guts of the old HomeSite editor.

    @Alun: “…who have moved away from Dreamweaver/Adobe due to licensing costs and the ‘average’ code it produces.”
    DW doesn’t “produce” any code at all, if you don’t want it to. It’s a text editor. It produces whatever you type into it.

  14. Although I’m not a current user of Dreamweaver, I know that this is just the sort of add-on that it has been screaming for in the past…(and with your good name added to it, that just makes it even better IMO). Awesome to think this product started life a year ago in New Orleans (it poured with rain at the time didn’t it?)

    I hope this product is widely adopted and embraced by the Dreamweaver-using community – what a great addition! :)

  15. Lori – I’m not sure if the engineers used any of the BCC API calls (both Dave Hoffman and Danilo Celic worked on WSA, but I’ll check. I’m hoping folks won’t get confused with the BCC-related CSS Advisor and the Web Standards Advisor

    All – thanks for the kind words on the Web Standards Advisor. I had a great time working with Jeffrey on it and we’re really hoping the community finds it useful. And yes, we are looking at ways to bring both this and Eric Meyer’s CSS Sculptor to a non-Dreamweaver audience, but that’s a bit further down the road.

    Also, as Jeffrey mentioned in his post, there is a corresponding wiki that covers the web standards areas addressed by the Advisor. It’s not set up for comments – right now, just Jeffrey and I are collaborating on it – but if you have some feedback, feel free to send it to me at jlowery at webassist dot com.

  16. A very happy birthday to you! Have fun!
    I think the product sounds like an excellent idea. Even though I don’t use DW, I can see the gap it will fill and I hope it works out well for you!
    David
    p.s. Is one of the problems with the empty alt tag in the photos at the top of the page. There is also what seems to be a not strictly necessary div around the timestamp — does it flag that kind of thing too?

  17. Really cool start and an awesome approach… I would suggest to take a look at Aggiorno, a visual studio plugin (also available as a stand alone tool) that automates a variety of web coding improving.

    A bit different from the Web Standards Advisor, Aggiorno goes a bit extra by fixing the errors automatically for XHTML 1.0 (including structural, syntax and replacing deprecated elements with a more moderm approach) and extends with some other assistants for accesibility, seo, etc… it’s cool that your tool extends the concept with judgment rules I think that is a really cool approach and something that should be improved upon.

    I would love if you could take a look over at Artinsoft’s approach and maybe you guys could come up with some ideas together. I think with more and more semantization of the web, tools like this will become a most in every web developers tool box.

    Cheers and good luck,

    G.

  18. Looks like a great product, I think I’ll ask work to invest in it for me.

    No need for the rant at the end though, it’s not worth focusing on the detractors at all in talking about the product.

  19. Wow, it’s Mr. Zeldman’s birthday and he gives US a present!

    I’m an avid DW (code-view only, please!) user and can’t wait to purchase this! Thank you!

  20. Hope your birthday is going well!

    At $49.99, it’s not terribly expensive

    Seems pretty ridiculous to me, considering it’s just a program extension! It might be worth this much if it weren’t dependent on Dreamweaver.

  21. Is there any trial period for the product? I have to admit, based on the feature list, the product didn’t look all that compelling. I would like to evaluate the quality and effectiveness of the results, but I didn’t see a way to do that, and the feature list has functions covered by the web developer toolbar (with some added functionality and validation), combined with much more vague terms such as “Ensures correct tag use, and Promotes standard layout techniques.” Without some evaluation of what those kinds of features are actually doing, however, I’ll admit that this toolbar doesn’t seem necessary.

    I’m not trying to bring you down on your birthday, but I thought I’d express some concerns about how this product could really help me based on the feature list. I think a demonstration of what this product does, rather than gushing about how many mistakes the pros make, to SHOW us those mistakes in and how your validator can help correct them. The feature list alone didn’t really make me jump out of my seat to grab my wallet.

  22. Hi Jeffrey. First and foremost, happy birthday! Also, congratulations on the release of such a great tool. I think this will do a lot of designers and developers wonders, especially coupled with Adobe’s Dreamweaver—which is already a great tool (although I am an avid Panic Coda user). Regardless, I use them both daily and, like yourself and I’m sure a lot of other commenters on here, I write my CSS and XHTML by hand as well. Although I feel like I’m pretty standards-compliant, nobody is perfect. I’ve been looking for something like this. I’ve come across other tools that do similar tasks but nothing as in depth as this.

  23. Lori,

    We did not use the Browser Compatibility Check features, mostly due to them being introduced in CS3 and in this particular release of the extension supports DW8. So the BCC features aren’t currently usable for for this extension. Perhaps when support is moved to CS3+ we can leverage them.

    Happy birthday Jeffrey! It was great to meet you at An Event Apart in Chicago last October.

  24. I’m not trying to bring you down on your birthday, but I thought I’d express some concerns about how this product could really help me based on the feature list. I think a demonstration of what this product does, rather than gushing about how many mistakes the pros make, to SHOW us those mistakes in and how your validator can help correct them.

    Did you see the video demonstration? I watched it but I have similar concerns. It seems like it’s designed to pick out stuff that I like to think that I’m pretty well aware of. Jeffrey says the extension can benefit anyone up to expert-level coders, but I wouldn’t mind hearing a few testimonials from others who have used it (although a trial period would be the ideal option).

  25. Good luck with it!
    A much more sensible direction than the Jeffrey Zeldman brand of motor oil that was rumored to be in the works. ;)
    I use DW on occasion and have Eric Meyer’s CSS Sculptor installed.
    I have one complaint and I hope it’s just a bug in CSS Sculptor and not endemic to all WebAssist products. On launch, the program has frequently, and annoyingly, nagged me to re-enter the licensing code. The last time it did this, I was on vacation in Aruba – my surmise is that the program was reacting to my change in IP address. However, it had done the same thing so many times in the past that I had squrreled a copy of the licensing code on my laptop, just in case, and it saved the day. I’m all for copy protection but repeatedly naggy – no good. This is no bull.
    As you can imagine, it’s very annoying to use a product that not once, but many times has looked at you funny and said, “Hey, buddy! What are you trying to pull?”
    Just a heads up.

  26. It seems like it’s designed to pick out stuff that I like to think that I’m pretty well aware of.

    @John: At your level, that’s probably true for the most part. But, for instance, even on your home page at tyssendesign.com.au (an excellently coded site, by the way), you use a positioning label (“div id=’top-nav'”) on line 116. “Primary-nav” would be a more structural, less visual, label. A little thing, to be sure.

    I’m not saying this to be critical! Your site’s markup is of the highest caliber. I’m just pointing out the kind of issue that even a very experienced coder like yourself might be made aware of via the program and might otherwise not be aware of.

    Whether little things like that make the plug-in worth your while or not is something only you can answer.

    I wouldn’t mind hearing a few testimonials from others who have used it

    Well, it’s the product’s first day on the market. I imagine testimonials will start rolling in after a few people have used the product. :)

    I have one complaint and I hope it’s just a bug in CSS Sculptor and not endemic to all WebAssist products. On launch, the program has frequently, and annoyingly, nagged me to re-enter the licensing code.

    @Richard: Wow! That sounds very frustrating. It also sounds like it may be a bug in your install? Hopefully our friends at WebAssist can work with you to get to the root of the problem.

  27. Brian and Richard – we don’t have a trial, but there is a 15 day money-back guarantee so you can try it out with no risk.

    Richard – that definitely sounds like a bug. It should just check once, the first time you use it after installation. We have free technical support, so if you’d like to submit a support ticket, we can check into it.

  28. Thank you for your answers and time! I actually missed the full demo, I’ll check that out when I get a few more minutes.

  29. It looks very promising, Jeffrey. And, by the way, Dreamweaver is a good tool in hand-coding too.

    Talking about semantics and structure, and all the current buzz around HTML5 and XHTML2, I’m wondering that maybe it’s time to start writing a common vocabulary for values that are intended to layout content (in a similar sense of what John Allsopp proposed). That vocabulary could start to be shared among web designer community and pushed in a standard-like manner.

  30. Sounds like a great product, not sure I’ll buy it myself but it sounds great none the less. The reason I wouldn’t buy it (or similar products) is that I’m a purist and insist on getting my code right through testing and validating. However, as it nudges you with tips on improving you code, not necessarily errors, it may be worth while after all. Perhaps I will look into buying it.

  31. Sounds interesting but I’m not so comfortable shelling out $50 for something I can’t try (even if I can ask for my money back).

  32. Brian: You can try the product for 15 days, and if you don’t like it, you don’t pay a dime. It is essentially a 15 day free trial—they just ask you to register first.

    I can see that it would be quicker and less intimidating if you got the free 15 day trial without registering first, but it’s not like someone is going to hold onto your money if you ask for it back during the 15 day period.

    (And that’s all I’ll say about the business side. I don’t set the policies.)

  33. I’m trying really hard to not submit any hardware or software purchase requests this year (our budget just got cut by 20%, yay for valuing higher education during an economic downturn /sarcasm). You’re not making it easy.

    I’ll add my voice to the folks asking for non-DW versions of this. I’d actually be willing to pay more for a stand-alone version ala CSS Tidy. I use DW at work because it’s bought and paid for, but if they bother to ask before they just go ahead and purchase CS4 I’ll make the case to switch to Coda or BBEdit.

    I’d also like to see this evolve into a social/community project. Best practices evolve, right? (Although that may be less true for things like semantic code.) As a proprietary system, someone would of course have to make judgment calls as to what is and isn’t a current best practice. Hopefully that would be you since your name is on the product. By the time any method has been tried and tested well enough to truly be considered a best practice, I’m sure you will have encountered it via the blogosphere or possibly even edited an article for ALA on the matter. But even if it’s largely a PR strategy, I like the idea of being able to tag a link to a resource which could inform a future update of the product.

    Am I even making sense here? Also, does the acronym ALA ever present communications problems in your household given your wife’s background as a librarian? :)

  34. Hmm, social/community aspect is pretty well covered by the reference wiki, since it’s collaborative by nature.

    I’d still like to know a bit more about how updates will be handled. For example, HTML 5, CSS 3, and IE 8 will all change the landscape of the industry in the coming years. Of course, it may be several years before any of those are supported well enough to really matter. I’m sure distilling your expertise into software form was quite an exercise for the initial release. This sounds like it’d be a beast to maintain in the long run.

  35. I stopped using DreamWeaver about 3 years ago :|

    Admittedly, I was fond of the Extensions put out by guys like Al Sparber and Project VII, but I ended up migrating to e-TextEditor (when I was using Windows) and now I’m a full time TextMate junkie (<3 my mac).

    Any chance you’d be able to provide the functionality in a TextMate Bundle someday? I know it’s asking a lot, perhaps once sales take off? :)

  36. Happy Birthday Jeffrey.

    Have you thought about the possibility of doing a version for Coda? I sure would be interested in that; I like the idea of the product, but don’t use Dreamweaver.

  37. Hi,
    I must admit to being an old fashioned hand coder, have been for the past 25 years, from COBOL, assembler now in XHTML and scripting. I have found that as the years progressed shortcuts have become more and more attractive. It may be to do with after the logic has been mental constructed the coding has become tedious. The ends justify the means. Cross mixing languages has become second nature as it enables the best of both worlds. Alas it does make validation difficult? Any pointers on keeping for instance a piece of code that uses PHP/VMScript, XHTML, JavaScript validated without using comments to suppress sections of the code?
    Thanks in advance
    George

  38. Any pointers on keeping for instance a piece of code that uses PHP/VMScript, XHTML, JavaScript validated without using comments to suppress sections of the code?

    Unobtrusive scripting helps a lot. You know to separate presentation from structure by using CSS for layout and semantic, non-presentational HTML for markup. Do the same thing with your scripts.

  39. Awesome.

    Do I get a set of free steak knives with purchase?

    Or do you send me a second copy ABSOLUTELY FREE!!!!!!

  40. Purchased this tonight.. and I am very disappointed

    Most of our sites are dynamic.. so it will only check local files

    Even on static sites, if I select single files, it shows no issues (complete source code)
    but I do get results when I have it scan the whole local site (which is useless on the results as it goes into folders/files that are not desired (admin, includes and such)

  41. Jason – one of the scope options for checking local files is to inspect selected files and folders in Files panel. That’s typically how I use it – select the individual HTML files in the root and relevant folders. It automatically goes traverses subfolders as well.

    On the dynamic front – that was an feature we didn’t include in v1, but a real possibility for a later version.

  42. old timer if open minded will be a monster programmer.
    they have experience, knowledge and expertise that bring them to what they have right now.

    so it just an open mind that will bring them to another level of the career.
    Just my idea :)

Comments are closed.