Responsive Design’s Impact on Your Content

Last time I looked at a few example of how designing responsively affects some areas of the project process. I wanted to expand on that and actually develop these thoughts into a series that will hopefully cover those parts of the process more in -depth along with some others.

Dave Ruse
#Design | Posted

Last time

I looked at a few example of how designing responsively affects some areas of the project process. I wanted to expand on that and actually develop these thoughts into a series that will hopefully cover those parts of the process more in
-depth along with some others.

I think content is a good place to start as it’s a) usually an early part of the process and b) one that will make a substantial impact on your project. We're basically building on what has come to be known as "content strategy", so if you aren't familiar with it here are some good resources:

Okay, so we’ve chosen to incorporate responsive design on our next project. How does that affect content?

Analyze

Get ready to make some tough decisions. It’s likely that a lot of content you want on your homepage just isn’t valuable enough to be there.

Don’t just start building out your full site and then remove random pieces of content because they don’t fit into the “flow” of a smaller resolution breakpoint layout. Make you content meaningful to your audience.

Look at your existing content and determine what pieces aren’t valuable enough for those who are browsing at different resolutions. Hint: It’s possible that they aren’t needed at any screen size.

Content also includes photos, audio, and videos. These need to be considered due to the ramifications and constraints that responsive design brings. Using a dozen hi-res photos on your page may not be too effective for those loading your site at 3G speeds.

The important thing to remember here is that responsive design isn’t about shrinking large photos down to a smaller size, shifting columns on top of each other, or removing random page elements. You need to respond to the ways your users are visiting your site and create your content around those contexts, not forcing your content into those molds.

Organize

Ok, so we’ve taken stock of all the content we have and what we need to create before we can build the site. Now we need to organize it so everyone knows what content appears on which page (like in normal content strategy), but also what content appears at what breakpoints.

One common way to do this is by setting up a spreadsheet that lists out items for each page and who’s responsible for producing them. Adaptive Path has a great post on how to do this.

This helps everyone across the project know what’s supposed to appear where and when, so there isn’t any confusion down the line.

Thinking responsively, another layer to that content document could show what content is to appear on different breakpoints. This lets everyone see, at any time, at any stage, what content displays when.

Strategize

Now that we’ve organized our content we need a plan for going live and also to make sure our site doesn’t break when adding or editing content down the road. This can be pretty tricky, especially if the client is taking over control of maintaining the site post-launch.

I think it’s essential that we provide clients with the right tools and some guidance as well on how to do this instead of handing off a site and hope they can keep things together.

I’d recommend drafting up a document for them to refer to when adding or changing content to the site and possibly wrap it into the content inventory we created in the “organize” phase. Some possible areas to provide direction on could include:

  • When adding a piece of content to a site, what factors should affect which breakpoints it appears on?
  • How to format videos so that they’ll respond and be playable across the wide variety of platforms
  • What types of images to use so that when they’re adjusting for different layouts they don’t lose their impact

Conclusion

Other than publishing (we'll hit that in a later post), we've covered all of the main areas of "content strategy". Designing responsively adds a bit to each of those steps, but by planning ahead now we'll save a lot of headache as projects progress. Have any additional tips? Let us know in the comments!

Dave Ruse