NYPL Labs

My current professional incarnation is something of a career change for me, so before An Event Apart Boston 2008 last week, it had been a long time since I’d been to any professional conferences. But once there, I got the feeling that this series of small conferences is special, and experience at other events would probably not have diminished my happy surprise at the quantity of learning and inspiration that Zeldman et al. packed into those two days. After every couple presentations, I wanted to grab a handful of attendees and just build something. Though it’s difficult to choose among the presentations’ excellent balance of theory and practice, the following three stood out to me.

Ethan Marcotte’s “Comps and Code”
First of all, this was the best slide-based presentation I’ve ever seen. Speakers take note: if you take a little time to find alternatives to PowerPoint templates, bullet points, canned slide transitions, and Arial, it will actually make a huge impact on your audience. (I will also point out that not one speaker at AEA read directly from a slide of bullet points.)

Ethan Marcotte, of Airbag Industries, began by identifying the separation of coders and designers at many design firms. It’s not only a philosophic divide, but also a physical one; he described a firm which literally put all their coders on one side of the room, and all their designers on the other. But where does the person who does both sit? (Early in the presentation, he asked the audience how many people considered themselves both coder and designer. About half the hands went up, including Ethan’s.) It might be easy to plan your comp for its eventual transition into code when the person doing both jobs is the same person. But in situations when the comp gets “handed off” from the designer to the coder, it becomes harder to prevent mistakes and oversights due to lack of communication, or lack of empathy between the two roles.

Ethan showed us three examples of such oversights/poor planning from his own work, including a site for the Sundance Festival for which he was the coder and not the designer. Turning the design into code was going well, and was nearly done when the designer asked him if the dropdown menus were ok. Ethan hadn’t seen a layer in the Photoshop comp illustrating a series of navigation elements. Oops. But for each problem, he showed us the solution, and in each case they were elegant. (Example: when designing a liquid layout, don’t think in pixels: think in ratios and percentages. Then no matter how the comp is sized, the coder can code for a balanced layout.)

You might think that remembering to communicate with your coder/designer is just common sense, but honestly, how often is that done well–or at all–in your organization? His subject not only had practical relevance, but was presented so charmingly that it really made me think about the culture that supports the division of design and code, and about creative ways to demonstrate how to change it. It might be as simple as a fun presentation.

Peter-Paul Koch (ppk) “The Principles of Unobtrusive JavaScript”
I am by no means a JavaScript programmer, but ppk’s presentation made me think I could become one. He explained his examples clearly, and he broke down the code on his slides by duplicating the same slide and highlighting only the chunk he was speaking about on each one. Simple and effective.

“Unobtrusive JavaScript,” in this case, means code that avoids as many errors as possible across browsers, and as it turns out, it’s not that hard. He showed us how to combine selectors in order to streamline your code as much as possible while targeting as many browsers as possible. He also gave examples of writing code that “makes no assumptions:” for example, since not every user uses a mouse, avoid “onmouseover” in favor of “focus.” See? easy. And all his code is archived on his site for grateful attendees to download and use.

He did point out that there’s not much we can do for someone whose browser is very old, or simply not JavaScript-enabled, and that’s ok: they know already. Not that this gives us all a pass on doing due diligence; instead, it reassures us that perfect compatibility is impossible, and doing the best we can do for browser incompatibilities is enough.

Eric Meyer’s “Debug/Reboot”
Like ppk, Eric Meyer explained the code in his examples and that was it. Also like ppk, Meyer taught us something very practical, very quickly. His examples of “debug” CSS included using the “empty” pseudo-class to highlight any element in your code that has an empty id or class. He showed us a similar technique to highlight images with an empty “alt” attribute. And like ppk, he provides the .css files he uses in his presentations on his site.

I picked those three because I learn best from practical examples being demonstrated to me. Eric Meyer and ppk literally showed code on their slides, and I totally got it. Ethan Marcotte showed me code, plus site screenshots and ingenious slide animation. Short of a Matrix-style head-port download, I’m not sure I could have been taught something more effectively.

But I must finish by especially mentioning Jared Spool’s “The Scent of a Web Page: Five Types of Navigation Pages.” Anyone who’s heard him talk knows how great he is in front of a crowd. I aspire to be that hilarious and engaging when talking about UX testing data. He’s probably that funny doing his taxes.