1 Jan 2009 11 am eastern

An Event Apart redesigned

There’s a new aneventapart.com in town, featuring a 2009 schedule and a reformulated design. I designed the new site and Eric Meyer coded. (Validation freaks, only validator.nu is up to the task of recognizing the HTML 5 DOCTYPE used and validating against it; the validator.w3.org and htmlhelp.com validators can’t do this yet. Eric chose HTML 5 because it permits any element to be an HREF, and this empowered him to solve complex layout problems with simple, semantic markup. Eric, I know, will have loads more to say about this.)

Family branding concerns drove the previous design. Quite simply, the original An Event Apart site launched simultaneously with the 2005 redesign of A List Apart. Jason Santa Maria‘s stripped-down visual rethink was perfect for the magazine and is imitated, written about, and stolen outright to this day. It was a great design for our web magazine because it was created in response to the magazine’s content. It didn’t work as well for the conference because its design wasn’t driven by the kind of content a conference site publishes. But it was the right conference design for 2005 because the goal at that time was to create a strong brand uniting the long-running web design magazine with the new web design conference that sprang from it.

New goals for a new environment

In 2009, it’s less important to bolt the conference to the magazine by using the same layout for both: by now, most people who attend or have thought about attending An Event Apart know it is the A List Apart web design conference. What’s important in 2009 is to provide plenty of information about the show, since decisions about conference-going are being made in a financially (and psychologically) constricted environment. In 2005, it was enough to say “A List Apart has a conference.” Today more is needed. Today you need plenty of content to explain to the person who controls the purse strings just what you will learn and why a different conference wouldn’t be the same or “just as good.”

The redesign therefore began with a content strategy. The new design and new architecture fell out of that.

Action photos and high contrast

The other thing I went for—again, in conscious opposition to the beautifully understated previous design—was impact. I wanted this design to feel big and spacious (even on an iPhone’s screen) and to wow you with, for lack of a better word, a sense of eventfulness. And I think the big beautiful location images and the unafraid use of high contrast help achieve that.

Reinforcing the high contrast and helping to paint an event-focused picture, wherever possible I used action shots of our amazing speakers holding forth from the stage, rather than the more typical friendly backyard amateur head shot used on every other conference site (including the previous version of ours). I wanted to create excitement about the presentations these brilliant people will be making, and live action stage photos seemed like the way to do that. After all, if I’m going to see Elvis Costello perform, I want to see a picture of him onstage with his guitar—not a friendly down-to-earth shot of him taking out the garbage or hugging his nephews.

So that’s a quick overview of the redesign. The store is now open for all four shows and the complete Seattle show schedule is available for your viewing pleasure. I hope to see some of you in 2009 at our intensely educational two-day conference for people who make websites.

[tags]aneventapart, design, redesign, relaunch, webdesign, conference, events, HTML5, ericmeyer, zeldman[/tags]

Filed under: A List Apart, An Event Apart, art direction, Boston, Chicago, cities, Code, conferences, content, CSS, Design, development, eric meyer, events, Happy Cog™, links, Redesigns, San Francisco, Seattle, Standards, User Experience, UX, Web Design, work, Zeldman

55 Responses to “An Event Apart redesigned”

  1. Keith LaFerriere said on

    Brilliant work. Absolutely the right approach, as well. Ahead of the curve and self-created.

  2. eraevion said on

    Good work, it looks pretty cool!

  3. Greg said on

    It’s good to see you back in the design saddle.

  4. Niki Brown said on

    Simple and too the point! Hopefully I’ll catch you guys in Boston! The conference is just a few blocks from where I work.

  5. Judson Collier said on

    The design is fantastic. The photos really make the site a bit more expansive.

    Although I feel like the bottom left two columns are awkwardly placed, and the mailing list button is sort of floating there, it seems it would be more appropriate on the right column.

  6. Luke Dorny said on

    Oooooh! A redesign! Congratulations! Looking under the hood now…
    Hopefully Southern California will popup on one of the conference schedules!

  7. perke said on

    Congrats on redesign, great work.. and lolz @ “We swear on a stack of W3C specifications” :)

  8. Ray Drainville said on

    The design looks really good—it’s nice to see Jason’s grid article bearing fruit in real-world (i.e., non-blog) sites.

  9. Jeffrey Zeldman said on

    @Ray: There is indeed an underlying grid; I’ll post screen shots at some point. But the redesign preceded Jason’s article (although working with Jason at Happy Cog has definitely influenced my work). The pioneering “grids for web design” credit probably belongs to Khoi Vinh and Mark Boulton (with some later props for Cameron Moll).

    @Judson: The mailing list button appears in the right-hand sidebar on most sub-pages where it appears at all; it appears in the center column only on the home page. I put it there on that one page to call more attention to it. I agree that the placement feels a little imperfect. It would flow more naturally lower down in that column. But lowering it would make it less likely to be noticed. I opted for greater chance of catching the viewer’s attention over better aesthetics—marketing over art, as it were.

  10. bruce said on

    Good to see an implementation using HTML 5. Looking at the source, what’s <b class="ief">&nbsp;</b class="ief"> for?

  11. Smedley said on

    It’s great, but — Verdana? And (Verdana) bolded in ALL BLOODY CAPS? Really?!?

  12. Jeremy Keith said on

    The site looks fantastic, Jeffrey!

    One small correction though: the W3C validator can and does validate HTML5. Behind the scenes, it pipes the document through validator.nu.

    This is a fairly recent change—sometime in the last month, I think.

  13. bruce said on

    trying again (and I’m not hungover!) – good to see a real site using HTML 5. Such a shame that the spec allows anything anchors around arbitrary elements, but you can’t link an entire table row without script.

    Looking at the code, what’s <b class="ief">&nbsp;</b> for?

  14. Jeffrey Zeldman said on

    @bruce: As I say, Eric coded it and can explain the details. The item you mentioned caught my attention as well, but I haven’t discussed it with Eric. My guess is that it’s an IE fix of some sort (for instance, to clear a float). Remember, this is an HTML 5 site using stripped-down semantic markup. It’s working in IE in spite of all that. Perhaps this little snippet of mystery code was the price that had to be paid for IE to render the page. Eric, I’m sure, will address all that sooner or later.

    @Smedley: The site is set primarily in Georgia. Navigation and city names are set in Joshua Darden’s Freight Sans, which is An Event Apart’s house font. Some subheads are set in bold Verdana, which is the closest match to Freight Sans to be found on most visitors’ computers. In operating systems with sub-pixel anti-aliasing, it looks pretty great. Your mileage may vary. That’s the web.

  15. Robert Fauver said on

    Really beautiful and inspiring! I love how the content flows.

  16. Chris O'Donnell said on

    Very inspiring design, kudos to you and Eric. I’ve wondered where the heck to valudaate HTML5, so thanks for finding one!

  17. Josh Stodola said on

    Great job, I like the new design! Except for the pixelated orange arrows, which look out of place.

    The images are pretty stunning, but they need to have a height attribute to prevent this from happening.

  18. porcupine said on

    I may sound as a badass (since it is my first comment here) but I ‘d love to see a real authors’ page. Instead, there is a different authors’ page depending the event. I know this is part of the strategy but I also feel there’s something missing.

    Some design elements e.g. the “Join our mailing list” button or the footer belong to the old design approach. I think a redesign deserves a whole new treatment when it comes to such details.

    I would also change the color scheme. IMHO something bolder should help this design.

    The big images work very well. The Events page e.g. Seattle is very convincing. The Registration page is also great.

    Overall I think it is a very interesting design. It only needs some fine-tuning.

    Thanks for all this. I hope one day I will join your events.

  19. Jeremy Keith said on

    Actually, the W3C validator can and does validate HTML5. This is a fairly recent addition—some time in the last month, I think. Behind the scenes it pipes the document through validator.nu but it’s nice not to have to update bookmarklets and other tools.

    The site looks great, Jeffrey. I’m proud to be listed amongst such grand company for the Boston event. ‘Twill be a blast.

  20. JJ Halans said on

    No microformats?
    Or did I miss them?
    Would be a shame.

  21. JJ Halans said on

    And the first two stylesheets link tags (for /c/09/aea.css and /c/09/home.css) aren’t being closed?

  22. Jeffrey Zeldman said on

    @JJ Halans, Eric Meyer coded the site. No doubt he’ll address your questions when he returns from a family vacation and writes about the site.

  23. karl said on

    Hi Jeffrey,

    The W3C validator hosts an instance of html 5 validator (flagged as experimental). It is the same source code which does the validation on validator.nu and validator.w3.org. The difference in between the results is the code synchronization. Henri Sivonen is working hard on the validator code, and html5 being a moving target, the results of your validation might change in time.

  24. Eric Meyer said on

    Just two very quick responses while traveling:

    * HTML5 was originally picked in order to be able to wrap anchor elements around things like paragraphs. I ended up having to drop that due to rendering bugs in several browsers, mostly Firefox and its cousins; also because we ended up altering the direction we were taking. I stayed with HTML5 because it’s forward-looking and it was also a way of familiarizing myself with HTML5′s requirements in a live project.
    * The .ief is an “IE fix”. It was the only way I could find to get IE7 to behave. Check the end of the aea.css for more details.
    * The unclosed link elements on the home page (they were fine elsewhere) were the result of a last-minute version-control snafu. It’s fixed now; thanks!

  25. bruce said on

    Jeffrey – I know better than to quibble with Mr Meyer’s markup choices, yessir. Looking forward to the write-up, Eric, especially the rendering problems with HTML 5 wrapping anchors round paragraphs.

    Enjoy your holidays, chaps.

  26. Vitor Lourenço said on

    This is wonderful, Jeff! Congratulations for such a straightforward redesign.

  27. zcorpan said on

    Validation freaks, only validator.nu is up to the task of recognizing the HTML 5 DOCTYPE used and validating against it; the validator.w3.org and htmlhelp.com validators can’t do this yet.

    validator.w3.org does recognize the doctype but in this case it misvalidates as XHTML5.

  28. karl said on

    jeffrey,
    (first message didn’t go through. trying again)

    Hi Jeffrey, The W3C validator hosts an instance of html 5 validator (flagged as experimental). It is the same source code which does the validation on validator nu and W3C validator. The difference in between the results is the code synchronization. Henri Sivonen is working hard on the validator code, and html5 being a moving target, the results of your validation might change in time.

    Also html5 spec *for now* doesn’t permit to have any href on any elements.

  29. Jeffrey Zeldman said on

    @karl, meet @zcorpan.

    validator.w3.org does recognize the doctype but in this case it misvalidates as XHTML5.

  30. rick resnick said on

    thank you for the hearty laugh in the css comments:
    “.ief {display: none;} /* for browsers that don’t wet themselves */”

  31. Karl said on

    hehe, already met in the comments of the bugzilla. zcorpan aka Simon Pieters ;)

  32. Nathan de Vries said on

    Looks great, folks. Nice to see more live examples of HTML5 working across browsers, dispelling the myth that we need to wait until 2020 or so.

    I’m sure you’ve already thought of this, but as JJ Halans said it would be great to get some hCalendar action happening.

  33. Webcidentes » Validator.nu said on

    [...] | Zeldman.com Written by admin in: HTML, Web Standards, xhtml | Tags: doctype, estándar, html 5 doctype, [...]

  34. bruce said on

    Trouble with hCalendar is the shonky abbr pattern and the potential accessibility problems http://www.webstandards.org/2007/04/27/haccessibility/ that caused the BBC to remove that microformat in June 08.

    I’m not sure if the microformats people sorted out an alternative, or whether it’s died a death.

  35. Jeffrey Zeldman said on

    Eric has written a bit about the HTML 5 markup of the new site. Check it out.

  36. Bernardo Doré said on

    Great work on the redesign! Choosing the right pictures is always tough. The content definitely sets the modd better than the old site.

    I would really like to attend the event again this year, maybe in Seattle this time (free lodging there)… but not all speakers are first timers in AEA, if you know what I mean…i think its ok if the guy speaks multiple times but let’s at least change the subject…

    hugs

  37. Critic said on

    I guess I’m in the minority but I prefer the old one. Your eye has a million places to go without “focused direction” – the homepage and events main page most offending (also being the most important pages). For newbies, it seems like a lot to digest per page. For loyal visitors, it seems like a lot of extra content distraction.

    But then again I’m no Zeldman

  38. BrianOberkirch.com – Sundries said on

    [...] Zeldman on his redesign thinking for An Event Apart. [...]

  39. Paolo said on

    Very beautiful and emotional redesign, Jeffrey.

    Just one little note about the markup, I know that the great Eric Meyer coded, but do you feel confortable with all that unsemantic in the home page? I mean, we spent years to advocate use of existing meaningful HTML element…

  40. Paolo said on

    Just to clarify my previous comment: I’m referring to ‘span class=title’ for the title of the events list.

  41. Jeffrey Zeldman said on

    Paolo:

    The classes “title,” “date,” and “location” appear to be an attempt to bring event-related semantics to the markup. The class attribute is used because HTML does not include “title” (in the sense Eric is using it), “date,” or “location” semantics in its elements (i.e. there is no “date” element in HTML, although there was in HTML3!).

    Adding these semantics via class attributes is considered good form in the microformats community (and Eric, along with Matt Mullenweg and Tantek Celik, is one of the three fathers of microformats).

  42. Mr. Nguyen said on

    Dear Jeffrey Zeldman

    I wonder what kind of CMS you use for this site (http://aneventapart.com). Is that open source?

    I guess you use php based CMS.

  43. Lensco.be | Blog | The year of HTML 5 said on

    [...] the switch to HTML 5, and published their thoughts and experiences along the way: An Event Apart by Jeffrey Zeldman and Eric Meyer, and UX London by the lads from [...]

  44. Adventures in Web 3.0: Part 1 - HTML 5 « Web developer said on

    [...] in Web 3.0: Part 1 – HTML 5 By tejas786 Last week I was reading about the Event Apart re-design which uses HTML5. I have remained peripherally aware of HTML 5 (I’m on the mailing list) but [...]

  45. Ruth said on

    where is the aea.css? I can’t seem to see it from the site… was curious about the ie7 fix.

  46. johan.bakken's Bookmarks on Delicious said on

    [...] An Event Apart redesigned SAVE [...]

  47. An Event Apart redesigned | stopdesign said on
  48. Ф@kazuhi.to: January 2009 said on

    [...] (tags: event webdesign) Jeffrey Zeldman Presents : An Event Apart redesigned "Eric chose HTML 5 because it permits any element to be an HREF, and this empowered him to [...]

  49. Adactio: Journal—The Rise of HTML5 said on

    [...] went live: the beautifully-redesigned An Event Apart. It’s also written in HTML5. Jeffrey has written about the design and Eric has written about the [...]

  50. January 2009, Oddities & Diversions Archive | Jason Santa Maria said on

    [...] slick new website for An Event Apart 2009 has launched, lovingly redesigned by Jeffrey Zeldman and coded (with HTML 5) by Eric Meyer. I’ll be speaking at AEA Boston this [...]

Comments off.