Responsive Content Modelling – Part 2

by Steve Fisher

Miss part one? Read part one of the article here.

Content Templates

Here we look at all the content views we’ll need, like the home page, landing page, standard content page, news releases, application templates, advanced search, etc. Often there is an established list based on an earlier contract, and this will ensure sure we have everything we need based on audits, audiences, and previous conversations.

We compare content templates with the vision and goals–taking everything we know about the content/audience/message and begin to prioritize them.

  • Where will the content live?
  • Where will the most important content to the primary audiences be found?
  • Will it live on the homepage or a landing page?
  • Is this a page where search is dominant?

Now we prioritize the content templates. Number one being the most important. The higher the number, the less important a content type is. Everything must have a priority and everyone in the group must agree (again, no compromise).

It will be important to know how to argue well and speak your mind.

A good resource is Dan Brown’s listening list from his great book Designing Together. I introduce it at the start of every workshop.

You need a strong facilitator for this piece. This can be anyone who understand a project’s process and purpose. The best facilitators are often the experience architect or the content strategist. Remember, there is no such thing as the client team and the vendor team: there is only the project team. You can’t successfully find that thing that bonds the team and the content by working separately.

For a government project I worked on, as we decided on primary audiences, content, and where the content would live, we discovered that the number one content template was the standard content page. Site visitors were looking for information like how to pay taxes or how to register for a dog license. This kind of information would live on a standard content page. Landing pages, listing page, and search were an important part of their journey, but not the information they were looking for.

Looking for the nucleus (content types)

Yay us! We found and prioritized the core content templates. Now we really need to get more granular and find the unique content type that everything orbits–the content nucleus or the atomic content type (Science! #FTW!).

We need list the discrete content types of our content templates: page title, contact module, featured image, teaser copy, main body copy, related items, location, etc. Each content type needs to be written out, probably on a whiteboard, until we’re sure everything is on the list. This may include items that we’re not sure we want included–that’s okay in a greenlight stage like this. We’ll deal with these later.

Step One!

Attach a high level priority of one, two, or three to each content type or item on the list.

  • One = essential. This view wouldn’t be able to function or communicate the core message without this item.
  • Two = great to have. These items fully support the core purpose of this view.
  • Three = nice to have. If these items didn’t exist it wouldn’t have a huge impact on the view.

If you start to label items with a four, they’re probably pointless. Make note, but remove them. Everything should point people towards the core purpose of this content.

Some priority three elements might reveal themselves as necessary and some priority ones could get demoted.Things will shift as the team progresses, but remember that everyone in the group must agree.

Step Two!

We’re not done yet. Now we go back through the three priority groups and assign a priority order to each element within each group. Be prepared to duke it out, laugh, cry, and sweat through this hard, but essential work. It’s not about compromise, it is about focusing on what’s best for the prioritized audiences.

This is why we established a framework through our UX Vision, design principles, and high level goals. We return to those guideposts for every decision, because opinions won’t move us forward. Considering the needs of our audiences will.

Something must be the very first priority and something must be the last. Try this mantra. EVERYTHING MUST BE PRIORITIZED OR ALL WILL DIE. Okay, don’t do that. But do take it seriously and resist the urge to quit–I promise it will be worth it. This is essentially a less technical, but more human–centered method of content modelling.

Sara Wachter–Boettcher captures this wonderfully in her book, Content Everywhere.

Content modeling requires you to simultaneously understand your goals at the highest level and get intimate with your content’s most minute attributes, and there’s a pretty big chasm in between. Luckily, there’s an entire discipline dedicated to bridging that divide: content strategy.

This step is when we begin to understand what we’re working to accomplish. The team continues to set priorities until every content type on this template has a unique priority.

Once these priorities are set, content type #1 is the most important. This is your core content type. Sometimes it can be 1 and 2 together, which was the case in the government site I mentioned earlier. It was the page title and the clarity copy on the content page that described to the audience what to expect from the content. Everything else connected to that content type.

These thousands of pages, inventories and audits flow out from this unique content type. This is how new design systems, content systems, and web communications tools become successful, gain purpose, and allow people to consistently find the information they’re looking for.

In a multi–device world where content can live anywhere, this is one of the most important things you can do to make your content successful. Content should adapt to all platforms and be represented consistently. We can do this by making sure that priority #1 content is the first users see on any device.

Regardless of content being accessed on a pebble watch or a billboard with constraints, the fundamental message is as clear as it would be on a desktop. And for the 90% of people who start a task on one device and complete it on another, they’re seeing the congruence of this atomic piece of content and the connections it brings.

Basically, you just became a jr. content strategist. Achievement unlocked!


Now it’s time to sketch! We start to draw out the content and interaction patterns while thinking about priority, audience needs, vision, and principles. Keep in mind that priority doesn’t necessarily mean something comes first in a linear fashion. It could mean it has a higher placement in the visual hierarchy.

To make this work for responsive web design (RWD) projects, it’s important to do at least two sketches for each unique content template. One small screen and one large screen. As it isn’t practical to sketch the thousands of possible moments between break points on a RWD, these two sketches won’t cover everything, but they’ll give your future in–browser wireframes a head start and force you to think in both contexts.

The goal is to keep priorities across all breakpoints that you sketch while representing them with the right interaction and content patterns for each screen size. Congruency in experience and content.

Get it on the web

Get the documented content types into in–browser wireframes to help demonstrate the content priorities and interaction patterns. This will allow us to test it on multiple devices and make sure our priorities hold up–do they align with the vision and principles?

This also allows the design to be informed by the content. As the design continues to progress into visual design, we make decisions based on the content–we can’t do our design work properly without understanding our content. A website is a black hole without content and so is a design system.

Document everything

As you move through each phase, take pictures of the whiteboards, keep notes, and save post–it notes. This will help you move into the next steps and help you communicate the value of what you just accomplished.

Fixing the Web

You too can find the core piece of content and move your project forward while focusing on the the important bits.

The content modeling notes will become annotations on future wireframes, your sketches will be the blueprints for the wireframes. Content authors will understand how it all fits together and project stakeholders will see rapid progress with high value.

People love this process. I’ve had an IT manager stifle a giggle while he announced to the team, “I love this process so much.”

Finding the core piece of content really is the key to every web project, big or small. It will make your projects more successful and build a better, more thoughtful web, one content type at a time.

About the Author

Steve Fisher started out as a web designer. He quickly became focused on improving the experience for everyone using the projects he worked on. Steve has used responsive design to make web projects more accessible across devices. You can follow Steve on Twitter at @hellofisher.

How to Win Stakeholders & Influence Decisions program.

Next cohort starts: August 12

Our 16-Week program guides you step-by-step in selling your toughest stakeholders on the value of UX research and design.

Win over the hardest of the hard-to-convince stakeholders in your organization. Get teams to adopt a user-centered approach. Gain traction by doing your best UX work.

Join us to influence meaningful improvements in your organization’s products and services.

Learn more about our How to Win Stakeholders & Influence Decisions program today!