5 May 2011 7 am eastern

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!

Filed under: An Event Apart, Archiving, Boston, Career, cities, Code, Community, conferences, content, creativity, CSS, CSS3, Design, Designers, development, Education, events, Fonts, glamorous, Happy Cog™, HTML, HTML5, Ideas, industry, Information architecture, IXD, Layout, Marketing, Markup, people, photography, Real type on the web, The Profession, This never happens to Gruber, Typekit, Usability, User Experience, UX, W3C, Web Design, Web Design History, Web Standards, webfonts, Websites, webtype, Zeldman

14 Responses to “HTML5, CSS3, UX, Design: Links from An Event Apart Boston 2011”

  1. Kevin Haggerty said on

    It was great to follow the live feeds of this event, and the links are going to provide a great reference to the amazing content. I’ll make it to one of these someday, promise! Best for me personally was the focus on design principles from Whitney, felt good to realize many of those are ingrained behaviors in my work.

    Also loved the focus on advanced CSS3 stuff, a topic near and dear to my heart.

    Since you asked for links to tools, I’d love to add a great tool to this list for experimenting with CSS3 Animation, Edit Room. This is something I’ve been working on as a side project for the last 8 months or so, and I like to share my development prototype with the community so it can grow and evolve in response to feedback from the designers and developers here.

    Link Here:
    http://edit-room.com

    If you don’t want to put in your email, there are links to skip to the live prototype.
    Thanks!

  2. Jeffrey Zeldman said on

    Wonderful feedback, Kevin. Thanks so much! :)

  3. Art Duszynski said on

    You beat me to the punch. This was going to be my task for this morning :)

    I particularly enjoyed Jeff Veen’s presentation, and it really got me to think about our team’s dynamic. We had a nice talk about it over dinner that night, and I think we’re going to revamp the way we do things. That alone was worth the price of admission.

    Oh, and the other stuff was pretty cool too :)

  4. Nick Silva said on

    I was following the event via the hashtag at almost.at – highly recommended. Thier was so much great info being posted by the speakers and attendees; kudos to all of you! One of my favorite new tools from the stream wasMothereffin’HSL a nice an straight forward in browser HSL colorspace explorer.
    Thanks again to everyone who contributed a post; they’ve been great and totally informative. I hope I haven’t maxed my Instapaper subscription!

  5. Aaron Pinero said on

    Many thanks for this.

  6. Bala said on

    Love this stuff….but you made my weekend so busy (I have read all of them).

  7. Marjorie Ray said on

    Notes from talks by Eric Meyer, Aarron Walter, Whitney Hess, Jeffrey Zeldman

  8. Jeffrey Zeldman said on

    Nice coincidence, Marjorie. I was just reading your notes on Eric Meyer’s CSS talk.

  9. Anton Peck said on

    Thanks for mentioning my modest little link, Jeffrey – Even though I wrote the article last December, seeing it mentioned here more than made my day.

    Now that I have arrived home safely, I have two agendas to work through:
    1) Write up my thoughts on the event in a new blog post/upload my photos to Flickr, and
    2) Submit to the overwhelming desire to re-tool my own site with many of the brilliant bits of inspiration, techniques, and ideas that I mentally ingested over the past few days. My brain is lit up like Vegas, so now I need to go make something cool.

    Finally, I want to thank not only you, Eric, and all of the speakers, but especially the staff who worked hard to keep things rolling so well, even in the chaos of internet troubles. Everyone who had a hand in AEA has restored my faith in what a conference should be.

  10. Dale Cruse said on

    Whether I attend AEA or not, my Instapaper account always gets a good workout afterward. Thanks for this list!

  11. Jeffrey Zeldman said on
  12. Adam D. Scott said on

    Thank you, Jeffrey. What a truly inspiration few days at AEA. I left Boston ready to take on the world!

  13. Gaurav Mishra said on

    Impressive!
    Will check it all… keeping some spare time.

    Thank you!
    Sir

  14. HHO generator said on

    Nice post, I am currently writing an article on this topic. If you do not have an objection I might borrow a snippet. In case I do I will note your blog and add a link.

Comments off.