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

I’m at An Event Apart in Boston where Jeffrey Zeldman is about to kick things off. I figured I’d try my hand at a little bit of good ol’ fashioned liveblogging…

Jeffrey’s talk is called What Every Web Designer Should Know—A Better You At What You Do. He asks “what does it mean to be a designer when everyone is calling themselves a designer?” 15 years ago, Jeffrey thought everyone would learn HTML and be a web designer. That didn’t happen but what did happen is social media, which is democratising online publishing. His 6-year old daughter uses an iPad like a natural, figuring out the interfaces of drawing tools.

The rules are changing. You may not be in control of the user’s visual experience. (those are direct quotes from his slides—he’s delivering pre-formatted tweets for the audience’s benefit)

Here’s the website of Roger Ebert. He’s a great guy and his website is full of links but it really isn’t set up well for reading. But that’s okay. Jeffrey uses Readability (and there’s also Instapaper) to format the content.

It used to be that the client or boss was in charge of the brand but that’s changing. There was always a minority of web users—using older devices, say—that wouldn’t see what you intended, but nowadays every user has the power to manipulate the output. Sure, us geeks always used user stylesheet to hide ads, but now it’s mainstream.

Readability is open source and it’s also the underlying code behind Safari’s Reader functionality

Definitions are in flux, discussion is contentious. A List Apart runs a survey every year. They ask “what is your job title?” They get a lot of different job titles that sound like they’re doing the same thing. At a university you might be called a “webmaster” whereas at an agency you might be called a “creative director” and yet you’d be doing the same work.

We geeks love to argue about definitions. See, for example, Whitney’s recent post called You’re Not A UX Designer If… A lot of people loved what she wrote; a lot of people didn’t. Luke wrote on Twitter:

Happy to find I’m not a UX designer.

Jeffrey responded:

Me neither. That’s why I hire them.

There are different kinds of creative people. That’s why Jeffrey likes to have a mix of people at his agency—the intuitive creative types along with the researchers.

Design that does not serve people does not serve business. It used to be that designers would respond to client feedback with their opinions; “here’s what I think…” and we could present data and research. It’s really important to think about the user first and foremost.

For example, apps that auto-spam people on Twitter sounds like a great idea to the client …but of course users hate it. It’s an anti-user pattern. Anti-user patterns are anti-business.

As Jeffrey was getting ready this morning, he want on Facebook and announced he was about to give a talk. He found thousands and thousands of spammy updates from some automated app. It’s embarrassing for the users who have been taken advantage of.

Content precedes design. Design without content is decoration. Jeffrey wrote that on Twitter, which is a great way of planting an idea in people’s minds Inception-style.

Remember Blogger? When Google bought it, they hired a bunch of people—including the viking-like Jeff Veen’s Adaptive Path—to retool the user experience of signing up for Blogger to make it accessible for everyone. They turned to Douglas Bowman. He reached out to a bunch of his designer friends, asking them to design templates. It was a really, really hard design job because there was no content to design with. Jeffrey feels that he himself failed at the task but somehow Doug managed to do it. He created a really nice template that worked for everyone. It has stood the test of time remarkably well. In his fifteen years of designing websites, this is the only example Jeffrey can think of of a good design created in the absence of content.

On a related note, 37 Signals have famously declared war on lorem ipsum placeholder text. All websites are based around content—including web apps. Take this link call-out to their first million-selling book Defensive Design in the sidebar. You need to know how long the blurb is going to be to make sure it works with the design.

You can’t solve the problem until you define it. You probably can’t solve it alone.

If you can’t solve a problem alone and you need to some user testing—not that we’re testing users; it’s design testing with users—one of the ways to do that is with Silverback. But like Jeffrey said, there’s always dissent. Naz Hammid said:

User testing is great but it can also be a crutch when what you really want to be doing is changing behaviour and thought patterns.

Take for example the “pull down to refresh” gesture from Tweetie. That was an innovation that wasn’t based on user testing. It worked though, and apps that didn’t use that pattern started to feel old-fashioned and dated.

Then there’s Tweetbot. Some people feel that the interface is excessive but they’re trying out new stuff like swiping left on a tweet to see a whole conversation and swiping right to see related tweets.

So you can innovate and get the innovation to go viral.

He not busy being born is busy dying. The three books from A Book Apart are quite different, from HTML5 to content strategy. What’s surprising is that the same people are buying all the books. We need to know a bit of everything in this industry. Maybe I’m not going to be a content strategist, but I need to know about content strategy.

It’s remarkable how nice is everyone is in this line of work. We all blog and share our ideas and techniques. That’s not the norm in other disciplines.

RIGHT NOW is the best time in more than a decade to create websites and applications. There are new opportunities: Webkit and Mobile, HTML5 and CSSS3, UX and Content Strategy. The landscape has changed in a good way. It’s bringing up a lot of challenges, for instance…

A Mobile and Small Screen Strategy: what’s the difference? A lot of time we say “mobile” when what we really mean is “small screen.” Is the “mobile” version of A List Apart really mobile? No. It doesn’t do any location-based cleverness. Instead it’s a layout optimised for a small-screen. So ask yourself, do you need a mobile site or do you need a small-screen site?

For some sites, especially content-driven sites, small-screen optimisation is the smartest strategy. For other sites, especially those with a location pivot, a mobile strategy is what you need.

Real web designers write code. Always have, always will. That’s another controversial little soundbite that Jeffrey put out on Twitter to spark discussion, like Whitney’s post. You don’t to code to the level of say, Ethan Marcotte, but you do need to know what’s possible with markup and CSS.

Progressive enhancement is a universal smart default. This is the watchword of the web standards movement. We’re okay with everyone not have the same experience as long as everyone has a good experience. Be sure to check out Adaptive Web Design by Aaron Gustafson. (note: seriously, this book is going to be amazing: I’ve had a sneak peek)

Some more soundbites:

Semantic markup is a fundamental skill.

UX and design are not antonyms.

A quick look at HTML5 Design Principles. We can learn a lot from ideas like “Pave the cowpaths.” Fail predictably. That’s a really, really, really important part of HTML5: consistent error handling. Beyond outline documents. Audio, video, articles, sections …HTML5 has new features that people want. If people are publishing video, shouldn’t HTML5 allow that?

Happy Cog wrote an article about strategies for using HTML5. Jenn Lukas did some research into how many sites are switching to HTML5. There are a lot of big sites switching their doctype: Google, Yahoo, etc. It’s kind of crazy the way that HTML5 has become a mainstream meme. Like, for example, Steve Jobs publishing his letter the day before HTML5 For Web Designers came out (good timing, Steve).

HTML5 DOCTYPE using limited HTML elements and ARIA roles. You can tailor your HTML5 strategy.

HTML5 + CSS3 = vector art in browsers. Experiment with things like RGBa.

There’s more that Jeffrey would like to cover, like Responsive Web Design, but the other speakers—like Ethan—are going to cover this stuff and time is up so that’s it, folks.

Have you published a response to this? :