XHTML DOA WTF

Firefox developers who were initially alerted to a problem on this page, please view the Firefox test page and the page that explains its use. — JZ

The web’s future isn’t what the web’s past cracked it up to be. 1999: XML is the light and XHTML is the way. 2009: XHTML is dead—kind of.

From the W3C news archive for 2 July 2009:

XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5

2009-07-02: Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity. (Permalink)

Please note that this thread has been updated with useful comments and links that help make sense of the emergence of HTML 5, the death of XHTML 2.0, and what designers and developers need to know about the present and future of web markup.

Read more

  • Web Fonts, HTML 5 Roundup: Worthwhile reading on the hot new web font proposals, and on HTML 5/CSS 3 basics, plus a demo of advanced HTML 5 trickery. — 20 July 2009
  • HTML 5: Nav Ambiguity Resolved. An e-mail from Chairman Hickson resolves an ambiguity in the nav element of HTML 5. What does that mean in English? Glad you asked! — 13 July 2009
  • Web Standards Secret Sauce: Even though Firefox and Opera offered powerfully compelling visions of what could be accomplished with web standards back when IE6 offered a poor experience, Firefox and Opera, not unlike Linux and Mac OS, were platforms for the converted. Thanks largely to the success of the iPhone, Webkit, in the form of Safari, has been a surprising force for good on the web, raising people’s expectations about what a web browser can and should do, and what a web page should look like. — 12 July 2009
  • In Defense of Web Developers: Pushing back against the “XHTML is bullshit, man!” crowd’s using the cessation of XHTML 2.0 activity to condescend to—or even childishly glory in the “folly” of—web developers who build with XHTML 1.0, a stable W3C recommendation for nearly ten years, and one that will continue to work indefinitely. — 7 July 2009

[tags]W3C, XML, XHTML, HTML, HTML5, WTF[/tags]

Sour Outlook

It’s outrageous that the CSS standard created in 1996 is not properly supported in Outlook 2010. Let’s do something about it.

Hundreds of millions use Microsoft Internet Explorer to access the web, and Microsoft Outlook to send and receive email. As everyone reading this knows, the good news is that in IE8, Microsoft has released a browser that supports web standards at a high level. The shockingly bad news is that Microsoft is still using the Word rendering engine to display HTML email in Outlook 2010.

What does this mean for web designers, developers, and users? In the words of the “Let’s Fix It” project created by the Email Standards Project, Campaign Monitor, and Newism, it means exactly this:

[F]or the next 5 years your email designs will need tables for layout, have no support for CSS like float and position, no background images and lots more. Want proof? Here’s the same email in Outlook 2000 & 2010.

It’s difficult to believe that in 2009, after diligently improving standards support in IE7 and now IE8, Microsoft would force email designers to use nonsemantic table layout techniques that fractured the web, squandered bandwidth, and made a joke of accessibility back in the 1990s.

Accounting for stupidity

For a company that claims to believe in innovation and standards, and has spent five years redeeming itself in the web standards community, the decision to use the non-standards-compliant, decades-old Word rendering engine in the mail program that accompanies its shiny standards-compliant browser makes no sense from any angle. It’s not good for users, not good for business, not good for designers. It’s not logical, not on-brand, and the very opposite of a PR win.

Rumor has it that Microsoft chose the Word rendering engine because its Outlook division “couldn’t afford” to pay its browser division for IE8. And by “couldn’t afford” I don’t mean Microsoft has no money; I mean someone at this fabulously wealthy corporation must have neglected to budget for an internal cost. Big companies love these fictions where one part of the company “pays” another, and accountants love this stuff as well, for reasons that make Jesus cry out anew.

But if the rumor’s right, and if the Outlook division couldn’t afford to license the IE8 rendering engine, there are two very simple solutions: use Webkit or Gecko. They’re both free, and they both kick ass.

Why it matters

You may hope that this bone-headed decision will push millions of people into the warm embrace of Opera, Safari, Chrome, and Firefox, but it probably won’t. Most people, especially most working people, don’t have a choice about their operating system or browser. Ditto their corporate email platform.

Likewise, most web designers, whether in-house, agency, or freelance, are perpetually called upon to create HTML emails for opt-in customers. As Outlook’s Word rendering engine doesn’t support the most basic CSS layout tools such as float, designers cannot use our hard-won standards-based layout tools in the creation of these mails—unless they and their employers are willing to send broken messages to tens millions of Outlook users. No employer, of course, would sanction such a strategy. And this is precisely how self-serving decisions by Microsoft profoundly retard the adoption of standards on the web. Even when one Microsoft division has embraced standards, actions by another division ensure that millions of customers will have substandard experiences and hundreds of thousands of developers still won’t get the message that our medium has standards which can be used today.

So it’s up to us, the community, to let Microsoft know how we feel.

Participate in the Outlook’s Broken project. All it takes is a tweet.

[tags]browsers, bugs, IE8, outlook, microsoft, iranelection[/tags]

“Google Bets Big on HTML 5”

While the entire HTML 5 standard is years or more from adoption, there are many powerful features available in browsers today. In fact, five key next-generation features are already available in the latest (sometimes experimental) browser builds from Firefox, Opera, Safari, and Google Chrome.

Tim O’Reilly: Google Bets Big on HTML 5

Striving to avoid the mistake Microsoft made when it bet on binary applications over the web, Google is counting on HTML 5 adoption to expand the capability of web applications. Tim O’Reilly describes Google’s strategy and lists five key HTML 5 features that are already supported in Safari, Firefox, Opera, and Chrome.

[tags]HTML5, Google, O’Reilly, TimO’Reilly, canvas, browsers, webapps, web applications, webstandards[/tags]

Redesign in progress

Here’s a little something for a Wednesday evening. (Or wherever day and time it is in your part of the world.)

The body and bottom of the next zeldman.com design are now finished. Tomorrow I start working on the top.

Have a look.

Looks extra sweet in iPhone.

I’m designing from the content out. Meaning that I designed the middle of the page (the part you read) first. Because that’s what this site is about.

When I was satisfied that it was not only readable but actually encouraged reading, I brought in colors and started working on the footer. (The colors, I need not point out to longtime visitors, hearken back to the zeldman.com brand as it was in the 1990s.)

The footer, I reckoned, was the right place for my literary and software products.

I designed the grid in my head, verified it on sketch paper, and laid out the footer bits in Photoshop just to make sure they fit and looked right. Essentially, though, this is a design process that takes place outside Photoshop. That is, it starts in my head, gets interpreted via CSS, viewed in a browser, and tweaked.

Do not interpret this as me dumping on Photoshop. I love Photoshop and could not live or work without it. But especially for a simple site focused on reading, I find it quicker and easier to tweak font settings in code than to laboriously render pages in Photoshop.

If you view source, I haven’t optimized the CSS. (There’s no sense in doing so yet, as I still have to design the top of the page.)

I thought about waiting till I was finished before showing anything. That, after all, is what any sensible designer would do. But this site has a long history of redesigning in public, and the current design has been with us at least four years too long. Since I can’t snap my fingers and change it, sharing is the next best thing.

A work in progress. Like ourselves.

[tags]zeldman, zeldman.com, redesign, webdesign, css, code[/tags]

ALA 282: Life After Georgia

In Issue No. 282 of A List Apart, For People Who Make Websites:

  • Can we finally get real type on the web?
  • Does beauty in design have a benefit besides aesthetic pleasure?

Real Fonts on the Web: An Interview with The Font Bureau’s David Berlow

by DAVID BERLOW, JEFFREY ZELDMAN

Is there life after Georgia? We ask David Berlow, co-founder of The Font Bureau, Inc, and the first TrueType type designer, how type designers and web designers can work together to resolve licensing and technology issues that stand between us and real fonts on the web.

In Defense of Eye Candy

by STEPHEN P. ANDERSON

Research proves attractive things work better. How we think cannot be separated from how we feel. The next time a boss, client, or co-worker scoffs at the notion that beauty is an important aspect of interface design, point their peepers here.

A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

[tags]alistapart, type, typography, realtype, truetype, CSS, beauty, design, aesthetics[/tags]

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]