start blog post

SCAN Web Design Principles: C is for Content

Your first impression

Your homepage should clearly communicate your site's purpose or value. Provide all important options on the homepage, so your visitors can find what they were looking for quickly and easily. With that in mind, try to avoid clutter by presenting unnecessary options, text, or graphics. If someone gets information overload looking at your homepage, they'll never bother to look deeper into the site.

Aptana and Pomodoro's Pizza sell two very different products, but their homepages are remarkably similar in design. Uncluttered layouts make it obvious what they're offering, how to get it, and where to learn more.

Semantic HTML

HTML is considered "semantic" when the markup itself conveys meaning. List items are represented by LI elements, a testimonial or long quote within blockquote tags, section headers and subheaders in h1 through h6 tags, nested appropriately. If you look at the source code of your page, it should be clear what your content is, and the context in which it sits. I'll get into more reasons for doing this in the next SCAN post (A is for Accessibility), but a good rule of thumb is to write content and markup FIRST, without regard to where things will be placed or how they will look. Then style the markup using CSS, and finally add any additional behaviors using JavaScript or another language.

Web designer Joe Dolson has a simple and relatively thorough guide to semantic HTML.

Don't fight your visitors

Most people expect certain things when browsing the internet. When they hit their browser's Back button, they expect to go back a "page", whether that means undoing an action on an AJAX app, exiting your site, or retrieving what they last looked at. If something looks like a button, they expect to be able to click it to make something happen. Fighting or abusing common expectations in a site's design will confuse and lose people. Catering to these expectations will make your site pleasant to navigate, and encourage return visits.

The US Population apparently looks like an ad to people viewing census.gov, and the result is they just don't see it. This behavior is called Banner Blindness.

How do YOU WANT people to find your site?

  • Does your content facilitate this? If you don't include a word or phrase on your site, people generally won't be able to find you by looking for that phrase.
  • Does your content have "repost" or linking value? Good content will encourage organic links, which drive targeted traffic to your site and boost search engine placement.

How do YOU EXPECT people to find your site?

  • Are these expectations reasonable? Searches in most arenas are short and general; assuming people will type in 20-letter words or 20-word phrases to find your site will lead to a lonely website in the vast majority of cases.
  • Does your content facilitate this? If you don't include a word or phrase on your page that people actually look for, people will probably not be able to find it with a search engine. Use Google Insights and other keyword analysis tools to help make sure your content relates to what your target audience is looking for.

How do people REALLY FIND your site?

  • Tracking takes time. Don't make decisions based on a couple days of analytics. Don't expect to see immediate results in your analytics when you DO make a change. Let people get accustomed to the change, and track behavior over time.
  • Modify DESIGN and CONTENT based on your results. If people aren't sticking around, take another look at your design. Are you cluttering up the field of vision? Are your graphics fighting your visitors' expectations of how websites are "supposed" to work? Also reconsider your content — check for misspellings and typos, missing words (or paragraphs!), incorrect or uncommon phrases.
  • Make changes GRADUALLY. Revamping a whole site at once might cause you to lose returning visitors before you can even tell if new visitors like the changes. Big changes can temporarily hurt SERPs too, depending on the circumstances. If you do need to introduce a completely new layout or format, warn your visitors ahead of time.

More in my SCAN web design series:

  1. SCAN Introduction
  2. S is for SCANNING
  3. C is for CONTENT (current page)
  4. A is for ACCESSIBILITY
  5. N is for NAVIGATION

var tags = [];

  • share this post:
  • email a friend
  • float this post
  • digg this post
  • share on stumbleupon
  • submit to technorati
  • tweet this post

end blog post