Join James Williamson for an in-depth discussion in this video Developing a content strategy for responsive sites, part of Learning Responsive Design.
Good content strategy is critical to responsive design. How critical? Well, I feel pretty confident in saying that if your responsive design doesn't have a solid content strategy, it will fail. In fact, in almost every responsive design that I have seen criticized, the negative comments have dealt with problems surrounding content, whether the person making the comments realized that or not. So, what is content strategy, and why is it so important to responsive design? Content strategy refers to the practice of identifying, organizing, and managing a site's content.
With the rise of content management systems over the past decade or so, the discipline has received a lot of attention, with many large organizations now having a dedicated content strategist on staff. Just one look at a responsive site will tell you why having a clear content strategy is so important. On larger screens, it's really easy for the viewer to scan your content and find exactly what they are looking for. As screens begin to get smaller, content needs to shift: four columns becomes three, three becomes two, and two finally becomes one.
At a smaller screen size, users are forced to react to the content that's initially presented to them. And then they have to actively seek the content they're looking for if it's not immediately visible. Let's go back for a moment to the site that we were talking about earlier that sells jellybeans. On the product detail page, you might have the first column display an image of the jellybeans and a detailed description of the flavor. To the right of that, maybe you have a list of related flavors that users can browse. In the third column, maybe you have the purchasing information and a button to add their current jelly beans to your current order.
Well, that looks fine in the desktop, but what happens when we begin to shrink the screen size? In most cases, designers simply revert to stacking the content one on top of another in the order that they're found. That means that in this case, the purchasing option would be way down the screen on phones, and users would have to scroll through all the related jelly beans before they could buy the one they want. Now, that's a problem. But it's a content problem, not a responsive one.
So, right away, you can see how difficult the decisions regarding content become. You are faced with deciding when content shifts, which piece of content appears on top of another, and when you should hide content, and what type of mechanism to use if you want to enable users to reveal it. Above all, your goal should be to create a responsive layout that emphasizes the most important content, makes the relationships between content clear, and provides ways for accessing content in an efficient manner on smaller screens.
That's no easy task, and why it's so important to have a guiding strategy for your site's content. Now obviously, this is a little easier if you have a content strategist on your team. But that's not always possible. And chances are you might have to go this alone, or work with your client to establish rules around the site's content. Either way, regardless of the size of your team or whether you're working with a client or on your own project, there are a few things that you should nail down early on when working on responsive designs. First, make sure that you start with the content before you do any other type of planning.
Inventory the content that will appear on your pages, and begin to categorize it. Think about exactly what the content's purpose is. How does the page content relate to each other? Given the goals of the page, which content is the most important? Is this repeating content across the site or is it specific to just this page? How many different categories of content do you have, and how are they being used throughout the site? Content strategists will often design diagrams of your site's content, which can help you visualize relationships, categorize it, and establish hierarchies.
Breaking your site's content into discrete chunks like this can often lead to surprising discoveries in terms of how you build pages and group content in unexpected ways. It will also help you generate a set of rules that govern how content should be displayed and shifted as screen sizes change. You can expand on this as you begin to wireframe your pages. Start with the smallest screen size and then use the page inventory to determine which content should display first and how users are likely to want to interact with it in related content.
If you have trouble with this, imagine that you can only show one piece of content on the page. What would it be? From there, continue to add content, and visualize how users are likely to find and interact with it. Then begin to wireframe the pages at wider screen sizes. Determine how the content can expand over large screen real estate in engaging ways. Creating this content hierarchy and visualizing how it needs to change over screen sizes will make it much, much easier for you to structure your pages and write your styles.
It also means that you'll be less likely to find yourself in a situation where the page structure prevents you from reflowing content the way you need to. Keep in mind that one-size-fits-all content rules are very unlikely to work over a full site. And in many cases, the decisions you'll make regarding content are likely to be judgment calls. That's why it's important that you involve as many people as you can in categorizing and ranking content as early as you can in the process. Without a clear understanding of the types of content you have, how important it is to the site's goals, and how it relates to each other, it's impossible to create an effective responsive design.
- What is responsive design?
- Controlling viewports
- Designing for multiple screen densities
- Working with media queries
- Using fluid grids
- Building responsive forms
- Optimizing site performance
- Building responsive mockups
- Developing a content strategy
- Designing for mobile capabilities
- Creating flexible HTML
- Testing responsive designs