Our Blog

Content Strategy and Responsive Design

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.

Responsive Confab 2012 site on multiple devices

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. 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.
  3. 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.

  • http://twitter.com/brandonwebber brandon webber

    I think the fourth thing that happens when content moves from a desktop to mobile device is that priority can change.

    Items that might not be high priority on the desktop might be higher in priority once on the mobile device (eg. the user is on foot and walking) and I think good responsive design pays attention to that.

  • http://shinytoyrobots.com/ Robin Cannon

    Implementing responsive design provides a great opportunity to really evaluate what’s important within your content, both in terms of prioritizing and also in terms of deciding what can be removed. Doing that can not only improve the experience on smaller devices, but also make the website simpler and more focused in general.

  • http://twitter.com/tubes Sean Tubridy

    Brandon – you make a good point. Predicting context is something that’s a hot topic these days. You can certainly add/subtract/enhance content if people are on a mobile device.

    But the question is: what is a mobile device? I use my phone on the couch more than my laptop these days. And I’m far from mobile when I’m on my couch! There’s data that points to the fact that it’s harder and harder to guess user intent based on device.

    It can be very risky to assume your user’s context without a ton of research on your users. But in a case where you can, a separate mobile site might be a better option.

  • Anonymous

    Kind of…i think really good responsive design aims to give the best experience possible in any context. 

    However its easy to make the mistake of assuming, for example, that a user on a small screen is walking or standing in a queue etc, they could also be sitting on the couch at home or at their desks at work. 

    So its important that designers/developers remember that the user is visting the site for the content, and responsive designs’ purpose is to make sure they can get it from any device.

  • http://oswco.com dartdog

    The dilemma is real but I think the solution somewhat simplified if one takes a mobile first approach, That forces good decisions on importance from the start.

  • Christiaan W. Lustig

    Great article, Sean, thanks. I’d like to add a notion to the list of 3 or 4 things that we could do with (to?) content in a responsive design:
    1. shift
    2. hide
    3. remove
    4. change priority
    And 5: chance the content altogether to fit the mobile/tablet/desktop user’s needs.

    Any thoughts on this?

  • Christiaan W. Lustig

    Great article, Sean, thanks. I’d like to add a notion to the list of 3 or 4 things that we could do with (to?) content in a responsive design:
    1. shift
    2. hide
    3. remove
    4. change priority
    And 5: chance the content altogether to fit the mobile/tablet/desktop user’s needs.

    Any thoughts on this?

  • Bart Byl

    Yes! To quote David Leggett, “The most reasonable case for omitting objects from a mobile site is when the object wasn’t essential to the desktop site in the first place.”


    Preventing a user from seeing a piece of content because they are using the “wrong” device just seems like a bad idea.

  • http://twitter.com/tubes Sean Tubridy

    Haromaster and Bart – I completely agree. If the concern is about bandwidth or viewing experience, I can understand the temptation to remove something for a “mobile” device. But there are ways around this. We already have solutions to serve different sized images to different devices, for example.

    Yes, there is some content in certain formats that won’t run on every device (ahem, Flash), so that means having to figure out how to deal with that if you want to use those formats and a responsive approach.

  • http://twitter.com/tubes Sean Tubridy

    Christian – You’re right. Deciding priority is a huge part of responsive design. I guess I think of changing priority as part of the decision making process when content has to shift or become hidden.

    You might prioritize sections of your wireframes by number, and then use that prioritization as a guide on how to change the layout across screen sizes.For example, let’s say your site has a main column of content for a product and a sidebar that contains your “buy it now” button. The standard behavior that most designers seem to take is to move the sidebar below the main column for a mobile view. Well, that would be bad in this case because the user would have to scroll a huge, narrow column of product info before even seeing how to buy it. In this case, you might want to show a button before or somewhere close to the top of the single column.

    Regarding #5, I think having completely different content is fine as long as you know your users and how they use different devices, in which case a separate mobile site might be easier to handle, from a technical point of view.

  • http://twitter.com/tubes Sean Tubridy

    I couldn’t agree more.

    Also, your robot icon is awesome.

  • http://shinytoyrobots.com/ Robin Cannon

    Heh, thank you! First time I’ve really put anything I’ve drawn myself online. Kinda fun.

  • http://twitter.com/brandonwebber brandon webber

    Yes, I think this was more my point. It is more complex than just making some assumptions about the actual device or location where the screen is seen.

    The what interests me is idea that responsive content and/or design doesn’t just have to be about what screen size content is being viewed on.

  • http://twitter.com/brandonwebber brandon webber

    Yes, I think this was more my point. It is more complex than just making some assumptions about the actual device or location where the screen is seen.

    The what interests me is idea that responsive content and/or design doesn’t just have to be about what screen size content is being viewed on.

  • http://aaron-gustafson.com Aaron Gustafson

    Content is definitely a tricky thing to manage when it comes to crafting adaptive experiences, but it’s all about prioritization. Blogs are easy—I wrote about flipping the Easy Designs blog on its head a few months back (http://blog.easy-designs.net/archives/2011/10/12/from-mobile-friendly-to-mobile-first/)—content-rich sites are a bit more complicated.

    Over the years, I’ve become a big believer in a mobile first approach where you begin with the critical content needed to understand and complete necessary tasks and then build up from there. That approach fits in neatly with progressive enhancement and also gets you huge accessibility wins right out of the gate.

  • http://prosekiln.com/ Melanie S.

    Great article. I’m curious, is user testing a part of your process? 

  • http://grantmartin.tumblr.com/ Grant Martin

    I think the tendency is to leave most of these decisions to designers and developers, but it’s great to see a strong case made for the inclusion of content strategy. Sending this article to my team today–thanks!

  • http://twitter.com/ambiguousmoose Aubrey Morrell

    Surely context matters? Type of company and their specific offer. I could name a few companies where I would safely assume that a users priority would be to find a contact number or opening hours via the mobile rather than scan and download their latest white paper. In essence I firmly believe that user needs and goals can be different depending on the context.

  • http://www.creativenature.com.au/ Web Designers Perth

    There are lot’s of way to promote our website. A unique content strategy is useful part to create a more traffic in our website. It’s also beneficial to improve our page rank.

  • http://www.msalogodesign.com/ Corporate Logo Design

    Really nice and great post you have shared on this blog with us ! thank you for sharing with us. Keep sharing please!

  • Albert Mensinga

    Fantastic article, very helpfull: this gave me additional insight on webdesign. The ‘keep it simple stupid’ rule applies as well, of course. Thanks!

  • http://www.carvermediagroup.com/services/website-development/e-commerce-solutions.html Ecommerce Web Design

    If design is centered on content, structure can be built around developing and maintaining content that is relevant to the user. A great first step is a content audit. Most of us can’t completely answer the question: what content do you currently have on your site? If you get a handle on the content, you’ll have a better handle on designing the project and setting the project’s timeline to let that content shine, whether it’s on the mobile, tablet, or desktop.

  • http://webservicesplus.com.au/website-design/ website design Australia

    Now a days, each and every website must be designed in responsive manner for having a great display in any kind of device like mobile, tab, laptops etc. It can have a great impact on content. You have shared a very useful article.

blog comments powered by Disqus