AEA12: Content First!

AEA12: Content First! Picture

The rules of design engagement are changing. You may no longer be in control of the user’s visual experience. Learn the number one job of every web designer, how to persuade clients and bosses not to subject users to dark patterns, why the days of “Best Viewed With…” are finally behind us, and how a mobile (or small screen) strategy can help you improve your content, rethink your web experience, and put the user first.

Content First!
Everything we know is wrong.
Jeffrey Zeldman

I love Boston. My favorite Boston joke is from Spinal Tap. “When the gig for Boston was cancelled, their manager tried to console the band by saying “It’s not much of a college town anyway.”

An example: The East River Ferry website.

  • “Welcome to the East River Ferry”
  • “Relax, we’ll get you there.” (unlike the graffiti ridden subway with the alien locusts)
  • Written as if readers read every word and ponder every sentence. Like a japanese poem.
  • Updated Service Advisory… Click here to read. Screaming Caps. Alert button next to it. Schizophrenia within the warning. Designed by committee.
  • Content problem that was not foreseen. Did not think about the contingency.
  • Need to think about the website as a living entity. Not a brochure that is written once and never touched again.

Content is a design problem but designers are often hostile to content.

An example:

  • Where is the content that you came to see? (Water for elephants review)
  • Why did the user come to the page?
  • The scent of information theory. Make your website smell like deer urine.


  • Marco Arment would ride a train with no wi-fi. He wanted to read articles so he made an app that you scrape the content that you wanted, format it for reading and leave out the other junk (ads, navigation, etc).
  • Readability came later.
  • Reformat content and be able to read it whether you have internet or not.

Designers may no longer control the visual experience (and maybe we never did).

Consensual Hallucination

  • We all agreed to not support browsers, connection rates, disabilities, screen sizes.
  • We act like we’re in control. There is a struggle between the ebb and flow of the web and the control that our bosses want.

NY Times Redesign

  • Most successful redesign in history.
  • Blowed up real good if the 24px or larger check box for the visually impaired is selected.

What does controlling the visual experience mean? It’s not that the design breaks, it’s that we never had control.

Restyling or reformatting was a minority activity. That is no longer the case.

  • Driven by the user’s need for content.
  • Our job is to serve the customer.
  • Design is “to connect the right user with the right content at the right time.”

People click in the background of the web page to bring a browser to the foreground.

The SAP ad on ZDNet used this knowledge and made the background a link to the SAP page displayed in the ad. They increased traffic significantly but conversions didn’t increase.

Lesson: You can make people look at your ad but you can’t make them convert. Design that does not serve people does not serve business.

Sometimes to keep an account, you’ll do all kinds of evil. In the long run, this will hurt our business.

Content precedes design. Design in the absence of design is decoration.

Once blogging tools came out, the promise of the web was fulfilled. Blogger was one of these tools.

I love you, I want to change you. Google purchased blogger and then wanted to change it.

Google had designers build a number of valid XHTML templates. Minima was the only one that survived. Minima was the most successful web design in history. It was a universal copy container. A universal text container.

Progressiv enhancement = good experience for all.

Responsive design is not liquid design. It’s a way of meeting the user more than half way. No matter what device you’ve got, the layout works.

Small screen vs mobile.

If you have a content site, responsive may be right for you. If you need a location aware site, an app may be right.

“Content First” - I came here for the content and if you don’t give it to me I’ll get it from instapaper or readability.

Small screen means content first. We’re being pressed on both sides. Readability on one side, mobile on the other side.  Need to change our design practices to accommodate. That’s content!

Designs can’t be hostile to content!

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins