Within days, it had spread across the Internet. Soon after it left my desk, I lost any attribution as the source — it was commonly attributed to “author unknown” — and became an anonymous bit of short-lived viral Internet humor.  A friend who worked for a Senator told me that it was buzzing around inboxes all over Capitol Hill. Filmmaker Michael Moore featured it on his web page as the “daily message” and emailed it to hundreds of thousands of his fans. Somewhere along the way, somebody copyedited it and corrected my subhead, replacing “smote” with “smitten.” It was re-posted on thousands of newsgroups and forums. It was translated into Spanish, German, and Japanese. Several friends forwarded it to me, not knowing that I was the author. It literally went around the world, popping up on millions of computer screens, then came back to my inbox.

I learned two things from that experience.  

First, make sure your name appears on your work, or no one will know what you created.  

Second, it’s impossible to predict when something will blow up on the Internet.

Most content lands with a thud. Most web jokes flop. Most blog posts are never read.  Anyone who promises that they can make something “go viral” is lying.

In the years that followed, much of my professional life focused on the Internet: email marketing, web design, online activism, interactive design. Generally, you bat for the average on the web: some content does well, some doesn’t, but you work to build a steady growth in traffic or to reach a particular audience. You’re just trying to get on base.

But every once in a while, you take a swing and something flies out of the ballpark.

My most recent “viral” success came last year at my day job with this infographic.  It started as a simple request from an economic policy expert who wanted to compare proposed federal budget cuts with existing tax breaks. She brought me an overwhelming five-page spreadsheet with 50 rows of numbers. If you dug through the dense data, you could see the comparisons, it took a lot of focus and concentration. 

I suggested that we cut the data down to ten or fewer comparisons, and rather than comparing items based on topic, compare them based on value.  In other words, we didn’t need to compare a transportation budget cut with a transportation tax break; what we wanted to show was the choice being made between budget items with a similar price tag.  That choice would show the priorities and the ideology behind the budget, and say something about the people who pushed for it.  My client agreed, and so I created a very simple side-by-side comparison table, focusing on a clean, readable design, something people could understand at a quick glance.  We gave it a somewhat uninspired headline:  “Infographic: Tax Breaks vs. Budget Cuts”

We posted it on Tuesday, February 22.  At first, it gathered good traffic, but nothing prenomenal.  But a couple weeks later, someone called “greywolf359” posted it on a Daily Kos diary with the headline “The Must See Chart (This is What Class War Looks Like).”  That post sparked 133 comments and was “liked” on Facebook more than 11,000 times and tweeted more than a thousand times.  That same day, someone spotted the DailyKos post and re-posted the graphic  on posterous.com with the same headline. This post was the one that really exploded:  it was viewed more than 1.1 million times, generated nearly 500 comments, was tweeted 1,325 times, and was liked on Facebook 104,000 times. Two days later, Andrew Sullivan at the Atlantic made it his “Chart of the Day,” adding his short note: “You don’t have to be a flaming Marxist to see that there’s something askew here.”  All this buzz drove traffic back to our original post, generating more than 200,000 page views, making it the single most popular item on our web site for 2011.

In the end, this little graphic that I only spent a couple hours on was viewed by millions of people, sparked debates and arguments across the web, and, most importantly, advanced our argument to a wide audience.  This graphic hit the web long before the start of the Occupy movement and the 99% protests; it attempted to re-focus the public debate from a narrow focus on budget cuts to a bigger question of national priorities. We wanted to show that it wasn’t just about cutting spending, but also about reconsidering tax breaks that benefited the wealthy.

A cocktail of chaos and boredom fuels the Internet; it’s hard to foresee what will spread exponentially. Most often, stuff that goes viral does so by luck more than by design.  That said, a few things helped us with this graphic that can inform designers.

First, the graphic was simple. We showed a lot less information than the client originally wanted. We also edited all the text down to the most minimal labels.  The result made this easily skimmable; a chart you could read and understand within a minute.

Second, a clear message drove the design: our argument was that the proposed GOP budget cuts were unfair choices when weighed existing existing tax breaks.  Each line showed a choice available to lawmakers when they considered a new budget: safety-net programs that benefit large groups of people or tax breaks that help the richest Americans.  We hoped the comparisons would alarm and infuriate people, and, by all the evidence, it looks like they did.

Third, the graphic was credible.  This wasn’t a piece of political propaganda. Every number was sourced and verified: we used no “fuzzy math” or statistical trickery to build this infographic.  People could — and did — disagree with our take on the numbers, what they meant, and whether or not our arguments are valid, but we wanted the facts to be irrefutable.

The infographic didn’t move.  It had no animated rollovers.  It didn’t even have any graphics, other than some color and a few lines.  It had good content and a design that didn’t get in the way.  And that, as much any thing else, is a formula for a viral hit.

If you want to check out stuff in depth, here’s "a feed apart," a collection of real-time tweeting going on at the conference and my own rough notes (day one | day two) from the individual sessions. But for a quick skim, here are twelve of the most interesting take-aways from the conference:

Photo: FLICKR / John Morrison

Zeldman doesn’t see the point of your redesign

1. Jeffrey Zeldman suggested that the most important question to ask at the start of any redesign is "What problem are we trying to solve?" If the client can’t answer that question, you might not need a redesign. He points out that "you get tired of your site before the public does," and that doing a redesign mostly for cosmetic reasons is rarely a good idea. A redesign should take place to help a web site do something better or more effectively, not just to give it a new look.

2. Zeldman’s tips on design for non-designers: Limit the number of colors, type styles, type sizes, and use a simple layout. Do that, he says, any almost anything will look somewhat cohesive visually.

3. Along the same lines, Jason Santa Maria offered his "drop-dead guide for not making ugly stuff with type":

• don’t use two scripts
• don’t use two display typefaces
• don’t use two sans serif faces
• rule of thumb: ONE OF EACH (the key is contrast)
• if possible, pair fonts from the same designer
• look for contrast, not similarity, between fonts in use

4. Jason Santa Maria also suggested that when it comes to design, it’s better to think first and sketch out your ideas before sitting down at a computer. Let the computer be “a tool of refinement,” not the starting point for thinking through ideas for a design concept.

5. Kristina Halvorson said that the biggest reason for delays in web projects is content: people don’t plan for it, wait too late to create it, and don’t think through all the different types of content they will need to launch. She argued that web projects should START with a content strategy before a design strategy. And, perhaps most alarmingly to designers everywhere, she pushed a bold rule: “never use lorem ipsum.” (dummy text leads to mock-ups and design concepts that are removed/detached from the real site that will be delivered)

6. I didn’t love Dan Brown’s presentation (a bit too abstract and high-concept for my liking), but I loved — and totally agree with — this quote: “the curse of being a designer is you are perpetually unsatisfied with your work.”

Photo: FLICKR / John Morrison

Whitney Hess just called you a wimp.

7. Whitney Hess gave a great talk on user testing. “It looks good” is the worst feedback you can get from users: you want to hear what they don’t like, what confuses them. And the process of user testing and improvement should be ongoing, not a one-time exercise. She advocated doing user testing live, yourself, vs. online testing (“Don’t be a wimp! Be in the room with the test subject. Feel the pain!”) She quoted principals from a successful web business (iridesco.com) that relied heavily on user testing and feedback: “You have to have humility and listen. Users aren’t always right, but you need to hear them.”

8. Andy Clarke urged designers to shut off Photoshop and Illustrator and start designing “in the browser.” He argued that Photoshop mockups create static, unrealistic, flat model of a design for something dynamic. “We’re designing web pages, not a photo of a page.” Echoing many of the speakers, he advocated a “content-out approach.” He also argued emphatically that web pages don’t need to look the same in every browser — they just need to WORK in every browser. Experiences can vary.

Photo: FLICKR / John Morrison

Eric Meyer: Pro-JavaScript, Anti-Haircut

9. Eric Meyer predicted that within the next two years, JavaScript will largely replace Flash plug-ins on the web. He showed how JavaScript tools are helping enhance the web and lead innovation that browsers are slow to provide. “We don’t have to wait for the standards bodies or browser makers anymore.” Some cool stuff he showed: modernizr (making old browsers behave like newer ones), cufon (font replacement with JS, not Flash), typekit (a third-party font-replacement tool), raphael (JavaScript vector drawing), bluff (JavaScript graphing), and processing.js (lots of funky vector animation and games)

10. Luke Wroblewski talked about web forms and how they are almost all terrible. His pitch, in short: Nobody likes forms. Forms get in the way. Make them easy for your users. He provided a lots of examples and best practices (too much to summarize here), but his book covers it all in detail.

11. Dan Rubin’s talk was a bit all over the place, but he argued a simple, important principle: “If your design needs instructions, it probably needs to be redesigned.”

12. Dan Cederholm demonstrated lots of ways to use “progressive enrichment” in web design by using CSS3 today. His new book goes into detail. Lots of this will only be visible to people using newer browsers, but since most of it presentational, people with older browser won’t know what they’re missing. He refers to a Shaker design philosophy quote that applies well to web design: “Don’t make something unless it is both necessary and useful; but if it is both necessary and useful, don’t hesitate to make it beautiful.”