Categories
A List Apart Accessibility Advocacy An Event Apart Appearances art direction creativity CSS Design development events experience Web Design Web Standards Zeldman

Your Guide to An Event Apart Boston

The complete schedule for An Event Apart Boston is now online for your reading pleasure.

Join Eric Meyer and your humble host with truly special guest speakers Jason Santa Maria, Jeremy Keith, Joshua Porter, Whitney Hess, Dan Cederholm, Daniel Mall, Derek Featherstone, Aarron Walter, Scott Thomas, Heather Champ, Andy Clarke, and GoodBarry’s Brett Welch for two days of design, code, and content.

An intensely educational two-day conference for passionate practitioners of standards-based web design, An Event Apart brings together thirteen of the leading minds in web design for two days of non-stop inspiration and enlightenment. If you care about code as well as content, usability as well as design, this is the one you’ve been waiting for.

Educational discounts and group rates are available, and everyone saves $100 during the early bird registration period.

Comments off.

[tags]aneventapart, AEA, webdesign, conference, webstandards[/tags]

Categories
Design development HTML Web Design Web Standards Websites XHTML

Web Standards Test: Top 100 Sites

While working on the third edition of Designing With Web Standards, I decided to visit Alexa’s Top 100 US Sites to see how many of the top 100 use valid markup, how many nearly validate (i.e. would validate if not for an error or two), and which DOCTYPEs predominate. Even with a fistful of porn sites in the mix, it was dull work: click a link, load the home page, run a validation bookmarklet, record the result.

I had no expectations. I made no assumptions. I just clicked and tested.

Such tests tell us little

I make no claims about what I found. If all the home pages of the top 100 sites were valid, it would not mean that the pages beneath the home page level were valid, nor would it prove that the sites were authored semantically. (An HTML 4.0 table layout with no semantics can validate; so can a site composed entirely of non-semantic divs with presentational labels.)

Validation is not the be-all of standards-based design; it merely indicates that the markup, whatever its semantic quality may be, complies with the requirements of a particular standard. Conversely, lack of validation does not prove lack of interest in web standards: ads and other third-party content can wreck a once-valid template, as can later third-party development work.

Moreover, nothing causal or predictive can be determined from these results. If 25% of the top 100 sites validated in my test, it would not mean that 25% of all sites on the web validate.

And I got nothing like 25%.

Enough disclaimers. On with the test.

Seven percent validate

On this day, in this test, seven out of 100 “top US” sites validated:

  1. MSN (#7 in Alexa’s list) validates as XHTML 1.0 Strict. Who’d a thunk it? (Validation link)
  2. Craigslist (#10) validates as HTML 4.01 Transitional. I’ll buy that! (Validation link)
  3. WordPress (#22) validates as XHTML 1.0 Transitional. The power of the press, baby! (Validation link)
  4. Time Warner RoadRunner (#39) validates as XHTML 1.0 Transitional. Meep-Meep! (Validation link)
  5. BBC Newsline Ticker (#50) validates as XHTML 1.0 Strict. Cheers, mates! (Validation link)
  6. The US Internal Revenue Service (#58) validates as HTML 4.01 Transitional. Our tax dollars at work! (Validation link)
  7. TinyPic (#73) (“Free Image Hosting”), coded by ZURB, validates as XHTML 1.0 Transitional. (Validation link)

Also-rans (one or two errors)

  1. Wikipedia (#8) almost validates as XHTML 1.0 Strict (two errors).
  2. Apple (#29) almost validates as HTML 4.01 Transitional (two errors).
  3. Linkedin.com (#45) almost validates as HTML 4.01 Transitional (one error).
  4. AWeber Communications (#83) almost validates as XHTML 1.0 Transitional (one error: an onClick element)

Suis generis

The Pirate Bay (#68), “the world’s largest BitTorrent tracker,” goes in and out of validation. When it validates, it’s a beautiful thing, and it belongs on the list. But when it goes out of validation, it can quickly stack up ten errors or more. (Validation Link)

No-shows

Google (#1) does not validate or declare a DOCTYPE.

Yahoo (#2) does not validate or declare a DOCTYPE.

YouTube (#3) does not validate but at least declares that it is HTML 4.01 Transitional. Progress!

A surprising number of sites that do not come close to validating declare a DOCTYPE of XHTML 1.0 Strict. For instance, Twitter (#93) is authored in XHTML 1.0 Strict, although it contains seven errors.

This preference for Strict among non-validating sites suggests that at one point these sites were made over by standards-aware developers; but that any standards improvements made to these sites were lost by subsequent developers. (It doesn’t prove this; it merely suggests.) Another possibility is that some developers use tools that are more standards-aware than they are. (For instance, a developer with little to no knowledge of web standards might use a tool that defaults to the XHTML 1.0 Strict DOCTYPE.)

Some sites that used to validate (such as Blogger.com, previously designed by Douglas Bowman, and Reference.com, previously designed by Happy Cog) no longer do so; maintaining standards or design compliance may not have been important to new owners or new directors.

[tags]validation, webstandards, alexa, test[/tags]

Categories
Code Design development Tools Web Design

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]

Categories
A List Apart Accessibility Advocacy Design HTML5 Markup mobile Standards Web Design Web Standards

ALA 275: Duty Now For The Future

What better way to begin 2009 than by looking at the future of web design? In Issue No. 275 of A List Apart, for people who make websites, we study the promise and problems of HTML 5, and chart a path toward mobile CSS that works.

Return of the Mobile Style Sheet

by DOMINIQUE HAZAËL-MASSIEUX

At least 10% of your visitors access your site over a mobile device. They deserve a good experience (and if you provide one, they’ll keep coming back). Converting your multi-column layout to a single, linear flow is a good start. But mobile devices are not created equal, and their disparate handling of CSS is like 1998 all over again. Please your users and tame their devices with handheld style sheets, CSS media queries, and (where necessary) JavaScript or server-side techniques.

Semantics in HTML 5

by JOHN ALLSOPP

The BBC’s dropping of hCalendar because of accessibility and usability concerns demonstrates that we have pushed the semantic capability of HTML far beyond what it can handle. The need to clearly and unambiguously add rich, meaningful semantics to markup is a driving goal of the HTML 5 project. Yet HTML 5 has two problems: it is not backward compatible because its semantic elements will not work in 75% of our browsers; and it is not forward compatible because its semantics are not extensible. If “making up new elements” isn’t the solution, what is?

[tags]HTML5, mobileCSS, webstandards, alistapart, johnallsopp, W3C, Dominique Hazael-Massieux[/tags]

Categories
Community Design Standards Web Design

Extreme Markover

“Markover a site for a non-profit. Showcase your talent and gain industry recognition!” So advise the founders of Extreme Markover, an event that pits the talent and expertise of standards-based web designers against the challenges faced by underfunded nonprofits.

Sponsored by the World Organization of Webmasters in partnership with Web Design World 2008 Boston and Bizland, “the leader in web hosting,” Extreme Markover invites web professionals worldwide to demonstrate their talent and expertise while giving back.

For details, or to submit a prospective markover candidate, visit extrememarkover.org.

[tags]WOW, webdesign, webstandards, markover, competitions[/tags]

Categories
Design DWWS Standards

Blue Beanie Day is here

Today is of course Blue Beanie Day. Thank you for supporting web standards.

Comments off.

[tags]bluebeanieday, designingwithwebstandards, DWWS, webstandards[/tags]

Categories
Blue Beanie Day Browsers Standards Web Design Websites

Blue Beanie Day II

Blue Beanie Day

Announcing the second annual Blue Beanie Day. Please join us on Friday, November 28, 2008 to show your support for web standards and accessibility.

Participating’s easy: get your picture taken wearing a blue toque or beanie. On November 28, switch your profile picture in Facebook, Twitter, et al., and post your royal blueness to the Blue Beanie Day 2008 photo group at Flickr. That’s all there is to it!

Blue Beanie Day is the brainchild of Doug Vos, creator of the Designing With Web Standards group on Facebook. Since October 27, 2007, over 4,300 members have joined, representing over fifty countries.

Doug invented Blue Beanie Day in 2007 to promote awareness of web standards. Blue Beanie Day 2007 can be found on Facebook; photos from last year’s celebration are available for your viewing pleasure.

[tags]webstandards, bluebeanieday[/tags]

Categories
Accessibility Applications architecture art direction Browsers bugs business Code Community content copyright creativity Fonts Ideas industry Layout links spec Standards stealing Tools Typography Usability User Experience W3C Working

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]

Categories
A List Apart Design development Standards Web Design

ALA 268: rethinking standards

Q. Why did the semantic web cross the road?
A. @#$% you!

Issue No. 268 of A List Apart fine-tunes the mechanics of progressive enhancement and rethinks the assumptions of standards-based design:

Web Standards 2008: Three Circles of Hell

by MOLLY E. HOLZSCHLAG

Standards promised to keep the web from fragmenting. But as the web standards movement advances in several directions at once, and as communication between those seeking to advance the web grows fractious, are our standards losing their relevance, and their ability to foster an accessible, interoperable web for all?

Test-Driven Progressive Enhancement

by SCOTT JEHL

Starting with semantic HTML, and layering enhancements using JavaScript and CSS, is supposed to create good experiences for all. Alas, enhancements still find their way to aging browsers and under-featured mobile devices that don’t parse them properly. What’s a developer to do? Scott Jehl makes the case for capabilities testing.

Comments off.

[tags]alistapart, progressiveenhancement, webstandards[/tags]

Categories
A List Apart Accessibility art direction Design development industry maturity Standards Survey Usability User Experience Web Design Websites wisdom work writing

A List Apart is changing

A List Apart, for people who make websites, is slowly changing course.

For most of its decade of publication, ALA has been the leading journal of standards-based web design. Initially a lonely voice in the desert, we taught CSS layout before browsers correctly supported it, and helped The WaSP persuade browser makers to do the right thing. Once browsers’ standards support was up to snuff, we educated and excited designers and developers about standards-based design, preaching accessibility, teaching semantic markup, and helping you strategize how to sell this new way of designing websites to your clients, coworkers, and boss.

Most famously, over the years, writers for ALA have presented the design community with one amazing and powerfully useful new CSS technique after another. Initially radically new techniques that are now part of the vocabulary of all web designers include Paul Sowden’s “Alternative Styles,” Mark Newhouse’s list-based navigation, Eric Meyer’s intro to print styles, Douglas Bowman’s “Sliding Doors,” Dave Shea’s “CSS Sprites,” Dan Cederholm’s “Faux Columns,” Patrick Griffiths and Dan Webb’s “Suckerfish Dropdowns,” Drew McLellan’s “Flash Satay,” and so on and so on. There are literally too many great ones to name here. (Newcomers to standards-based design, check Erin Lynch’s “The ALA Primer Part Two: Resources For Beginners“.)

Web standards are in our DNA and will always be a core part of our editorial focus. Standards fans, never fear. We will not abandon our post. But since late 2005, we have consciously begun steering ALA back to its earliest roots as a magazine for all people who make websites—writers, architects, strategists, researchers, and yes, even marketers and clients as well as designers and developers. This means that, along with issues that focus on new methods and subtleties of markup and layout, we will also publish issues that discuss practical and sometimes theoretical aspects of user experience design, from the implications of ubiquitous computing to keeping communities civil.

The trick is to bring our huge group of highly passionate readers along for the ride. My wife likens it to piloting the Queen Mary. (Q. How do you make the Queen Mary turn left? A. Very, very slowly.)

The slow, deliberate, gradual introduction of articles on business and theory has not pleased all of ALA’s readers, some of whom may unrealistically wish that every issue would present them with the equivalent of a new “Sliding Doors.” It is possible, of course, to publish one CSS (or JavaScript or Jquery) article after another, and to do so on an almost daily basis. We could do that. Certainly we get enough submissions. The trouble is that most articles of this kind are either edge cases of limited utility, or derivatives that do not break significant new ground. (Either that, or they are flawed in our estimation, e.g. relying on dozens of non-semantic divs to create a moderately pleasing, minor visual effect.)

We review hundreds of articles and publish dozens. Some web magazines seem to have those proportions reversed, and some readers don’t seem to mind, and that’s fine. But any content you see in ALA has been vetted and deeply massaged by the toughest editorial team in the business. And when you see a new “design tech” article in our pages, you can be sure it has passed muster with our hard-ass technical editors.

Moreover, the fields of meaningful new CSS tricks have mostly yielded their fuels. We’ve done that. We’ve done it together with you. While a few new lodes of value undoubtedly remain to be tapped, we as a community, and as individuals who wish to grow as designers, need to absorb new knowledge. ALA will continue to be a place where you can do that.

When we began focusing on web standards in 1998, we were told we were wasting readers’ time on impractical crap of little value to working designers and developers. But we kept on anyway, and the things we learned and taught are now mainstream and workaday. While we apologize to readers who are again being made irritable by our insistence on occasionally presenting material that does not fall directly within their comfort zone, we hope that this experiment will prove to be of value in the end.

[tags]alistapart, webdesign, magazine, editorial, content, focus, change, publishing, standards, webstandards, css, design, layout, userexperience[/tags]

Categories
A List Apart Ajax Applications Browsers bugs chrome Design Google Microsoft

A bug in Google Chrome

Between hurricanes and hericanes, you could easily have missed the technology news. Released yesterday in public beta, Google Chrome is a standards-compliant web browser created to erode Microsoft’s browser dominance (i.e. to boost Google’s web dominance) while also rethinking what a browser is and does in the age of web apps and Google’s YouTube.

The new browser is based on Webkit, the advanced-standards-compliant, open source browser engine that powers Apple’s Safari for Mac and PC, but Chrome currently runs only in Windows. You figure that out.

Here are the new browser’s terms of service.

And here’s an important early bug report from Jeremy Jarratt: Google Chrome wrongly displays alternate styles as if active, thus “breaking” websites that use them. (Here’s more about alternate style sheets, from Paul Sowden’s groundbreaking 2001 A List Apart article.)

To compete with Microsoft, the new browser must offer what other browsers do not. The risk inherent in that proposition is a return to proprietary browser code. It is not yet clear to me whether Chrome will compete the wrong way—offering Chrome-only features based on Chrome-only code, thus prompting Microsoft to rethink its commitment to standards—or the right way.

Competing by offering features other browsers do not (easier downloads, streamlined user interface) or by consolidating other browsers’ best features (Opera’s Speed Dial, Firefox’s auto-complete) avoids this risk, as improvements—or at any rate, changes—to the browser’s user interface have no bearing on the display of existing web content.

Competing by supporting web standards ahead of the pack, although not entirely without risk, would also be a reasonable and exciting way to compete. When one browser supports a standard, it goads other browser makers into also supporting it. Because Safari, for instance, supports @font-face, Firefox is not far behind in supporting that CSS spec. @font-face raises font licensing problems, but we’ll discuss those another time. The risk that concerns us here is when a browser supports an emerging specification before it is finalized, thus, essentially, freezing the spec before it is ready. But that is the traditional dance between spec authors and browser makers.

For web standards and web content, we once again live in interesting times. Welcome, Chrome!

[tags]google, chrome, googlechrome, beta, software, browsers, standards, webbrowsers, webstandards, bugs, standards-compliant, alternatestyles, alternatecss[/tags]

Categories
A List Apart Accessibility Design development Publishing Standards Tools

ALA 256: map rolling & data viz

In Issue No. 256 of A List Apart, for people who make websites, Wilson Miner shares techniques for incorporating data visualization into standards-based web navigation patterns, and Paul Smith shows how to replicate Google Maps’ functionality with open source software to produce high-quality mapping applications tailored to your design goals. Read and enjoy.

P.S. Just for the heck of it, we’ve started an A List Apart Facebook group. Saddle up!

Comments off. (Comment in the magazine.)

[tags]alistapart, datavisualization, maprolling, googlemaps, opensource, navigation, standards, webstandards, design, webdesign[/tags]

Categories
A List Apart Accessibility Browsers Design development industry Publishing Standards work

Not your father’s standards switch

The DOCTYPE switch isn’t what it used to be.

For most of the past seven years, the DOCTYPE switch stood designers and developers in good stead as a toggle between standards mode and quirks mode. The switch enabled browsers to accurately support the work of responsible designers who cared about accessibility, findability, and lean, semantic markup. It also enabled those same browsers to support the old-fashioned, table-driven junk markup your grandpappy writes.

But when IE7, with its tremendously improved support for standards, “broke the web,” it revealed the flaw in our beloved toggle. The quest was on to find a more reliable ensurer of forward compatibility. Is version targeting the answer?

In Issue No. 251 of A List Apart, for people who make websites, Aaron Gustafson of The Web Standards Project and ALA describes the workings of and logic behind version targeting, a proposed replacement to the DOCTYPE switch. It’s an idea whose simplicity you may admire immediately; or you may, at least initially, want to run screaming in the opposite direction.

That’s how ALA‘s Eric Meyer felt, when he first previewed Aaron’s report. So did I. But we came around—and in “A Standardista’s Journey,” the companion piece to Aaron’s article, Eric explains how his thinking about version targeting evolved.

Microsoft is on board to support version targeting in IE8; they hope other browser makers will do likewise. The Web Standards Project worked with the Redmond company to forge this new path in forward compatible design. It’s with Microsoft’s consent that we unveil version targeting in this issue. In a future issue, we’ll discuss the implications for scripting.

[tags]standards, webstandards, DOCTYPE, DOCTYPE switch, forward compatible, forward compatibility, versionlock, IE8[/tags]