Content Considerations for a Responsive Web Design

When you embark on a responsive web design project, you’ll be spending a lot of time looking at how designs resolve from one browser experience to another, and wireframing layouts across devices. But you should also devote a hefty amount of time to examining and planning your content.

Last year, in a post on A List Apart, “Content Strategy for Mobile” author Karen McGrane wrote about how so many clients she works with don’t place a high priority on content during a responsive web design project:

"Even companies that want to take a “mobile first” approach can’t just throw off the shackles of their desktop content. For some, suggesting the organization “start fresh” with new content would be organizational suicide, touching the political third rail of stakeholders and competing interests. Others acknowledge it’s time for a new approach, but need processes that will enable them to clean up and restructure existing content to make it appropriate for a responsive design."

“Responsive design won’t fix their content problem,” McGrane adds. “But content strategy will.” In her estimation, that means taking the following steps:

• Revising content

• Wrangling legacy systems

• Designing your editorial workflow (before anything else)

• Prioritizing page editing and restructuring

• Planning for long-term governance

This is not small potatoes. This is meaty stuff. As is usually the case with content strategy, revisiting our content for a responsive web design can mean revisiting the way our organization is structured to communicate — business objectives, key messages, content workflows, content processes and guidelines, roles and responsibilities, how content and technology teams work together, and so on. Phew.

Responsive web design is not about creating a slick new container in which to shove the same ol’ sludgy content. It’s about making all aspects of the web experience succeed across all contexts, with the ultimate goal of communicating meaning and inspiring action.

Our Content To-Do List

So, to begin heeding McGrane’s recommendations, what do we need to do? Here are some ideas to get us started thinking about our content and laying the groundwork for a successful responsive web design:

• Preach the gospel. As with any content-intensive project, it’s important to build buy-in among the people in your organization who will be responsible for creating, informing, approving, managing, or other participating in the content publishing process. Educate them about the value of content and the best practices around maintaining it, start thinking about roles and responsibilities, and loop them in to the outcomes on the other end through reporting and measurement.

• Buddy-up with your designers and developers. Implementing a responsive web design is a team effort. From the start, work alongside your designers and developers to conceive and implement the decisions that will make your site successful.

• Focus on creating concise content. Not only will crisp content create a better reading experience on mobile, but writing concisely forces you to write better. By stripping away bloated verbiage, your key information and messaging comes across more clearly and more actionable.

• Prioritize useful, usable content. Reduce content volume by removing inessential, extraneous information to make for a less bloated, more easily browsable web experience.

• Format content for the web. By using web writing best practices in how we structure content (headers, subheads, short sentences and paragraphs, bulleted lists), you will reinforce the readability and scannability of your content.

• Think about your communications priorities. Implementing a responsive web design is not just about code. It’s about content hierarchy. As a page reflows and restructures itself across devices, how are we prioritizing different content elements? What customer journey are we seeking to reinforce. Sara Wachter-Boettcher, author of Content Everywhere, writes about how Trent Walton’s concept of content choreography informs how we think about this process.

• Structure your content (chunks, not blobs). Turns out your responsive web design decisions significantly influence how you use your content management system, because to achieve some of what Wachter-Boettcher gets at, we need to think through how we are structuring our content. Gone are the days of a giant WYSIWYG playground — the blob, as McGrane would call it. We need to start thinking in chunks, not blobs. This means parsing out teases, ledes, and other content elements to allow for more flexibility in content decision-making and communication. Relatedly…

• Mind your metadata. A 2013 study by Telmetrics and xAd found that 50% of respondents use their mobile devices to start the product search process, and 46% use mobile exclusively when performing research online. Paying close attention to titles, meta descriptions, and other SEO factors will help us account for the mobile user’s reliance on search. And upon discovery, the responsive site we have so lovingly planned will meet their every content need and expectation.

• Think about performance. Plan multimedia features (video, imagery, audio, etc.) to account for page load time and user experience on mobile, as well as creating multiple versions if necessary to display at different resolutions.

Oh, But We Have This M-Dot Site...

Here’s an idea: Why not create a separate mobile website that only includes select content that we believe our mobile users will be looking for? Sounds great, right? We can put mobile in a box over here, then plan our big, splashy desktop site over here.

Except…. no. Because we can't and shouldn't make decisions for our users. They may check the bus schedules one day and browse program requirements the next. Thus, we need to strive to have one website that succeeds in every way for every user on any device, which also relieves us of the burden of maintaining multiple web presences, which creates added work as well as opens up the possibility for conflicting and outdated information. Depending on the site functionality, this may not always be possible. But it is an outcome we should strive for.

Putting the ‘Fun’ Back in ‘Fundamental’

If you look back at those guidelines, you may notice that most of them don’t have anything to do with media queries, fluid grids, or any of the other terminology you may be used to hearing when you read about responsive web design. And that’s the dirty secret of responsive web design.

As my friend Dave Olsen at West Virginia University pointed out to me once, the fervor about mobile and responsive web design is really just a great opportunity to redirect focus on the fundamentals of online communication and content creation. Be concise. Be clear. Reinforce your priorities. Consider your user. Breathe in, breathe out. If we do these things, our content, and our website project, will stand a pretty great chance of success.