Content Strategy and Responsive Design

This type of thinking/methodology is going to be realllly important in order for Target to have real multichannel success...

Go to article

by Sean Tubridy on January 19th, 2012

Maybe you’ve heard the term “responsive design.” Maybe you haven’t. Many people think it solely refers to the technical aspects of design, but that’s not exactly the case.

Responsive design can have a major impact on your content. I’ll tell you how it works, how it can affect your content, and why you should—and need to—care.

What is responsive design?

Responsive design is the practice of having one website that adapts to the device it is being viewed upon. Or, more simply: one website for all screens.

So, why is it important? If you’ve ever been involved in the process of creating separate sites for desktop, mobile, tablet, iPhone, iPad, etc., you know why. It can be a nightmare to develop and keep up multiple websites that are essentially delivering the same content. If you only have to design and code for one site, things suddenly become a lot simpler.

Below is the Confab 2012 site I designed and developed as seen on a laptop, an iPad, and an iPhone. Notice that while the design and layout look different on each device, the URL and the content are the same.

How could it impact your content?

Right now, designers and developers are driving the conversations about responsive design. And those conversations are primarily about technical and esthetic matters. But, not surprisingly, it pertains to content, too. That’s the part I’d like to talk about.

The point of using a responsive approach is to allow the same content to work across multiple devices. This can make your job easier, because you don’t have to update content in multiple places.
So, what can happen to a site’s content as we go from a large desktop to a small device? Three things typically occur:

1. It shifts: This the most obvious change in content when we look at a responsive layout. As the screen gets smaller, columns become narrower, allowing text to become larger and more readable. Sidebars and other secondary content blocks move from the side to below the main column(s). Rows of six images become three, and then two, and then one, etc. All of this is done so you don’t have to pinch, expand, and move around a site on a smaller device. When it’s done properly, it can make the viewing experience much more enjoyable and efficient.
2.  
3. It gets hidden: Content that would otherwise take too long to skim by scrolling or just doesn’t fit well in the layout might get hidden. It's then revealed when a user performs an action like clicking a button or toggling a drop-down.
4.  
5. It gets removed: Uh oh! Did an alarm just go off in your head? It should have, because this is the part of responsive design that no one likes to talk about. Even though the general consensus is that removing content is generally a no-no, it’s totally possible and oh-so-tempting in the name of esthetics, reduced scrolling, lowered page load time, etc.

Why should a content strategist care?

As I was developing the Confab 2012 site and creating different layouts for different screen sizes, I found that I needed to make a lot of decisions about what should happen to the content across different screen sizes. Should this piece of content shift? Become hidden? Disappear altogether? What’s more important—this piece or that piece? Should this go above or below that? It became clear very quickly that I shouldn’t be the only one making these decisions.

Don’t leave these decisions solely up to designers and developers. Chances are, we’re too concerned about things like browser compatibility and page-load time to give much thought to them. I happen to be a designer who believes that people visit websites for the content, not the design—but that doesn’t mean I want to be making decisions about content priority myself.

Responsive design. Mobile first. Progressive enhancement. These, and any other technical approaches where your content can take different forms across channels and platforms, present a challenge to content strategists. The content you create needs to be flexible.

To achieve this, you may need to enhance and adapt some of your traditional deliverables, or set them aside in favor of conversations and collaborations, which is always a good thing.

The Web will continue to evolve, and the more content strategists and designers can work together to adapt to these changes, the better off our content—and users—will be.

p.s. Yes, we know our site isn’t responsive. But we’re working on it. Just you wait!

Responsive design is a term and a technique coined by Ethan Marcotte in his groundbreaking article in A List Apart, “Responsive Web Design.” If you are interested in learning the technology behind it, there are many more articles to explore.