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]

55 thoughts on “An Event Apart redesigned

  1. 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.

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

  3. @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.

  4. 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.

  5. 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?

  6. @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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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!

  12. 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.

  13. 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.

  14. 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.

  15. 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.

  16. 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

  17. 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

  18. 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…

  19. 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).

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

Comments are closed.