I presented my workshop, Sitting in the Driver’s Seat: creating production ready CSS, Sunday afternoon at Interaction 13. There were nine attendees, and everyone seemed to have learned something useful from it. Their technical abilities varied, but they were all able to follow along and understood, at least in concept, if they weren’t able to complete the more involved exercises on their own.
I began with an introductory slide deck that I’ve posted on Speaker Deck. I explained why I think it is important for designers working on web-based applications to not just understand HTML and CSS, but to master it, so that they can contribute directly to the production codebase. I talked about the tools they should be using, and then we got into the code. We started with a simple CSS formatting exercise in which they had to fix a CSS file to adhere to the formatting standards proposed by Nicolas Gallagher in his Idiomatic CSS. Then they used a diffing tool of their choice to compare their work against my corrected version.
After that warmup, we dove into OOCSS. I used Amazon’s homepage as an example, challenging them to reformat the “Get yourself a little something” component so that with a single class swap, it could be changed from the horizontal layout to a vertical layout, matching the “Best Sellers” column also found on Amazon.com.
In the end, while I could have used a little more time, I successfully fit the content into the three-hour event. Reactions were very positive, and I’m looking forward to giving the workshop again. So, what did the developers think? I’ll let Anton tell you about that in his own words.