Archived entries for Front End Engineering

W3C News: WAI-ARIA Suite Updated

The Protocols and Formats Working Group has published updated Working Drafts of WAI-ARIA Roadmap, Roles, and States and Properties. The suite describes accessibility of rich Web content using interactive technologies such as AJAX and DHTML. These concepts are further introduced in the WAI-ARIA Overview. The PFWG charter has been updated to allow the group to publish Recommendation-track documents. Accordingly, WAI-ARIA Roles and States and Properties are now intended to become W3C Recommendations; the Roadmap remains a draft Working Group Note. Visit the WAI PFWG home page.

Note that there is a new WAI ARIA introduction and overview document, and that comments are welcome until 19 January 2006.

Quick Comment: Choose Class/ID Names Based on Semantic and/or Structural Meaning

Replying to comments on my 24ways article about YUI Grids, I had occasion to mention the two things to consider when choosing good class and ID names. I want to write more on this, but for now wanted to cross-post my quick note:

Regarding class and ID names:

Names should not be based on appearance, but on meaning. For maximum extensibility, choose names that express semantic meaning (derived from the element’s content), and/or structural meaning (derived from the element’s role in the DOM’s tree). Good structural names include “footer” and “module”; good semantic names include “price” and “date”.

The alternative, what-it-looks-like names such as “left” and “doc950px”, is contextually brittle (i.e., mobile) and temporally brittle (because things change). These are the same reasons professional consensus says class=”redButton” and class=”smallBoldVerdana” are undesirable.

How to Use YUI Grids for Fluid CSS Page Layout

For those of you not reading 24ways each day this month, allow me to point out that I wrote a tutorial for it that’s live right now. It’s called Intricate Fluid Layouts in Three Easy Steps, and teaches you how to build CSS layouts that work on all modern browsers effortlessly using YUI Grids. Enjoy!

Also, I suppose I should let you know that I’m flying out on a redeye flight tonight to start my winter holiday. I hope to write once more before shuttering things, but if I don’t get a chance let me be among the first to wish you a very happy new year.

On Appropriate Use of DIVs, or When Divitis Doesn’t Apply

Divitis refers to the misuse of the DIV element in markup. Too often, sites are converted to tableless by blindly substituting a <div> for each <td> and <tr>. Related afflictions are widespread: one prominent news site wraps each “paragraph” of content in a <div class="p"> element. This pointless mess isn’t an improvement, and tastes as bad as yesterday’s tag soup.

Markup’s job is to generously impart meaning. This principle of “meaningful markup” is core to Web Standards’ ethos. Divitis misses it completely.

But not all DIVs metastasize into divitis.

According to the authoritative W3C spec, DIVs are specifically designed “for adding structure to documents.” Reasonable examples include encapsulating distinct modules (e.g., this is the weather module; this is the module’s footer region) and grouping together modules that live in the same structure (e.g., these modules belong to the secondary group/column). This is the appropriate use of the DIV element.

If one pillar of the Web Standards pantheon says markup should exclusively describe content, the other pillar says presentation instructions belong to CSS exclusively: Markup denotes structure, while CSS renders it. Sometimes structure and page layout feel more like presentation than content, but in truth it is equal parts both. Structure communicated in markup – even when the structure is ultimately expressed visually – is the appropriate use of a DIV.

Web Builder 2.0 Slides

I’m back in my suite at Ceasar’s in Vegas, having just finished presenting my third of three talks at the Web Builder 2.0 conference. Yesterday I presented two talks: my Accessible DHTML talk, and my Yahoo! vs. Yahoo! DHTML Case Studies talk. Today I presented a new talk titled Inside the Yahoo! User Interface (YUI) Library. All three seemed well received, and it was an honor to have a packed room for each. I met lots of great people, and am looking forward to following up with all the new people I met. (Please drop me a note if I didn’t get your email address!)

The Yahoo! User Interface (YUI) Library

This talk was in four parts: Why we build it; What we built; Why we gave it away; Why you might like using it.

Accessible DHTML

What are some techniques for making modern web interfaces accessible?

Yahoo! vs. Yahoo! – Case Studies of Three Mainstream, Large-Scale Ajax/DHTML Implementations

How do you manage complex object/event interfaces? Memory Management? Data Transportation? Etc.

Web Site Optimization – Part 1

Over on the YUI Blog, Tenni Theurer has just posted part 1 in a series sharing what we’ve found by researching web site optimization. At conferences over the last six months I’ve given hints about some of our research findings, and told you there were more to come, and so I’m especially happy to finally have something to show. The #1 rule of better performance is to reduce HTTP requests. We’ll talk about how and why in future posts, but for now head over and read her first installment:

Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests

San Francisco, California | Creative Commons By-2.5 License | Contact

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.