An Event Apart Atlanta

A few weeks ago, my boss sent me an email that said:

http://aneventapart.com/2011/atlanta/

Is this something you would want to attend?

I clicked the link, saw the speaker panel, leapt through the question’s ambiguity, and signed up before my boss could clarify his meaning. Anyone who develops for the web knows that, when it comes to CSS, Eric Meyer cavorts with deities. Ethan Marcotte’s article on responsive web design still pops eyes and blows minds a year later. Jeffrey Zeldman’s web magazine, A List Apart, launched when Internet Explorer 4 was just edging out Netscape Navigator 4 and continues to enlighten web developers to this day. And that’s just a quarter of the all-star panel. This panel has produced some of the leading books and articles on web development. Did he really think I’d say anything but yes?

Last Sunday afternoon, my family and I drove to Atlanta. They planned to spin through Six Flags, swill through The World of Coca-Cola, and swim through The Georgia Aquarium (OK, they stayed dry, but you couldn’t expect me to forgo the alliteration). I planned to bask in the shadow of Olympia. They had fun; I sat in HTML heaven.

Two themes from the conference stood out to me:

1. Content is king. Don’t design in its absence.
2. Mobile is here. Design for it first.

Several speakers reiterated these points. Pay attention to them.

I scribbled notes throughout the conference and downloaded all the conference slides. Two days, six speakers a day. Amazing stuff throughout. You can find more in-depth notes on Luke Wroblewski’s blog and Jeffrey Zeldman’s blog. Here are just a few of the highlights from each speaker.

Jeffrey Zeldman — What Every Web Designer Should Know — A Better You at What You Do

Zeldman tackled a broad topic and moved through several important points concerning web design. What stuck with me is that, with smartphones as the true personal computers, content becomes more important and you must design for that. People are shifting the content not only to smaller screens and mobile devices, but also to services like Instapaper and Readability that reformat the content to be more readable. Stop thinking you control the brand experience. Also, HTML 5 is the first HTML designed for apps, and allows us to use progressive enhancement to fail predictably. We’re in the most skill-conscious profession you can imagine, so keep honing skills and take a holistic approach to development and design.

Sarah Parmenter — Crafting User Experiences

I’m not sure why we Americans find both British accents and phrases intoxicating, and I doubt that the Brits reciprocate the sentiment, but Parmenter had the audience swooning. She also had the foresight to draw her examples from Coca-Cola, which is based in Atlanta, so she really resonated with the locals. Her talk discussed five basic principles of human psychology in design:

1. Speed
2. Simplicity
3. Surprise
4. Social behavior
5. Stir emotions

She pointed out that we’re suspicious of rapid cognition, but we form first impressions in 3-5 seconds and spend 1-3 minutes confirming or disputing those impressions. This means that users will rapidly form opinions about out software based on its design. We also must reduce the message to its essence so that it’s simple. She gave an example of surprise: on a site promoting her iOS design workshops, she had a picture of an iPhone on its lock screen. The surprise was that the “slide to unlock” control actually worked, and offered up a discount to the workshop. Heat maps show that people slid the heck out of that slider.

Social proofing lets your fans become your advocates, spreading your message with a trust that you don’t have with their friends and followers. Finally, you’ve got to stir emotions to make people feel like they care. She recommended a book called Gut Reactions (I hope I’ve linked to the right one — it covers psychology, not peptic ulcers) for more reading.

Jason Santa Maria — On Web Typography

Santa Maria confessed to being a “font geek,” but then said we should all be font geeks, as that’s the best kind of geek to be. He said that once you’ve seen the zen of fonts, you can’t unsee it — that’s why he’ll find himself looking at a restaurant menu and saying, “Why the hell would they use that font? This is a steakhouse!” Either he dines with designers or the deaf, I’d wager. If you thought, though, that someone couldn’t enthrall you for an hour with font-talk, you’d be egregiously wrong. Santa Maria fed us font facts in formats so entertaining that I would have given him another hour. Some things I learned: @font-face is ready, so use it. Most of what makes a letter a letter is in its top half. Contrast is the most important principle in graphic design. Avoid fonts with design built in; instead, use normal fonts and change them, if necessary, to fit your design.

Luke Wroblewski — Mobile Web Design Moves

Mobile network traffic is exploding, and Wroblewski showed us the numbers. Sites can’t sleep on mobile, or expect users to pinch and spread their way through designed-for-big-screen pages. Wroblewski urged us to start with the mobile design first. He also pointed out that wireframes are devoid of content, so when we wireframe we’re really just pushing navigation elements around. You’ve got to start with content, not navigation.

People aren’t just settling for mobile when they have no other option. 84% of mobile traffic comes from people at home. 4 billion SMSes fly every day, so people can type just fine on smartphones. Your mobile sites can’t exclude key functionality that your full sites offer. Wroblewski offered six tips to focus on in mobile design:

1. Organize yourself — organize your site with mobile in mind, doing content first and navigation second and keep your mobile site capable (not dumbed-down)
2. Use your head — don’t fill the tops of pages with navigation, but instead use that for content.
3. Bottom out — don’t use fixed controls at bottom of screen; use hardware buttons or controls that scroll off the screen.
4. Take it in — use the HTML 5 input types and optimize input for mobile.
5. Ask for it — Use top-aligned labels, don’t use placeholders inside text fields as labels.
6. Make your moves — be creative. People will discover your UI innovations, as they did the “pull down to refresh” paradigm.

Ethan Marcotte — The Responsive Designer’s Workflow

Marcotte talked about responsive web design, a technique that, as far as I know, he pioneered. It involves using media queries to understand screen dimensions and tailor your site accordingly, which can mean moving columns, hiding columns, or adjusting relative column widths to deliver device-optimized layout from the same pages. Think of the power in that approach: you create one set of pages, one CSS layout, and forget it. You don’t have to browser sniff on your web server, develop several sets of pages for different devices, route traffic to the mobile domain for iPhones, or anything like that. You just serve up pages and they just work. Remarkable.

Marcotte is working with The Boston Globe on a summer launch of a responsive web design, and he walked us through how they went about it. The “Creative Conveyor Belt” of Discover / Design / Develop / Deliver, with formal handoffs between, doesn’t really work. Instead, they’ve adopted a Discover, Design-and-Develop iteration, Deliver approach. One point he made that jumped out at me: We need questions more than we need answers. Make sure you’re asking the right questions. He also urged us to design for mobile first.

Andy Clarke — Smoke Gets In Your Eyes

Clarke finished the day with a presentation on CSS3 animations, and the things you can do with them are stunning. See, for example, http://animatable.com/demos/madmanimation/ for the demo he used. He showed us a tool, Animatable, that makes developing these animations even easier. The tool hasn’t launched yet, so pay attention to that URL.

I’ve always done application development, never animations, so I don’t have a grasp on the problem space or how difficult tools like Flash are to use, so I didn’t relate to the presentation that much. From the gasps, oohs, aahs, and tweets going on, though, I could gauge that this is Big News to the web development community.

Eric Meyer — Using Flexible Boxes

Meyer started Day 2 with a demonstration of how to use flexible boxes, which is a specific W3C technology and not a generic phrase. This was the gee-whiz presentation of the conference: a cool technology that probably isn’t yet ready for prime time. The conference’s web site uses flexible boxes, and Meyer details the pains and travails of putting them there. Through determination, experimentation, and fallback methods, he made the flexible boxes on the page work. This will become a better-supported technology in future browser versions, so it’s good to be aware of and understand the technology, but you’re probably not going to roll it out right now.

The part of his talk that shocked me was that he was reading documentation and experimenting with browsers and making guesses about browser implementations, just as we would do. I mean, I’d expect him to have Firefox, Chrome, Safari, IE, and Opera developers on speed dial, and also that those browser developers responsible for CSS implementations would send him birthday cards, chocolates, and the occasional merlot to make sure he, of all people, knew what they were doing with respect to the CSS spec. It appeared that they don’t talk at all, which would be like Steven Spielberg not knowing who Roger Ebert is. Why aren’t these people talking???

Jeremy Keith — Design Principles

Keith’s accent hails from Ireland, but appears to have been smoothed out, as it hadn’t the intoxicating quality that Parmenter’s did. In fact, if you squint your ears a little, you’d mistake him for a Midwesterner. His presentation, however, was excellent. It focused on goals, principles, and patterns: goals are the why, principles are the how, and patterns are the what. Patterns can simplify development; consider, for example, the CSS pattern:

selector {
  property: value;
}

Think about how extensible that pattern has been as CSS has grown. Keith used the John Postel quote, also known as the robustness principle:

Be conservative in what you send; be liberal in what you accept.

This principle has helped HTML to grow and flourish. HTML 5 tags, for example, can degrade gracefully, because browsers that don’t support them can ignore them. The goal is backwards compatibility and the principle is progressive enhancement. He showed a pattern with <select> tags and HTML 5 <datalist> tags, and how you can create HTML that uses datalist for HTML 5-capable browsers and select for browsers that don’t know datalist. He showed the same sort of pattern for video: HTML 5 <video> tag with several formats degrading to Flash plugin and then degrading to an anchor link. Makes you want to go out and check all your HTML!

He also talked about jQuery, and about how, instead of wiping everything out and starting from scratch (which probably would have spelled failure), built on the existing CSS selectors, so that people could easily transition from CSS to jQuery.

Aarron Walter — Idea to Interface

Yes, that’s how he spells his first name. Don’t correct, and don’t cringe. Walter is the user experience design lead at MailChimp, so he comes to the podium with credibility. He began his presentation by stating his intention: to leave us with a match to start our own fires. He presented a call to action: put down the game controllers, TV remotes, and frisbees. Forgo Leno or set the alarm earlier. Have an idea and do it. Don’t make excuses, don’t wait for permission, and don’t think you can’t.

He talked about the importance of resisting criticism while ideating. He also talked about sketchboarding (and plugged Copic markers), which prescribes putting a long sheet of paper, like butcher paper, in a public place, and affixing wireframes, notes, and sketches along its length, grouped by page or function. I may not have that quite right, but the important parts are do this in landscape mode, as thinking is lateral; put this together quickly, like in an hour (don’t agonize over it); and leave it in a public place and encourage comments.

At MailChimp, they’ve put together a single page that shows all their UI elements. This also works as a unit test for anytime they change their CSS. Everyone should be doing this. They also document their personality and voice, so people know how to write copy.

Kristina Halvorson — A Content Strategy Roadmap

Halvorson is into content and how to manage it. Waaaay into content and how to manage it. Not enough people are, so having someone passionate about it is a rare find. She’s another advocate of content-first when designing.

We as designers and developers tend to create content and hope someone else manages it. That leads to Content ROT: content that is:

• Redundant
• Outdated
• Trivial

Sound like your website? Content is often driven by what someone thinks their boss will measure them on, not for any value it provides, so content sits out there, pining for a date with Apache to get served up. Before adding content, we should first ask, “Do we really have the resources to maintain this content?”

Jared Spool — The Secret Lives of Links

I confess that I held low expectations for this talk. Links? Really? How interesting can you make an anchor tag? It turns out that you can make links more interesting than Tiger Woods and Lady Gaga combined, with splashes of LeBron James’s fourth-quarter flameouts thrown in. This was my favorite presentation of the conference, and I loved them all.

Spool is the founding principle of User Interface Engineering, so he doesn’t bring guesses and ideas to UI work. He brings facts. He talked about the scent of information that links give off, that users sniff the scent when selecting which link to follow. When users attempt to follow links to find content, they fail 58% of the time. This hasn’t changed since 1995. For all of the progress of the web, how we approach it, the technologies we use, the gigabytes of RAM we use to serve it up — we haven’t moved the needle even to a coin-flip success rate since the day The Rolling Stones sang Start Me Up on Bill Gates’s nickel. That’s absurd.

In their studies, UIE has found that the three big indicators for whether a user fails to find content on a website are if the user:

1. Hits the back button
2. Pogo-sticks
3. Searches

They call the back button “The Button of Doom,” as it signals that the user is toast. They’ve followed the strongest scent and will never regain the trail. If the user hits back, the success rate plummets to 82%. Two backs? You’re down to 98%. This means that if the third-strongest scented link contains the correct content, only 2% of all users will find it. 2% is good only when you’re talking dairy.

Pogo-sticking refers to when users bounce between levels of your information hierarchy. A pogo-sticking user succeeds 11% of the time. Searching users succeed more often, but only at a clip of 30%, which can net you millions if you can do that with a major-league curveball, but lose you millions on the Web. He told us to mine our search logs, see what users are searching for, and do a better job with the scent of links to those pages.

He then talked about a study they did with women web-shopping for women’s apparel. They gave 100 women $1000 and a browser and told them to buy some clothes for themselves at certain sites. Sounds like a quick way to spend $100,000, right? Well, depending on the site, these women spent between $660 and — get this — $63. Don’t try to pencil in a zero. I really mean threescore and three. Out of a G. How can web-stores screw this up so badly? Well, the bad ones required over 50 page views for a purchase. That’s how.

The lesson is to give your links a stronger scent. Give them trigger words so users can know what lies behind them before clicking. Once they start having to drill down, they’re pogo-sticking and you’ve lost 89% of them. If you’re graded on driving away customers, that’s almost an A.

He rejoiced that we’ve moved beyond the advice that links are supposed to be blue and underlined. An astrophysicist came up with that, not a designer. Blue is the hardest color to pick out. Underlines change the shape of letters. Together, they conspire to make links hard to see and understand. Make sure your links look like links, but don’t make them blue and underlined. And kill all your goofy popups, as users decide what they’re going to click before they ever move their mice.

Jeff Veen — Disaster, DNA, and the Fathomless Depth of the Web

Veen is the CEO of TypeKit, a web font foundry that boasts as one of its clients about.me, which bills itself as “a custom profile and personal analytics dashboard.” They allow people to sign up and create their own profile pages, including choice of font, and they use TypeKit to serve those fonts. As the story goes, about.me suddenly got very popular, and all these fonts started backing up on TypeKit’s servers instead of being distributed to TypeKit’s content delivery network (CDN). And then TypeKit found out that about.me was about to announce that they were being acquired by AOL, so were going to suddenly add hundreds of thousands more users. Veen walked through how they did the troubleshooting of the problem (turned out to be the server responsible for pushing the font kits out to the CDN) and how they fixed it, all in a weekend in time for the AOL-acquisition announcement on Monday. We’ve probably all been there, locked in a war room with Peanut M&Ms and Diet Coke, fending off despair and trying to keep a clear head to find and fix the problem. They made it through, so the story has a happy ending. And I signed up for about.me during his presentation; you can find me at http://about.me/hoop33. I’ve got some work to do.

I completely loved the conference, and even though I had to drive 12 hours and listen to School of Rock twice (funny the first time, not so much the second) as my children watched it from the back seat, and I didn’t get home until Wednesday morning at 2:30 AM in time to sleep 14 1/2 winks before heading to work the next day, I’d do it again. And again. Maybe I’ll save my boss’s email for next year.