SxSW CSS presentations

I’ve received a few requests for public links to the presentations I used for the CSS panels at SxSW. In the spirit of sharing information–and since they’ve already been linked from other locations–I’ll point to them here. If you weren’t there, you won’t get all the commentary that went along with them, but you’ll get an idea of what I covered for each panel. If you were there, thanks for coming; I hope we covered topics on both panels that were engaging and relevant to you.

Hi-Fi Design with CSS

Christopher Schmitt pulled together this panel to discuss a few high-end techniques that can aid designers and developers in real-world implementations of CSS. My contribution to the panel covered two concepts: methods for easily altering color throughout a site, and the original Sliding Doors technique that I wrote about for A List Apart last year.

The color portion covered two different methods, one used for Wired News, the other for Stopdesign. The Sliding Doors portion features a few new diagrams I created that help better explain in a visual manner how the technique works. I also created a few expansion examples of Sliding Doors which I use extensively in a future release of a client project.

Other presentation files and notes available for this panel from Dave Shea and Dan Cederholm.

CSS: The Good, the Bad, and the Ugly

Tantek Çelik assembled this panel to discuss exemplary uses of CSS (good and bad), or issues that have cropped up from the widespread adoption of CSS. My portion of the panel walked through the issues of Image Replacement and the line between design inspiration and theft.

A few eyebrows raised when I officially “deprecated” the original Fahrner Image Replacement technique, and advised against its use from now on. Simply put, use of display:none; to hide text prevents it from being read aloud in certain screen readers. Based on Joe’s article for ALA, we shouldn’t count on those screen readers altering their behavior until the CSS3 “reader” media type is more widely supported. While we still haven’t come across the Holy Grail of image replacement–and may not until CSS3 is here–a few alternatives are currently available which remain more accessible than the original FIR.

The second topic I addressed is the first instance I’m aware of where we’ve publicly addressed the ease of design theft for sites built with CSS. Design theft has been an issue for years, but CSS aggregates the design details of a site in a way that makes copying an entire design even easier. We don’t want to hamper the adoption of CSS, and I think we’d all admit that “viewing source” and deconstructing code with our own tinkering is the way we’ve all learned on the Web. But at some point, a line needs to be drawn between inspiration and what I called “ripoffation”. For example, when a design firm takes one of the CSS Zen Garden designs, and uses it (and almost all of its CSS and some of its images) for a client project, and the design firm claims the design as its own, that’s completely unacceptable. We need some sort of protection against the reproduction of the intangibles of design and look and feel. I’m not sure what the answers are to the questions I raised in the panel yet, but more discussion should ensue in coming months, as the problem continues to show its ugly head more and more often. Todd Dominey just posted about a recent lift of Dominey Design. Many others have done the same. This is an issue on which I’d like to seek the advice and guidance of California Lawyers for the Arts, recommended many times by my good friend, A.J.

I intended to discuss a third topic for this panel, but time ran out, and I had to stop short to ensure adequate time for Brian’s and Kimberly’s portions. It would have been my first public explanation and demonstration of the Double Rollover technique I used for the Adaptive Path partner photos. The double rollover slides have been removed from the presentation, so everyone will have to wait for the write-up to come soon.

Other presentation files and notes available for this panel from Tantek Çelik. Eric snapped a photo of the crowd while we were on stage.

Presentation method

In addition to the teaser for the double rollover technique, I’ll add another teaser here for a beta release of some PHP scripts I wrote that drive the two presentations above. Each presentation is entirely based on one simple HTML file which contains every bit of content for the entire presentation. This makes passing the presentation back and forth to someone incredibly easy because you’re only passing one HTML file. Grab the new file from them, copy it into the proper directory, and the entire presentation is instantly updated. Want to re-order the slides/pages, just cut and paste the basic HTML. It includes a server-side style switcher that adjusts colors to account for different room lighting situations, accesskey equivalents for rapid keyboard navigation, and a dynamically generated index of all the slides in the deck.

I know similar presentation apps have been built by other people in the past, but this is one I wrote from scratch, and may have a few new features that others don’t. Because I’m not a programmer by nature, I’ll probably benefit if several PHP experts rip it apart and tell me what I did wrong, and what could be done better. So you can also look for these presentation scripts to be released and documented soon.