Making New Fake News

The OnionIt’s been so long that I’ve been wanting to write this weblog entry that I almost don’t even know what to say anymore. So I’ll be blunt: earlier this year, Behavior was fortunate enough to have been selected to redesign the online edition of The Onion. Our assignment: a major overhaul of the satirical newspaper’s online presence from top to bottom, and to help their Web team open up the entirety of their online archives — previously subscription-only, now freely available to everyone, gratis. A huge undertaking.

That wasn’t the whole of it though, as we were also enlisted to perform a comprehensive overhaul of The Onion’s pop-culture review section, The A.V. Club, including a complete rethinking of the way that publication expresses itself online. It’s never garnered the attention that the satirical content has, but the A.V. Club is sometimes my favorite part of the paper — in any given week, they run some of the most intelligent and engaging reviews you’re likely to read on any new movie, album, book or video game.

We actually launched the A.V. Club several weeks ago — you can see it now at — AVClub.com — but wanting to keep things hush hush until both redesigns went public, we kept it mum. The Onion, by its nature, was more complex and more involved, and we’ve spent the intervening weeks working with their Web team to make the new site a reality at a pretty intense rate. And now, tonight, it’s finally done; it launched earlier this evening and you can go see it at TheOnion.com.


The New News Thing

Compared to the recent redesigns of other online magazines, what we did for The Onion isn’t quite so whiz bang — not a grand slam visual breakthrough, but a pretty serious undertaking nevertheless. We used a bit of sIFR for text labels, a bit of JavaScript for some modestly interactive content modules, and we structured the entire site with some fairly complex XHTML and CSS (there are some errors in there currently, but only moderate changes are required for it to validate) — but the real focus was on getting the joke right.

Below: True lies. From left, the home page and a columnist’s archive from the newly redesigned TheOnion.com.

The editorial staff told us that The Onion was at its funniest when it was deadpan and straight-faced; as a longtime reader, I concurred wholeheartedly. The design challenge, then, became somewhat more complex than creating a Web site for a weekly newspaper with a fairly low page count, but rather how to create a site that might pass for a legitimate news organization on the level of The New York Times or The Washington Post.

Almost Plausible

So an enormous amount of thought and energy went into determining a look and feel that was unflinchingly “newsy.” The writers run jokes that make perfect sense in the context of the The Onion’s print edition, but online, they threatened to compromise the pretense of The Onion as an almost plausible Internet news source — unless we treated them with just the right care. A lot of my original ideas of what an online news source should be were rightly shot down by the editorial staff — it was probably one of the toughest design challenges I’ve ever taken on because it was a first, furious exposure to satirical information design. None of my prior experience was quite like it.

If the results look suspiciously like a green version of The New York Times Online, it’s because we spent a lot of time studying how the Gray Lady delivers news — but I like to think we were conscientious enough not to steal crassly. The entire design approach was built from scratch, including a fairly intense grid system at the heart of every page that is a direct response to the myriad requirements unique to The Onion: a singular mix of content types, past, present and future, and an influx of advertising inventory that finances the newly opened archives. (There’s lots to say about the mechanics of this grid, and I’ll write more about it in a forthcoming weblog post.)

All in all, it’s a solution tailored expressly for the delivery of The Onion’s particular kind of content — fake news — but I like to think that it would also make for a credible delivery platform for the delivery of any kind of news. Our design team at Behavior worked long hours and hard nights basically building an online news operation in miniature, and a lot of what we learned in the process would translate smoothly into “real” news organizations, I’m confident. In the end though, the litmus test of whether we did a good job will be whether or not the always hilarious articles that The Onion publishes continue to be hilarious — if we got out of the way of the writing, then we did a good job.

+
  1. The redesign is fabulous! I’ve been drooling over the AV Club design since it went live, especially since it no longer looks like the ugly step-sibling of The Onion proper. Both are also far more useable than the previous incarnations. I’m green with envy.

  2. Thanks for doing an excellent job with one of my favorite sites…As a frequent reader, I can definitely say it’s a HUGE improvement.

    However, I do miss the font they previously used for the title of articles–to me that typeface is strongly associated with their identity. With all the sIFR already being done, why not on the article titles?

  3. Thanks everyone! The Onion is so well-liked, I literally had knots in my stomach prior to launch, fearful of pissing people off with the redesign. So it’s nice to get some positive feedback.

    Michael B.: We originally wanted to use the Franklin Gothic Compressed that’s so clearly identified with The Onion, because, unlike the A.V. Club where we were trying to reinvent a brand, here we wanted to be as true to the brand as we could. But the editors are actually trying to evolve the brand subtly and moving away from that font — this is a first baby step in that process.

  4. Page fall down go boom! http://www.theonion.com/content/harvey/blog

    The ads on that page are currently spitting out this error:

    Advertisement
    n’); } if ( plugin ) { document.write(”); document.write(‘ ‘); document.write(‘ ‘);document.write(‘ ‘); document.write(‘ ‘); } else if (!(navigator.appName && navigator.appName.indexOf(“Netscape”)>=0 && navigator.appVersion.indexOf(“2.”)>=0)) {document.write(”); } //–>

  5. I should clarify: Behavior did the front-end design and client-side code, and The Onion’s very capable technical team implemented the redesign of the site. And yes, they went with Drupal and did a fantastic and incredibly fast job of bringing online years and years’ worth of archived content in a very stable manner. So, hats off to them.

  6. Very smart indeed Khoi. If there’s one team who can produce such elegant grid design for such a wealth of content, then it’s you and the team at Behavior. Congratulations.

  7. congrats on the redesign!! i knew that this was a long time and coming so it’s great to see the final outcome. you all did stellar work once again. i’ll definitely have to read it more often!

  8. Great work, Khoi. It’s really nice!

    I’ll be curious to see what kind of response you get to the width of the layout. I thought ALA was able to pull off the 1024px-based layout because of it’s target audience, but The Onion presumably has a much more general group of readers. I wonder how many people will required to scroll horizontally and how they’ll react to that.

    Again, great work! :)

  9. Nice work, Khoi! This redesign efficiently organizes a ton of information and succeeds in emulating a legitimate online news source.

    My one complaint is that the section heads on the homepage don’t really stand out, and their use of sIFR seems arbitrary and unnecessary. At that size (8px), the nondescript sans-serif you used can barely be distinguished from Arial, and sIFR prohibits the browser from resizing the text, obscuring the distinction that much more. Also, for some reason, the subheads under Daily Updates in the right column (QuickPoll, Onion Radio News, etc.) aren’t selectable. Under these circumstances, I just thought the use of sIFR was kind of a head-scratcher.

  10. It’s just disappointing that the sites you had to emulate are so poorly designed; crowded navigation, confusing hierarchies, unnecessary pagination…I understand the motivation to make this look “normal”, but just like the Daily Show, I’ve always expected the Onion to be a little bit “better”…both design and content.

  11. Rob: The subheads in the right column aren’t selectable, you’re right. We’re using background-images to get the same effect as sIFR there, partly because those labels won’t change nearly as often as the ones rendered with sIFR. But they’re still semantically correct — take away the style sheet and they’ll show up as regular H3s.

    The sIFR can be construed as a bit superfluous, I agree, but I think it serves a small and important part in making the page look a bit customized. Especially for users whose screens don’t anti-alias the typography, it adds a nice extra bit of high-touch to the design at relatively little cost.

    Still, one of the truly great things about sIFR is that, if it really does start to look more and more superfluous as the site grows, it’s very easily removed. SIFR’s impact on the XHTML markup is truly minimal — we can get rid of it with very little effort if it becomes a problem. For now, though, I quite like it.

  12. The new site is way more professional-looking. I am really impressed with it. I especially like the decisions to tease the horoscopes and american voices, and to make the quick-graphic headlines at the bottom clickable/enlargeable.

    I read it at 800×600, and the grid actually does a good job of making the rightmost column cut off okay and the info architecture doesn’t have me h-scrolling back to the left once I’m done with that part and moved onto the cutoff part.

  13. Bless you.

    I’ve loved the Onion ever since living in Chicago, we’ve been reading it for free, for years — and one of my huge complaints was the poor look of their website, and blocking their archives.

    Congratulations to Khoi, the Behavior team, and the Onion — it’s a fantastic redesigned, highly welcomed.

  14. Great job, though for some reason those charming Big Flash Ad’s don’t render in Firefox-”Deer Park”.
    AVClub is awesome.

  15. Wow, Khoi, nice work. And I can imagine the effort involved, you should be very happy with it. I really like what you did with A.V. Club also, very clean and well organized.

  16. VERY impressive redesign. I want to make clear that I like what you’ve done very, very much.

    But I’m curious about the seemingly random validation errors that occur throughout the source — primarily capitalized tags and unquoted attributes. They really do seem out of place because it looks like you’re really shooting for standards compliance in other places.

  17. Warren: Yeah, it’s a little complicated. As I should have mentioned in the body of the post (rather than in a comment, as I did above) is that The Onion’s technical team were responsible for the back-end.

    They’re a talented and very capable staff… Web standards just aren’t their number one priority. I mean, they literally moved a mountain to get this work done, so it’s easy to forgive them for not properly capitalizing some tags. We hope to work with them to get the situation rectified, though.

  18. THANK GOD!

    I can breathe again!

    Zeratsky: Yeah, the Madison team did the Drupal work, etc.

    Warren: Rest assured, when the pages left Behavior’s offices… there were no validation errors! ;) I can prove that too! hehe.

    I’m happy that it came out of the CMS in one piece… complete validity would of just been icing on the cake ;)

  19. This is hot. I’m not sure I can handle any more of these great redesigns in the near future.

    I think it’s amazing that so much information could be presented in such a readable way.

  20. Have you looked at the site in Firefox with Adblock enabled? Why are all the headlines popping up with adblock tags? Makes the whole page look junky. Everyone (and I do mean everyone) I know that uses Firefox uses adblock. If you have not seen what the page looks like, I strongly suggest you do.

  21. My personal opinion is that the entire page (and site) should be blank if you are trying to circumvent the economics of providing free content, but that’s another discussion for another day.

    I just checked out the site with AdBlock enabled, and yeah, there are a few weird AdBlock tags but it’s not really hindering the look too much. Combine that with the fact that probably about 1% of the Onion’s audience uses a combination of Firefox and AdBlock (just a guess), and it just doesn’t seem like a huge deal to me. By the way, we worked with the FlashBlock people to gracefully degrade sIFR to plain text… we also talked to the AdBlock people but I think I neglected to follow up with them. Perhaps I should do that, just for kicks.

    In the meantime, perhaps you communists should think of why it is that you’re getting The Onion for free and then maybe choose to whitelist the list in AdBlock and support their great work… I kid, I kid. No flames necessary.

  22. It looks very nice — I don’t recall ever seeing the previous incarnation of it, so I don’t have previous experience. A link to theonion.com/ doesn’t work, but adding on content/index fixes it all.

  23. I remember when I stumbled across the Onion a year or two ago– thought it was a legit news source for a while. I was pondering why the mainstream wasn’t reporting the same content as the Onion did. Censoring Corporate News fools! I laughed my arse off when I finally realized the truth.

    What happened to the Onion in History? That was some of the best stuff.

    Great work, also-four-letter-first-name friend.

  24. Was it this redesign that broke the A.V. Club for AvantGo downloads recently?

    This part of The Onion no longer works. It shows only a few headlines, and when you click on the only remaining link to a column, you get a MySQL “invalid query” error.

  25. Good work kids. I had recently unsubsribed you from my rss because it was becoming trite. I am now resubsribed.

  26. Just a factual correction, but the Onion archives were for years open to all. Until a year or so ago when some genius decided people would pay $29 for content you could get for free before or from a $9.99 book at Borders. Great to see that someone at The Onion pulled their head out of their butts and peeled away this premium stuff.

  27. If you force links to be underlined (because, yes, fancy designers know that the best sites make it hard to find links), the front page looks GODAWFUL. Truly a terrible design.

  28. I’m just going to try and be polite here and say that I certainly respect anyone’s opinion to deem our work “God awful” and “truly terrible.” And I have no trouble with you voicing your opinion here on this blog. But please, have the courage to include your real name and your real email address.

  29. Don’t worry about the flamers, Khoi. I learned long ago that the world is made up of many different kinds of people. It is impossible to create a web site that will satisfy the visual design needs and information design needs of 100% of the users out there.

    I think the new design is fantastic and was happy to play a smal role in helping the team choose Drupal as the CMS platform. My only complaint about the new site is the choice of using SIFR for headlines. It seesm extraneous and unnecessary, especially since the font you’re rendering in SIFR is very much like a standard Helvetica or common sans-serif font. I think using CSS to render these (with the system’s version of Helvetica; san-serif) would be a lot less cumbersome and solve the problem of those users who have Flash disabled in their browsers (a growing number).

    I think SIFR is a fantastic technology, but like every other technology available there are times when it should be used and should not be used.

  30. I was immediately delighted to see the new layout, which I find superior to most online newspapers. When I sit down with an offline newspaper that I love (the WSJ for instance) I find it convenient to browse the entire newspaper looking for items of interest. While there is an obvious hierarchy of elements, the individual elements aren’t each screaming to distract my attention from every other element. Many online newspapers treat me like an MTV refugee and I despise them for it. Your new Onion (and indeed, the NYT) treat me with respect, and I’ll return the compliment by returning again and again.

  31. Great looking site. Congratulations. Unfortunately I’m also an Adblock user and it does look pretty bad with all the blocking and sifr/adblock tags (and yes, I do have the onion whitelisted).

    But I’d really caution against concerning yourself too much with an ever changing and in some ways questionable extension. Having some sites broken is a small price to pay for getting rid of so much other clutter; for me that is.

    Also, I wouldn’t get tempted to view all us adblock folks as representative of the larger audience. Most people will see it as it’s supposed to be, which is really nice BTW.

    PS. The AV club looks great with or without adblock. Thank god that site was finally redone.

  32. Mike: If you have The Onion whitelisted, you should be seeing no AdBlock tabs. You can also turn off AdBlock tabs pretty easily as well. I have been in contact with the AdBlock developers recently and in the next release of the extension, the tabs will be turned off by default. Apparently they can cause other problems unrelated to sIFR.

  33. Oops. I keep confusing FlashBlock with AdBlock. I don’t believe the current release of AdBlock allows whitelisting.

    The simple solution is to pull up your AdBlock preferences and just block “*sifr.js”. As I said in the previous comment though, the next release will have the tabs off by default so this issue will continue to shrink.

  34. On AVClub’s article detail pages for Features and Interviews, why does the ‘Recent Reviews’ list display links to a seemingly random group of articles from other sections? Outside of Features and Interviews, it seems you got it right and the ‘Recent Reviews’ list is composed of links to articles within that section.
    This is probably just another case of OnionTech being overwhelmed and not getting their q-q-queries right—a thankless job.

    Both sites do indeed look great.

  35. So, after taking the time to learn how to actually use the Adblock extension (turned off obj-tabs in the settings and figured out how to correctly whitelist sites) I can see the site the way it was intended. An important lesson in RTFM I guess. I feel dumb…

  36. in theory the site looks very nice, but the (over) use of flash seems insane to me. besides adBlock making the site look ugly there are issues of accessibility, which to your credit seems to be largely taken care of.

    as for the ethics of adBlock, I’d turn around and pose the question of whether people should be forced to watch annoying flashy ads to view *any* content. I could go much further on the subject but it doesn’t seem appropriate.

    the point is lots of people I know use adBlock and a good number of people i know hate flash, so I think you are underestimating the number of people who will be turned off by this design, one that could have been done just as nicely without flash.

  37. Is it just me or is everyone getting link errors when clicking on the text links in the Sponsor box towards the bottom of the page?

  38. I’m a long time reader, and I don’t care for the redesign. Problems:

    -The width. It is too wide; way, way too wide. Four columns is insane, and I see this trend becoming more pervasive on the web. Why? What’s the benefit of such wide sites? It forces users to scroll more, or expand their browser to see it all.

    -The content is too densely packed; there’s no focus on the primary stories, as each blurb fights for attention. The overall effect is of a vat page of words..not content.

    I understand the motivaton was to make it more “newspaper-like”, but the fact is, web content is NOT the same as print. Our eyes can quickly scan printed material laterally, but in a browser its more tedious. You should have emulated ONLINE news sites, not print. Take CNN.com for example, it has a clear hierarchy of news, and is a comfortable width.

    I realize my opinion here is meaningless (I can’t imagine you’ll go back and make the site narrower, or at least make some columns variable), but I had to vent. I really disklike reading the onion now; it doesn’t feel fun anymore, for some reason.

  39. I’ve been wondering, although apologies if this has been answered somewhere in the comments, just how did all the archives become freely available? How did they manage?

  40. I’ve found that printing out articles in Safari, Firefox and Netscape 7.01 doesn’t retain the formatting on the printed page i.e. one page will become two because the text doesn’t wrap around the first image correctly.

    A pity and it’d make the site perfect if it could be solved.

    thanks,

  41. Way, way too busy. I’m overwhelmed by the site. The NYT site is great because it’s much simpler. Bigger fonts, less info! please!

Thank you! Your remarks have been sent to Khoi.