You can see and download the slides at Slideshare (German). As I promised to write a detailed post about ARIA enhanced tab navigation for the Webkrauts web standards advent calendar (think of a German version of 24 ways) you will be able to enjoy an English tutorial soon. Never mind the references to Chris in the slides — I had to choose an example from my flickr pictures, and I believe there are too many presentations already with kittens.

The conference was surprisingly innovative: I half expected a crowd of suits as the event was co-organized by the Austrian Ministry of Health, Family and Youth, instead there were many young faces and a fair percentage of women. Things I have learned (and tweeted about) include:

• As of January 2009, websites sponsored by the Austrian Ministry of Health will only receive funding when they are accessible. That doesn’t come as a surprise as a European Ministerial Declaration in 2006 announced that accessibility and best practices could become mandatory in public procurement in 2010.
• Artur Ortega showed examples of Dirk Ginader’s accessibility features for Yahoo! Finance, including two input fields where the labels were dynamically updated after a currency was chosen. So a screenreader read “convert pound sterling to euros” instead of “convert currency to currency.”
• One reason for JavaScript enhanced HTML controls for Flash objects like Yahoo! video is that the Flash object cannot get tab focus when the wmode param is set to opaque or transparent. Still without that param it is impossible to tab into a Flash object in Firefox 3. Or did I overlook something?
• Designer Maria Putzhuber quoted an interesting delusion: 70% of designers believe that visitors are almost always able to maintain orientation while in fact just 10% of the visitors are able to achieve this. What do you think is the reason?

Deutsche Fassung

I started my conference program with a case study by the BBC. They did a redesign and managed to squeeze formerly 60 images into 3 sliding doors and sprites. Their home page is now under 300K and 30 HTTP requests. Nice to see Yahoo’s Exceptional Performance guidelines go mainstream. About 5% of their users access the site without JavaScript. They don’t get identical features, but they get identical care. For them accessibility isn’t a buzzword, it’s become a natural part of their daily work. So they were able to find out that blur() is not a friend with JAWS. Also the BBC plays well with the other kids: they joined the OpenID foundation, and with BBC backstage they open their content through an API. Another charming idea is their public beta where people can testdrive new features. About 60% have personalized their home page, although one of the speakers described the personalization features with “my mom’s head exploded.” They used agile development with 2 week sprints, run the website in 12 languages, but don’t have a CDN yet because of the license fees.

Another case study about the LOHAS community Edenbee wasn’t that exiting, mostly because I knew the platform since beta and didn’t get quite why I should speak with other people about changing their lightbulbs. But it’s nice to keep track of your carbon footprint, a feature that uses the AMEE open API.

I was curious about HTML 5, so I went to the presentation of Lachlan Hunt and James Graham. Still I don’t see any advantage of having a bunch of new elements that are incompatible with older browsers when I can achieve the same with ARIA attributes. But I understand the rationale behind some of their decisions, although that doesn’t mean I come to the same conclusions.

For example people use a lot of “nav” and “menu” classes. To make their live easier, the WHATWG came up with the idea to create a nav element. A block level element, so you wouldn’t have to use those <div class="nav"> any more. But every time I use something like class="navigation" it will be an unordered list! I don’t need another div, I’m perfectly happy with my ul and role="navigation". It’s truly backward compatible, it’s semantic, I can use it today, and there isn’t a steep learning curve.

Then I went to two design talks by Andy Clarke and Dan Rubin, and though their designs were beautiful, the code examples were not. Imagine the flexibility of a newspaper article and compare that with the inflexibility of absolutely positioned paragraphs with fixed heights. Exactly. Apart from that Andy’s main inspiration came from comic books. It never hurts to throw in some colorful images.

Like in comic books, usability is not about getting from A to B, it’s about the experience of getting from A to B. In comic books the size of a panel and the amount of text strongly influences the reading speed. So you can emphasize content and add dynamics in your web design. That doesn’t mean necessarily that everything has to be in boxes. Emphasis can also be added by removing the boxes.

Dan Rubin used a lot of effects on his designs, like a noise filter to add texture on monochrome surfaces. Nice idea, though that implies the designer explaining the rationale of such a feature to the front-end engineers. They would either ignore it because they overlooked the subtle texture or because they assumed it would be just noise. Some less intrusive hint I will readily adopt was using a letter-spacing of −1 on headlines to prevent tiny rivers between letters.

What slightly worries me is that Dan talked about re-using patterns for some effects in Photoshop. Re-using patterns is the same in CSS, but re-usable effects in Photoshop can mean an unusable amount of work in CSS and lots of pictures making the website slow. What I miss so far is a common understanding of effects and patterns that are both easy to work with in Photoshop and in frontend programming.

The next day started with Nate Koechley’s keynote about professional frontend engineering. He chose the topic because he thinks this is critical to the advancement of the Internet, and I couldn’t agree more. As Frontend Engineers we write software with XHTML, CSS, JavaScript, and quite some amount of PHP. Douglas Crockford calls this “the most hostile software development environment imaginable,” and if you take a look at this graphic from Nate’s slides you will understand why. There are a number of knowledge areas that can be applied in a number of ways on three operating systems and half a dozen browsers in two rendering modes. If you ever wondered why you sometimes see little clouds of smoke coming out of your frontend engineering heads, that’s why.

There are four guiding principles:

1. Availability and accessibility for all users worldwide
2. Openness: share, learn, support, advocate
3. Richness: provide, but not too much
4. Stability

Then there are three core techniques: Graded Browser Support, Progressive Enhancement, and Unobtrusive JavaScript.If you haven’t heard about those concepts, please read about them now.

At that point the presentation turned into giving advice for quite a number of best practices and tips, like using JSLint, YUI Unit Testing, or YUI Profiler to enhance the quality of your code. Or serving cacheable assets from cookie-free domains. Or anticipated preloads: sneak in your new JavaScript and CSS files a week before the relaunch. Or did you know that the iPhone 2G can keep only 19 assets in cache, and that it doesn’t cache anything larger than 25K? Uncompressed 25K? Needless to say, Nate’s presentation was one of the conference highlights.

Later I heard a few things about building applications with existing frameworks and APIs, a timely comparison between JavaScript libraries held by no other than jQuery’s John Resig, some tips on internationalization by Richard Ishida, and a panel about accessibility. The one sentence that stuck most in that panel was: “Don’t be the guy with the problems, be the guy with the solutions.” In fact it’s very hard to be passionate about your job while being pragmatic and providing solutions instead of just saying “no.” Something Richard Schwerdtfeger wrote about in a different context:

Working in the accessibility field is extremely difficult. It requires very specialized skills — including incredible persistence. Accessibility is often viewed as additional work that is not always planned for. It requires a person who is tough, committed, patient, and caring to deliver an accessible solution that is usable to our customers. To do this you must have tremendous passion for your job as there is always someone or something to trip you up.

Combining passion and diplomacy is a goal many web evangelists still have to work on… In the meantime remember that accessibility is most likely to have a sustainable impact when it is supported by senior management, when there is an accessibility policy for a company, and when smart companies realize that there is money to be made by maximizing the target audience.

In contrast, color contrast analyzers use algorithms from the Web Content Accessibility Guidelines (WCAG) to obtain verifiable, objective results for luminosity, brightness and contrast. Those results give us an impression how fore- and background colors are perceivable by other people.

An example

Visiting the iTunes store we can say subjectively that the light gray text on a dark gray background is somehow hard to read. It’s straining, and possibly that’s not only due to the small font size:

If we check it with a color contrast analyzer, we get results like these:

The luminosity contrast ratio is sufficient with 5.37, the difference in brightness only just fails with 116 (125 being the lower limit), and the difference in color is insufficient with a result of 348 (the lower limit is 500).

So it’s not us getting old — the color values are indeed poorly chosen!

Downloads and links

There are various tools to test color contrast:

• Firefox Add-Ons: Colour Contrast Analyser and Juicy Studio Accessibility Toolbar
• Internet Explorer: Web Accessibility Toolbar 2.0 (WAT)
• Opera: Web Accessibility Toolbar 1.1
• Colour Contrast Analyser 2.2 as standalone software for Windows or Mac OS

As web application:

• Juicystudio Colour Contrast Analyser
• More resources listed by the W3C

In this post:

• Dan Cederholm: Bulletproof web design
• Robin Christopherson: Beyond a code audit
• Cameron Moll: Mobile web design
• Nate Koechley: Yahoo! vs. Yahoo! vs. Yahoo!
• Tantek Çelik: Microformats: evolving the web
• “Hot topics” panel
• More presentations

The evening:before featured another get-together in a fancy work:after club, which can be summed up like this: Sweden won against Paraguay, and it was hard to talk to others because some notorious DJ wouldn’t turn down the volume. He desperately tried to get somebody on the dance floor switching from house music to r&b pop, but didn’t realize that was not what the audience wanted.

Bulletproof web design

If there was an award for best presentation, Dan Cederholm would get my vote! His slides were so well-designed, so clean, and the special effects (not seen in the PDF version) contributed to clarify the scope.

It was like Jeremy Keith’s presentation the day before, where you knew all the things he was talking about, still something made “click” and shifted your perception — and if it’s only that you think “that’s what I always needed to show to my designers!”

Scene from the early computer game Dig Dug (Atari 1983), where you pump up monsters until they explode

His example for thinking ahead showed a photo of a new warehouse in San Francisco, where the windows had been inserted to be future proof, but cemented over for the current use. So think ahead, because content amount and text size may vary, content changes and needs to be maintained, and because the environment can change. Take something off, like images, CSS, or JavaScript, and make sure the website still functions.

“The journey begins by letting go of control, and becoming flexible.”

John Allsopp, “A Dao of Web Design”

A lot of his examples worked by setting a 50% value for the horizontal or vertical background-position in combination with overlapping images, and he introduced the term “Dig Dug Text Test” as a metaphor for pumping up text and assuring the design is still not destroyed. Reminder to self: add more references to early 1980’s games in presentations, they are so cool!

Beyond a code audit

Robin Christopherson’s bad karma was that he relied on the unreliable wireless network in the conference center, therefore a few examples from the web refused to work.

But by struggling with the technical constraints he set a real-world example for the attending web developers. Robin is blind, and he did not notice the Windows XP bubbles popping up once in a while trying to alert him that the network was unavailable. He was unable to login on the QE2CC screen, because it was inaccessible and refreshed too often. Also most people I spoke with were deeply impressed by the incredible speed his screen reader was set to.

He had also prepared a couple of educational films about challenges on the web for people beyond the visually impaired, like a woman with learning disabilities who didn’t understand the word “disclaimer,” or a quadriplegic with a mouthstick and a voice recognition system, which was useless when the alt text in images or Flash applications did not match the displayed text. I know what a tremendous amount of work the production of such little films is, and I’m looking forward to access them on Robin’s site. Also check his speaker’s notes.

Mobile web design

Cameron Moll mentioned a few times that he had held this presentation a year ago. Therefore it was very professional, very slick, but a little unemotional and in my opinion not quite up to date.

Okay, there are more mobile phones than computers, more mobiles than landline connections, but he didn’t stress the incredible impact the wide adoption of Opera supporting JavaScript on cellphones will have. That’s finally a common platform for web applications using Ajax, as opposed to hundreds of different implementations of Java which are almost impossible to test. That’s a most remarkable development with the potential of revolutionizing mobile applications — Cameron hardly mentioned it, although this became public in November 2005.

Of course WML is dead, long live XHTML MP! You should serve content from a .mobi domain and concentrate on the contextually relevant information: People might check their eBay watchlist on their cellphone, but they don’t upload items to sell, so ignore features like that when developing for mobile devices.

Also my question about Vodafone and other carriers inserting invalid code in the pages they serve through their proxy might not have been clear enough, because Cameron replied it’s up to the carriers and the browsers how to interpret pages, while developers can control the code.

Unfortunately that’s untrue when carriers compress images more and insert JavaScript to get the original images with higher resolutions with a key combination. One script is inserted with the deprecated language attribute in the header, while the other comes after the closing </html> tag, thus rendering your valid XHTML strict code to tag soup. The problem not only manifests on mobile browsing devices, but also when you surf with a regular notebook using your mobile access. Therefore a @media handheld CSS, browser sniffing, or serving the MIME type depending on the HTTP accept header are all doomed. And there’s no way to prevent the carriers from doing such evil.

Yahoo! vs. Yahoo! vs. Yahoo!

I went to this presentation because Nate Koechley recently published his smart concept paper about graded browser support, which we immediately adopted. What I didn’t expect was a most impressive roller coaster trip through browser performance!

Yahoo! has a beta version out for their new portal, also Yahoo! Photos and Yahoo! Mail is under development. All of them make more or less heavy use of DHTML and Ajax. Yahoo’s goals were increasing performance by 300%, adding interactivity (vulgo: drag & drop), and supporting web standards.

For a fast response they used techniques like CSS sprites, or memory management. In Nate’s words browsers are still “a pain in the ass,” and “the web is the most hostile software engineering environment imaginable.” DHTML leaks memory like a sieve, so for each constructor use a destructor. Instead of adding events to thousands of email objects Yahoo! used the existing document.onmousemove event and checked if the mouse was over an object or white space, then passed the event to that object or drew a rectangular choice box. Key concepts are conservation, destruction, and recycling iFrames (about:blank). Use Drip as a tool for measuring memory leaks, test extreme object counts, test long interactions, and test extensive navigation.

Also their developers prefer JSON over XML because parsing XML degrades performance greater than linear as XML size increases.

They have identified HTTP requests as a main performance killer. Browsers still only process two or four HTTP requests at a time, especially start pages are not cached as effectively as they imagined, and parsing JavaScript freezes the browser. Therefore they rather serve a single large file with CSS in the header, and JavaScript as close to the </body> tag as possible.

Regarding browsers it is faster to develop for standards, than patch. Browser support must not be binary, and it does not mean “the same.”

Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogenous essence of the Web.

There are more IE5 browsers out there than IE 5.5, and IE7 “already moved the needle.”

With all the DHTML and Ajax I was concerned about accessibility, but in a sidenote I almost missed Nate mentioned the IBM contribution for DHTML accessibility. Wonderful!

Microformats: evolving the web

When microformats are even on the radar of Bill Gates, how could I ignore them? I had no clue before Tantek Çelik’s presentation @media 2006, and now I’m implementing them in this post. Microformats are virulent.

Basically you insert a few class names into your code, like

1. <p class="vcard">
2. <a class="url fn"
href="http://tantek.com"> Tantek Çelik</a>
3. </p>

There are microformats for contact cards, calendars, reviews, geo information, and many more. Even the Creative Commons license and the PICS label implemented in this page count as microformats. XFN and XOXO, too.

You can parse this page through a Technorati contacts feed service or use a tool like the Tails extension for Firefox, and voilà, there’s a vcard you could import into your address book (if there wasn’t this Thunderbird bug which prevents exactly this). With the hcalendar microformat you synchronize your calendar with event schedules on a website accordingly.

There are a few issues I ran into when I implemented hcards, and the documentation could have more examples, but they are on Tantek’s to-do list. Also sometimes it means extra, non-semantic markup, but as microformats increase semantic meaning, I assume it gets Tim Berners-Lee’s blessing. So go for it, microformats are definitely among the web’s next big things!

“Hot topics” panel

I had the pleasure to meet Molly Holzschlag earlier in a coffee break, and while I was sorry I couldn’t attend her session I18N, awakening the sleeping giant, I’m confident I didn’t miss much information as I am pretty familiar with her old articles in her regular column in WebTechniques and the current activity of the W3C I18N group, where she is a member.

Jens Grochtdreis reports in his blog about the passionate presentation she gave earlier, and although there is more technical experience and awareness in Europe with multilingual websites, rarely they pay respect to cultural differences, like the meaning of colors. Molly gives everything to educate on I18N and promote web standards, she is also a member of WaSP. I’m glad she seems to have found a way to get some help and support, as she is an outstanding, but sensitive person.

Anyway, she was part of the “hot topics” panel, where questions from the audience where considered by a group of experts: Molly, Jon Hicks, Jeremy Keith, Eric Meyer, and Tantek Çelik. They had a lot of fun and agreed CSS has become more mainstream in the last year, as you don’t have to defend CSS against table layout anymore. Well, reading the discussions in German forums and reviewing the code of other websites, there’s still a lot of educational work to be done. Also they talked about the accessibility of Ajax, and mashups as the next big thing, but you can read a decent transcript of the session in Stuart’s blog over at Muffinresearch.

Conclusions

If you have followed me this far, you can see @media was a big inspiration, it was a lot of fun, especially the after event on Saturday, and I can only recommend the conference! There are endless flickr pictures and quite a few blog entries on Technorati if you need further impressions. Um, and never mind the British food …

More presentations

Here are the presentations in the parallel track I couldn’t attend. Also there will be pod- and videocasts available soon.

• Dave Shea: Fine typography on the web
• Andy Budd: Bug hunting
• DOM Scripting: The Next Level
• Andy Clarke: The fine art of web design