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]

An Event Apart redesigned

There’s a new aneventapart.com in town, featuring a 2009 schedule and a reformulated design. I designed the new site and Eric Meyer coded. (Validation freaks, only validator.nu is up to the task of recognizing the HTML 5 DOCTYPE used and validating against it; the validator.w3.org and htmlhelp.com validators can’t do this yet. Eric chose HTML 5 because it permits any element to be an HREF, and this empowered him to solve complex layout problems with simple, semantic markup. Eric, I know, will have loads more to say about this.)

Family branding concerns drove the previous design. Quite simply, the original An Event Apart site launched simultaneously with the 2005 redesign of A List Apart. Jason Santa Maria‘s stripped-down visual rethink was perfect for the magazine and is imitated, written about, and stolen outright to this day. It was a great design for our web magazine because it was created in response to the magazine’s content. It didn’t work as well for the conference because its design wasn’t driven by the kind of content a conference site publishes. But it was the right conference design for 2005 because the goal at that time was to create a strong brand uniting the long-running web design magazine with the new web design conference that sprang from it.

New goals for a new environment

In 2009, it’s less important to bolt the conference to the magazine by using the same layout for both: by now, most people who attend or have thought about attending An Event Apart know it is the A List Apart web design conference. What’s important in 2009 is to provide plenty of information about the show, since decisions about conference-going are being made in a financially (and psychologically) constricted environment. In 2005, it was enough to say “A List Apart has a conference.” Today more is needed. Today you need plenty of content to explain to the person who controls the purse strings just what you will learn and why a different conference wouldn’t be the same or “just as good.”

The redesign therefore began with a content strategy. The new design and new architecture fell out of that.

Action photos and high contrast

The other thing I went for—again, in conscious opposition to the beautifully understated previous design—was impact. I wanted this design to feel big and spacious (even on an iPhone’s screen) and to wow you with, for lack of a better word, a sense of eventfulness. And I think the big beautiful location images and the unafraid use of high contrast help achieve that.

Reinforcing the high contrast and helping to paint an event-focused picture, wherever possible I used action shots of our amazing speakers holding forth from the stage, rather than the more typical friendly backyard amateur head shot used on every other conference site (including the previous version of ours). I wanted to create excitement about the presentations these brilliant people will be making, and live action stage photos seemed like the way to do that. After all, if I’m going to see Elvis Costello perform, I want to see a picture of him onstage with his guitar—not a friendly down-to-earth shot of him taking out the garbage or hugging his nephews.

So that’s a quick overview of the redesign. The store is now open for all four shows and the complete Seattle show schedule is available for your viewing pleasure. I hope to see some of you in 2009 at our intensely educational two-day conference for people who make websites.

[tags]aneventapart, design, redesign, relaunch, webdesign, conference, events, HTML5, ericmeyer, zeldman[/tags]

Making Modular Layout Systems

Jason Santa Maria details his approach to building a modular system for laying out pages with CSS—“a handy way to predictably tame content without becoming predictable.” Deep tricks of the trade revealed!

[tags]modular, layout, system, css, design, webdesign, jasonsantamaria[/tags]

ALA 272: Accessible web video, better 404

In Issue No. 272 of A List Apart, for people who make websites:

This is How the Web Gets Regulated

by JOE CLARK

As in finance, so on the web: self-regulation has failed. Nearly ten years after specifications first required it, video captioning can barely be said to exist on the web. The big players, while swollen with self-congratulation, are technically incompetent, and nobody else is even trying. So what will it take to support the human and legal rights of hearing impaired web users? It just might take the law, says Joe Clark.

A More Useful 404

by DEAN FRICKEY

When broken links frustrate your site’s visitors, a typical 404 page explains what went wrong and provides links that may relate to the visitor’s quest. That’s good, but now you can do better. With Dean Frickey’s custom 404, when something’s amiss, pertinent information is sent not only to the visitor, but to the developer—so that, in many cases, the problem can be fixed! A better 404 means never having to say you’re sorry.

[tags]alistapart, closedcaptioning, captioning, captions, webvideo, video, accessible, accessibility, 404, error, reporting, usability, programming, design, webdesign, webdevelopment[/tags]

Real type on the web?

A proposal for a fonts working group is under discussion at the W3C. The minutes of a small meeting held on Thursday 23 October include a condensed, corrected transcription of a discussion between Sampo Kaasila (Bitstream), Mike Champion (Microsoft), John Daggett (Mozilla), Håkon Wium Lie (Opera), Liam Quin (W3C), Bert Bos (W3C), Alex Mogilevsky (Microsoft), Josh Soref (Nokia), Vladimir Levantovsky (Monotype), Klaas Bals (Inventive Designers), and Richard Ishida (W3C).

The meeting started with a discussion of Microsoft’s EOT (Embedded OpenType) versus raw fonts. Bert Bos, style activity lead and co-creator of CSS, has beautifully summarized the relevant pros and cons discussed.

For those just catching up with the issue of real type on the web, here’s a bone-simple intro:

  1. CSS provides a mechanism for embedding real fonts on your website, and some browsers support it, but its use probably violates your licensing agreement with the type foundry, and may also cause security problems on an end-user’s computer.
  2. Microsoft’s EOT (based on the same standard CSS mechanism) works harder to avoid violating your licensing agreement, and has long worked in Internet Explorer, but is not supported in other browsers, is not foolproof vis-a-vis type foundry licensing rules, and may also cause PC security problems.

The proposed fonts working group hopes to navigate the technical and business problems of providing real fonts on the web, and in its first meeting came up with a potential compromise proposal before lunch.

Like everyone these days, the W3C is feeling a financial pinch, which means, if a real fonts working group is formed, its size and scope will necessarily be somewhat limited. That could be a good thing, since small groups work more efficiently than large groups. But a financial constraint on the number of invited experts could make for tough going where some details are concerned—and with typography, as with web technology, the details are everything.

I advise every web designer who cares about typography and web standards—that’s all of you, right?—to read the minutes of this remarkable first gathering, and to keep watching the skies.

[tags]web typography, typography, standards, webstandards, W3C, fonts, embedded, @fontface, EOT, workinggroup[/tags]

ALA No. 270: progressive enhancement 2; work at home

In Issue No. 270 of A List Apart, for people who make websites:

Progressive Enhancement with CSS

by AARON GUSTAFSON

Organize multiple style sheets to simplify the creation of environmentally appropriate visual experiences. Support older browsers while keeping your CSS hack-free. Use generated content to provide visual enhancements, and seize the power of advanced selectors to create wondrous (or amusing) effects. Part two of a series.

Working From Home: The Readers Respond

by OUR GENTLE READERS

We asked. Our gentle readers answered. In A List Apart No. 263 we inquired how you walk the blurry line when you work from home. Here are your secrets—how to balance work and family, maintain energy and focus, get things done, and above all, how to remember the love.

[tags]progressiveenhancement, workathome, webdesign, webdevelopment, alistapart[/tags]

Photos from An Event Apart San Francisco

Take a dip in the Flickr photo pool from An Event Apart San Francisco 2008. Day Two is about to begin.

111 Minna Gallery (MediaTemple party)

[tags]aeasf08, aneventapart, webdesign, conference, sanfrancisco[/tags]

CSS Menu Writer debuts

Launched today, WebAssist Professional’s CSS Menu Writer™ for Dreamweaver takes the pain out of creating standards-compliant horizontal or vertical navigation menus with nested fly-outs.

I got to spend an hour with the program prior to its release, and was impressed with its flexibility and extreme ease of use. For instance, creating primary and secondary menu levels is as simple as pointing to your files and folders. If the client changes the approved site structure after you’ve already created your page templates, no problem: just drag files and folders to their changed locations and CSS Menu Writer will update your navigation.

The program comes with four horizontal and four vertical menus, each in 12 different color schemes—96 menus to start—with unlimited sub-levels. You can easily create Doug-Bowman-style “sliding doors” effects, as well as doing all the obvious stuff you’d expect to be able to do, like changing menu width, height, margin, and padding; swapping backgrounds and images; and saving custom creations as new presets to reedit or share with colleagues. The program also integrates easily with Eric Meyer’s CSS Sculptor.

CSS Menu Writer costs $99.99, but if you buy before May 27, it’s just $74.99.

[tags]webdesign, tools, software, webassist, css[/tags]