Skip to content Skip to navigation

Content Comes First

Often when we hear that little voice in the back of our minds, "Wouldn't it be great to have a new website?" what we're really thinking is, "Wouldn't it be great to have a new look for our website." While getting a fresh style or "skin" for your site is absolutely a valid reason to want a redesign of our website, in most cases what will really make the most difference for our site visitors is to rewrite, restructure, and rethink the content. Now, this is no easy task, but I would argue that if you start with content first, your website will be immensely more successful at reaching and exceeding your goals.

So how do we think "content first?"

The first thing to get clear on when you are considering a website redesign is who your audience is, and what they need to do and learn on your site. Is your audience an external public trying to find directory information about people or programs? Are they students trying to connect with faculty and find courses? Try to articulate who they are and identify their main tasks and goals when using your website. Once you know your audience, you can tailor the message of your website.

Your audience will drive the message and focus of your content, which will in turn drive the structure and design of your site as well. Once you are able to identify your primary site audiences, you can approach each page in your site, and the information architecture (structure) of the site from the perspective of how to reach your audience. Here's a nifty checklist modified from Chapter Three's page table worksheet:

For each page in your site, answer the following questions:

  • Who is the most important audience for this page?
  • Who is the second most important audience?
  • What's the #1 message we want to get across on this page?
  • What things should a user be able to do on this page, or act on?
  • What buckets of information do we need on this page? Rank from most important to least important.

For a hypothetical departmental homepage, you might come up with this:

  • Who is the most important audience for this page?
    Prospective students
  • Who is the second most important audience?
    Press editors
  • What's the #1 message we want to get across on this page?
    That our department has an active community, creating relevant publications and projects
  • What things should a user be able to do on this page, or act on?
    Learn about the department, Read recent news, See upcoming events, Read featured stories about current students
  • What buckets of information do we need on this page? Rank from most important to least important.
    #1) featured student stories, #2) news and events highlights, #3) information about the department

This last bullet is important—make sure to consider your audience and messaging goals when ranking your buckets of information.

The next step is to create a list of the content that will go on your hompage and define what assets might be needed to create that content.

A content list for our hypothetical departmental homepage:

  1. Featured student stories (requires: image, title, teaser, link to read more)
  2. Recent news (requires: thumbnail image, date, source, title, link to read more)
  3. Upcoming events (requires: date and time, title, location, link to read more)
  4. About the department (requires: short paragraph with link to read more)
  5. Featured programs (requires: links to featured programs)
  6. Featured people (requires: thumbnail image, name, short bio, link to people profile)

Now, this order is important. The order we list things here (in order of most important to least important) is what will drive the placement of this content on the page such that we can highlight the most important information first. In this way, the design will truly be derrived from the content hierarchy.

Hierarchy of content in layoutUnderstanding our content hierarchy is extremely important when considering how our website will translate to mobile devices. When using responsive themes (the Stanford theme stack is responsive), we must pay attention to how the "desktop" layout of content will translate to mobile. In the list we created above, we want to make sure this content appears in the order we specified when viewed on a mobile device. To better understand how your responsive theme handles your content, you can use a tool like responsive.is to preview your page in various screen sizes. The Open Framework theme, which is at the base of the Drupal 7 theme stack at Stanford, will provide (soon) a useful block order overlay tool which tells you the order of hierarchy of blocks placed on a page. You can use this ordering to better understand how your content will shift when it is reduced down to a mobile screen size. If at all possible, it is best to consider a mobile first approach when creating your page layout—think first how your content will appear on mobile, then work your way up to desktop screen size.

Thinking of your content first might be a bit more work, but the results are worth it—a website that is driven by audience and a design that truly supports your communications goals.

For more information about responsive web design and how you can implement this in your Drupal site, check out Brian Young and my BADCamp 2012 presentation, "A 'content first' approach to designing responsive Drupal layouts using Twitter Bootstrap," or connect with us online at http://openframework.stanford.edu.