HTML5, CSS3, UX, Design: Links from An Event Apart Boston 2011

Meeting of the Minds: Ethan Marcotte and AEA attendee discuss the wonders of CSS3. Photo by the incomparable Jim Heid.

Meeting of the Minds: Ethan Marcotte and AEA attendee discuss the wonders of CSS3. Photo by the incomparable Jim Heid.

THE SHOW IS OVER, but the memories, write-ups, demos, and links remain. Enjoy!

An Event Apart Boston 2011 group photo pool

Speakers, attendees, parties, and the wonders of Boston, captured by those who were there.

What Every Designer Should Know (a)

Jeremy Keith quite effectively live-blogs my opening keynote on the particular opportunities of Now in the field of web design, and the skills every designer needs to capitalize on the moment and make great things.

The Password Anti-Pattern

Related to my talk: Jeremy Keith’s original write-up on a notorious but all-too-common practice. If your boss or client tells you to design this pattern, just say no. Design that does not serve users does not serve business.

What Every Designer Should Know (b)

“In his opening keynote … Jeffrey Zeldman talked about the skills and opportunities that should be top of mind for everyone designing on the Web today.” Luke Wroblewski’s write-up.

Whitney Hess: Design Principles — The Philosophy of UX

“As a consultant, [Whitney] spends a lot of time talking about UX and inevitably, the talk turns to deliverables and process but really we should be establishing a philosophy about how to treat people, in the same way that visual design is about establishing a philosophy about how make an impact. Visual design has principles to achieve that: contrast, emphasis, balance, proportion, rhythm, movement, texture, harmony and unity.” In this talk, Whitney proposed a set of 10 principles for UX design.

Veerle Pieters: The Experimental Zone

Live blogging by Jeremy Keith. Veerle, a noted graphic and interaction designer from Belgium, shared her process for discovering design through iteration and experimentation.

Luke Wroblewski: Mobile Web Design Moves

Luke’s live awesomeness cannot be captured in dead written words, but Mr Keith does a splendid job of quickly sketching many of the leading ideas in this key AEA 2011 talk.

See also: funky dance moves with Luke Wroblewski, a very short video I captured as Luke led the crowd in the opening moves of Michael Jackson’s “Thriller.”

Ethan Marcotte: The Responsive Designer’s Workflow (a)

“The next talk here at An Event Apart in Boston is one I’ve really, really, really been looking forward to: it’s a presentation by my hero Ethan Marcotte.”

Ethan Marcotte: The Responsive Designer’s Workflow (b)

Ethan’s amazing talk—a key aspect of design in 2011 and AEA session of note—as captured by the great Luke Wroblewski.

An Event Apart: The Secret Lives of Links—Jared Spool

“In his presentation at An Event Apart in Boston, MA 2011 Jared Spool detailed the importance and role of links on Web pages.” No writer can capture Jared Spool’s engaging personality or the quips that produce raucous laughter throughout his sessions, but Luke does an outstanding job of noting the primary ideas Jared shares in this riveting and highly useful UX session.

An Event Apart: All Our Yesterdays—Jeremy Keith

Luke W: “In his All Our Yesterdays presentation at An Event Apart in Boston, MA 2011 Jeremy Keith outlined the problem of digital preservation on the Web and provided some strategies for taking a long term view of our Web pages.”

Although it is hard to pick highlights among such great speakers and topics, this talk was a highlight for me. As in, it blew my mind. Several people said it should be a TED talk.

An Event Apart: From Idea to Interface—Aarron Walter

Luke: “In his Idea to Interface presentation at An Event Apart in Boston, MA 2011 Aarron Walter encouraged Web designers and developers to tackle their personal projects by walking through examples and ways to jump in. Here are my notes from his talk.”

Links and Resources from “From Idea to Interface”

Compiled by the speaker, links include Design Personas Template and Example, the story behind the illustrations in the presentation created by Mike Rhode, Dribble, Huffduffer, Sketchboards, Mustache for inserting data into your prototypes, Keynote Kung Fu, Mocking Bird, Yahoo Design Patterns, MailChimp Design Pattern Library, Object Oriented CSS by Nicole Sullivan and more!

An Event Apart: CSS3 Animations—Andy Clarke

“In his Smoke Gets In Your Eyes presentation at An Event Apart in Boston, MA 2011 Andy Clarke showcased what is possible with CSS3 animations using transitions and transforms in the WebKit browser.” Write-up by the legendary Luke Wroblewski.

Madmanimation

The “Mad Men” opening titles re-created entirely in CSS3 animation. (Currently requires Webkit browser, e.g. Safari, Chrome.)

CSS3 Animation List

Anthony Calzadilla, a key collaborator on the Mad Men CSS3 animation, showcases his works.

Box Shadow Curl

Pure CSS3 box-shadow page curl effect. Mentioned during Ethan Marcotte’s Day 3 session on exploring CSS3.

Multiple CSS Transition Durations

Fascinating article by Anton Peck (who attended the show). Proposed: a solution to a key problem with CSS transitions. (“Even now, my main issue with transitions is that they use the same time-length value for the inbound effect as they do the outbound. For example, when you create a transition on an image with a 1-second duration, you get that length of time for both mousing over, and mousing away from the object. This type of behavior should be avoided, for the sake of the end-user!”)

Everything You Wanted to Know About CSS3 Gradients

Ethan Marcotte: “Hello. I am here to discuss CSS3 gradients. Because, let’s face it, what the web really needed was more gradients.”

Ultimate CSS3 Gradient Generator

Like it says.

Linear Gradients Generator

By the incomparable John Allsopp.

These sessions were not captured

Some of our best talks were not captured by note-takers, at least not to my knowledge. They include:

  1. Eric Meyer: CSS Anarchist’s Cookbook
  2. Mark Boulton: Outing the Mind: Designing Layouts That Think for You
  3. Jeff Veen: Disaster, DNA, and the Fathomless Depth of the Web

It’s possible that the special nature of these presentations made them impossible to capture in session notes. (You had to be there.)

There are also no notes on the two half-day workshop sessions, “Understand HTML5 With Jeremy Keith,” and “Explore CSS3 With Ethan Marcotte.”

What have I missed?

Attendees and followers, below please add the URLs of related educational links, write-ups, and tools I’ve missed here. Thanks!

Webvanta Video: Jeffrey Zeldman on the State of Web Design

From the floor of An Event Apart Seattle 2011:

Jeffrey Zeldman at An Event Apart Seattle 2011.

“Mobile is huge. The iPhone, iPad, and Android are huge. On the one hand, they are standards-facing, because they all support HTML5 and CSS3, so you can create great mobile experiences using web standards. You can create apps using web standards. On the other hand, there is also the temptation to go a proprietary route. In a strange way, although the browsers are much more standards compliant, it seems like we are redoing the browser war. Only now, it’s not the browser wars, it’s platform wars.”

Video interview, plus transcript: Interview with Jeffrey Zeldman on the State of Web Design. Thank you, Michael Slater.

Episode 39: Crowd Fusion’s Brian Alvey live on The Big Web Show

Brian Alvey

BRIAN ALVEY (home, Twitter) is our guest on The Big Web Show Episode 39, recording live Thursday, February 16, at 12:00 PM Eastern at 5by5.tv/live.

Brian is CEO of Crowd Fusion, a publishing platform that combines popular applications like blogging, wikis, tagging and workflow management, and a leader in the content management world. He co-founded Weblogs, Inc.—home to Engadget, Autoblog, TUAW and more—and built the Blogsmith platform, both of which were acquired by Aol and are essential to their current strategy. Brian has been putting big brands on the web since 1995 when he designed the first TV Guide website and helped BusinessWeek leap from Aol to the web.

Brian built database-driven web applications and content management systems for many large companies in the 1990’s including Intel, J.D. Edwards, Deloitte & Touche and The McGraw-Hill Companies. His 1999 Tech-Engine site was a “skinnable HotJobs” which powered over 200 online career centers including XML.com, Perl.com, O’Reilly & Associates Network, DevShed, and Computer User magazine.

He has been the art director of three print magazines (I met him in 1995 when he was art director for “Net Surfer” or something like that) and was the Chief Technology Officer of Rising Tide Studios where he developed The Venture Reporter Network, which is now a Dow Jones property.

In 2003, Brian invented and launched Blogstakes, a sweepstakes application for the blogging community. He is a former Happy Cog partner of mine; at Happy Cog, Brian built content management systems for customers including Capgemini, A List Apart, and the Kansas City Chiefs. He was also the creator and host of the Meet The Makers conference, a series of talk show-style events that were so compelling, they helped inspired me to create An Event Apart with Eric Meyer.

And I’ll stop there. Ladies and gentlemen, a legend and true creative force in this medium. Please join us at tomorrow on 5by5.tv/live for a lively and wide-ranging discussion.

The Big Web Show (“Everything Web That Matters”) records live every Thursday at 12:00 PM Eastern. Edited episodes can be watched afterwards, often within hours of recording, via iTunes (audio feed | video feed) and the web. Subscribe and enjoy!

The Big Web Show #39: Brian Alvey.

2010: The Year in Web Standards

WHAT A YEAR 2010 has been. It was the year HTML5 and CSS3 broke wide; the year the iPad, iPhone, and Android led designers down the contradictory paths of proprietary application design and standards-based mobile web application design—in both cases focused on user needs, simplicity, and new ways of interacting thanks to small screens and touch-sensitive surfaces.

It was the third year in a row that everyone was talking about content strategy and designers refused to “just comp something up” without first conducting research and developing a user experience strategy.

CSS3 media queries plus fluid grids and flexible images gave birth to responsive web design (thanks, Beep!). Internet Explorer 9 (that’s right, the browser by Microsoft we’ve spent years grousing about) kicked ass on web standards, inspiring a 10K Apart contest that celebrated what designers and developers could achieve with just 10K of standards-compliant HTML, CSS, and JavaScript. IE9 also kicked ass on type rendering, stimulating debates as to which platform offers the best reading experience for the first time since Macintosh System 7.

Even outside the newest, best browsers, things were better than ever. Modernizr and eCSStender brought advanced selectors and @font-face to archaic browsers (not to mention HTML5 and SVG, in the case of Modernizr). Tim Murtaugh and Mike Pick’s HTML5 Reset and Paul Irish’s HTML5 Boilerplate gave us clean starting points for HTML5- and CSS3-powered sites.

Web fonts were everywhere—from the W3C to small personal and large commercial websites—thanks to pioneering syntax constructions by Paul Irish and Richard Fink, fine open-source products like the Font Squirrel @Font-Face Generator, open-source liberal font licensing like FontSpring’s, and terrific service platforms led by Typekit and including Fontdeck, Webtype, Typotheque, and Kernest.

Print continued its move to networked screens. iPhone found a worthy adversary in Android. Webkit was ubiquitous.

Insights into the new spirit of web design, from a wide variety of extremely smart people, can be seen and heard on The Big Web Show, which Dan Benjamin and I started this year (and which won Video Podcast of the Year in the 2010 .net Awards), on Dan’s other shows on the 5by5 network, on the Workers of the Web podcast by Alan Houser and Eric Anderson, and of course in A List Apart for people who make websites.

Zeldman.com: The Year in Review

A few things I wrote here at zeldman.com this year (some related to web standards and design, some not) may be worth reviewing:

iPad as the New Flash 17 October 2010
Masturbatory novelty is not a business strategy.
Flash, iPad, and Standards 1 February 2010
Lack of Flash in the iPad (and before that, in the iPhone) is a win for accessible, standards-based design. Not because Flash is bad, but because the increasing popularity of devices that don’t support Flash is going to force recalcitrant web developers to build the semantic HTML layer first.
An InDesign for HTML and CSS? 5 July 2010
while our current tools can certainly stand improvement, no company will ever create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.” The assumption that a such thing is possible suggests a lack of understanding.
Stop Chasing Followers 21 April 2010
The web is not a game of “eyeballs.” Never has been, never will be. Influence matters, numbers don’t.
Crowdsourcing Dickens 23 March 2010
Like it says.
My Love/Hate Affair with Typekit 22 March 2010
Like it says.
You Cannot Copyright A Tweet 25 February 2010
Like it says.
Free Advice: Show Up Early 5 February 2010
Love means never having to say you’re sorry, but client services means apologizing every five minutes. Give yourself one less thing to be sorry for. Take some free advice. Show up often, and show up early.

Outside Reading

A few things I wrote elsewhere might repay your interest as well:

The Future of Web Standards 26 September, for .net Magazine
Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a new web?
Style vs. Design written in 1999 and slightly revised in 2005, for Adobe
When Style is a fetish, sites confuse visitors, hurting users and the companies that paid for the sites. When designers don’t start by asking who will use the site, and what they will use it for, we get meaningless eye candy that gives beauty a bad name.

Happy New Year, all!

To my friend who thinks I should not accept awards.

OLIVER REICHENSTEIN—iA to Twitter friends like me—thinks it is wrong for experienced designers to accept design awards. Oliver says:

All awards should go from old uncles (like me or @zeldman or who ever) to young people. They need it.

A fair point. To which I reply:

  1. When Happy Cog wins an award, it is going to young people. It’s young designers like Stephen Caver, Yesenia Perez-Cruz, Joey Pfeifer, Mike Pick, Kevin Sharon, Drew Warkentin, Brian Warren, young UX designers like Whitney Hess and Jessica Ivins, young developers like Jenn Lukas, Mark Huot, Ryan Irelan, Matt Clark, Aaron Gustafson, Tim Murtaugh, and Allison Wagner, and young project managers like Rawle Anders, Dave DeRuchie, and Brett Harned whose work is being recognized. (Apologies to young-at-heart Kevin Hoffman, Chris Cashdollar, Russ Unger, and Robert Jolly.)

    When I stood up with Happy Cog’s co-presidents to accept “design agency of the year,” it was on these young folks’ behalf that I accepted it. I am a vessel of their talent and of our clients’ willingness to support their users instead of making safe, committee-friendly choices. It would be wrong of me to refuse the award on the grounds that I am better known than some members of our staff.

  2. We work for these people called clients. And while Jane HTML may know of Jeffrey Zeldman and Happy Cog, Joe Client does not. Moreover, Joe Client may not know how to evaluate agencies. He may know little about web standards and “user experience.” He probably doesn’t follow you or me on Twitter, and doesn’t participate in our community’s passionate debates about everything from the proper semantics for sub-navigation to the value of eye-tracking. He doesn’t know from that stuff, but he knows that if an agency has won awards in a respected competition, that agency must know a little something about what it is doing. If our goal as an agency is to do and spread good work, it makes business sense for us to accept an award from a respected forum of our peers.

By the way, we did not enter the .net Awards, we were nominated for them by the community. Accepting the nominations was like accepting a compliment—the gracious thing to do. Not that I’m apologizing.

So much for “design agency of the year.” I accepted “video podcast of the year” on behalf of my brilliant partner Dan Benjamin, who creates superior streaming content for people who make websites. It is his work more than mine that was honored. And as for “standards champion,” I’ve already said who I think deserved that nod this year. But I accepted the community’s verdict with a blush and thanks.

Winning anything invites enmity; winning three awards is asking for a backlash. But I know that’s not where you’re coming from.

Are awards bad?

I used to hate awards, too. I’ve only recently started coming around.

Designers and creative directors I respect and worked for in the past were almost always winning and judging awards shows. Their work was brilliant, and the awards were a tool they used to balance their power against that of tough-minded account executives and clients. When a client said make the logo bigger, a creative director could turn quietly to his or her wall of awards, and the client would back down.

Nevertheless, awards shows are always political to some extent, and those who don’t win often find fault with those who do. Like you, I had a distaste for awards shows when I started on my own (plus I didn’t think any award show got the web). For over a decade, largely because of my feeling, which other Happy Cog muckety-mucks shared, our agency ignored awards shows.

But we are modifying our views on this, and not merely because we just won a bunch of awards we didn’t even seek (as well as a few that we did). Our industry needs real design discussion, peer review, and recognition. I believe in the .net Awards, as their partnership with A List Apart attests. They are the best our industry has.

Personally, I’m inspired to start actually seeking awards, because Joe Business gets them, and I like to see designers working.

I appreciate the purity of your point of view, and I recognize it as a discussion point, not an attack. We are friends, and you’re a gent. Maybe I am wrong. But I’m beginning to think we don’t need no awards, we need good awards. And when good work wins, it inspires more good work.

Whether you hate awards or love them, the most important thing is to keep wins and losses in perspective, and remember that you’re only as good as your last idea.

Design Agency of the Year

I TOOK THIS PHOTO TONIGHT in London at the 2010 .net Awards, where Happy Cog took home the award for Design Agency of the Year, besting Centersource and our good friends at Clearleft (who took the prize last year). My partners Greg Hoy and Greg Storey were beside me to accept the award. Fellas, it’s all you and your brilliant peeps.

Dan Benjamin and I also won “Video Podcast of the Year” for The Big Web Show—although in my mind, any of Dan’s podcasts on his 5by5 network could have won. They are that good, and so is he. Congrats and thanks, Padre.

I also won “Standards Champion” for the third year in a row. Had it been up to me, I would have bestowed the honor on Jeremy Keith for writing HTML5 For Web Designers.

Other prizes went to Smashing Magazine (“Blog of the Year”), Jason Santa Maria (“Web Personality of the Year”), Typekit (“Innovation of the Year”), Modernizr (“Open Source Product of the Year”), Flipboard (“Best API Use of the Year”), and BBC (“Redesign of the Year”). Congratulations, all!

Greg Hoy has posted videos of event highlights on his website, and there are photos in my “London 2010” set on Flickr.

Blue Beanie Day Haiku Contest – Win Prizes from Peachpit and A Book Apart

ATTENTION, web design geeks, contest fans, standards freaks, HTML5ophiles, CSSistas, grammarians, bookworms, UXers, designers, developers, and budding Haikuists. Can you do this?

Do not tell me I
Am source of your browser woes.
Template validates.

Write a web standards haiku (like that one), and post it on Twitter with the hashtag #bbd4 between now and November 30th—which happens to be the fourth international Blue Beanie Day in support of Web Standards.

Winning haikus will receive free books from Peachpit/New Riders (“Voices That Matter”) and A Book Apart.

Ethan Marcotte, co-author of Designing With Web Standards 3rd Edition and I will determine the winners.

Enter as many haikus as you like. Sorry, only one winning entry per person. Now get out there and haiku your heart out!

See you on Blue Beanie Day.

P.S. An ePub version of Designing With Web Standards 3rd Edition is coming soon to a virtual bookstore near you. Watch this space.

Cognition: Behind the Music

Happy Cog president Greg Storey describes the thinking behind our latest little experiment in online publishing and community:

Last week we launched Cognition, a studio blog, that replaced the traditional open-mic text area commenting system with two options: Either post a response via your own Twitter account or link to a post on your own blog.

As the primary instigator, Mr. Storey explains his and the agency’s rationale for doing away with traditional comments:

The problem with most comment threads is that they can reach that useless tipping point very quickly. Without having an active moderator to keep up with all of the various threads it’s practically impossible to provide any sort of conversational value.

Meanwhile we have also informally noticed a decline in blog usage since the wider adoption of Twitter within our community. … Happy Cog loves blogs. … What if we could help bring some life back into the old network by encouraging people to write blog posts when they have more to say than what can fit into one-hundred-and-forty characters?

Read more and comment if you wish: Airbag: Babylon.

Cog blog offloads comments.

The agency launched by a blog finally has a proper one of its own. Happy Cog gently introduces Cognition.

Speaking of experiments, there’s our comments section. [W]e’ve collocated our comments on Twitter. Share a tweet-length response here, and, with your permission, it will go there. If you are moved to respond with more than 140 characters, post the response on your website, and it will show up here.

Is This Thing On? – Cognition