Modular And Flexible Content In Responsive Design

Posted: 18 Jun 2012 05:30 AM PDT

One of the questions that comes up with responsive design is what to do with the content? Does the same content get included everywhere or does it change based on device? It’s the first and most important question we should be asking with any design, responsive being no exception.

It’s also a question that doesn’t yet have a specific answer for what’s best. What we have are opinions about what visitors want when using different devices and thoughts about how we’ll need to think about content in the future.

Should Different Devices Get Different Content?

There are plenty of people who suggest that someone visiting your site on a smartphone wants to interact with it differently than when they visit it on a widescreen browser. The assumption is that someone visiting on a phone must be on the go and most likely wants your phone number, directions to your locations, or similar.

Statistics don’t bear this out. They point to high use of mobile devices in the home. Device alone isn’t giving us the context for why someone wants to interact with your site. We can’t conclude someone is walking about town just because they’re using a phone. Many assumptions about mobile use have been shown to be myth

At the same time we know mobile devices have less screen real-estate and we can’t show the same amount of information on the screen as we do on a widescreen browser. That doesn’t mean we shouldn’t show the same information. It just means we can’t show it in the same way as we do when screen real-estate is more plentiful.

I think Brad Frost summarized things well in his recent post on content parity.

It’s alright to optimize the presentation of content as long as the content remains accessible in some way, shape or form.

We should still provide access to all our content no matter the device. What we can and should change is the presentation of the content. We might prioritize different information on different devices and we might base that prioritization on assumptions and data about what people want, but we should still provide access to everything.

Separate Content and Presentation

We know the benefit of separating presentation and structure. We place our styles in a separate css file to make site wide changes easier. We keep separate Javascript files for the same reasons. We plan for change and maintenance by making our code more modular and reusable.

Where we haven’t been so good is with our content, which we often leave tied to specific platforms. We don’t make it easy to move one block of content from here to there or make it easy to present information in different ways across devices.

Modular Content

About a year ago Cameron Koczon published orbital content on A List Apart suggesting that content isn’t so static and wants to move around from one context to another. To foster this content shifting Cameron tells us we need 2 things to liberate content.

Distillation — Strip down the content to its raw essence (article, tweet, recipe)
Association — Tie the content to a user instead of a page or site

We need to better separate content from its presentation in order to allow it to travel beyond a specific page or site. We can’t control or predict what device someone will be using when they want our content. Instead of forcing them to come to us, we’d do better to have our content find its way to them.

In a follow up to Cameron’s post, Sara Wachter-Boettcher, talks about breaking our content down into meaningful chunks. In Future-Ready Content she suggests when designing for our content we ask.

How does this element contribute to the content's purpose?
What meaning is lost if this element goes away?
What relationships exist between this element and the others?

Toward the end of the post she says:

As we break our content down, analyze its elements, and document the relationships that turn those elements into a meaningful whole, we can begin to create and manage content in a way that endures.

Brad Frost has also contributed to the idea of a future-friendly web. When talking about the need for more agnostic content he says:

Creating more fluid content requires migrating away from WYSIWYG-centric, word processor-emulating web publishing tools, and into systems that are more modular, platform-agnostic, and enriched with metadata.

Creating content that is modular and portable from device to device and context to context is the future of content on the web. It’s something we haven’t yet learned to embrace or entirely figure out how to make happen.

2 Approaches to Serving Content

Recently I watched a presentation given by Karen McGrane, on adapting ourselves to adaptive content. The presentation is in two parts and I encourage you to watch both.

Above is the first part. It’s about 11 minutes long and it looks at two companies attempting to create content for different devices in very different ways.

Conde Nast — is creating device specific content. They’re publishing PDFs for tablets and creating one layout for portrait and one for landscape. This isn’t maintainable and will only become less so with more devices of different sizes.
NPR — is using a method they call COPE (Create once, publish everywhere), that allows content to be more flexible in how it’s combined and presented. It’s a modular approach to content that makes it easier to reuse content.

One company is looking to the past and creating content for the web the way they would create content for print. The other is looking to the future and creating content as flexibly as possible so it can be reused in ways they can’t currently anticipate.

While content itself isn’t responsive, it can be stored in a way that allows it to have a more flexible and responsive presentation.

Below is part 2 of the presentation (I get the filling there’s a part in between these two not available) in which Karen talks about how to create clean and flexibly structured content. It should be created:

In multiple sizes — (short medium and long versions) Each could be the default version for different devices. Where a short version is the default, the longer version (with secondary information) could be located on secondary pages
With meaningful meta data — As we find more ways to describe the content we give it more structure. This makes the content more flexible as we better define what it is and how and where it might be used.
For reuse — We need to realize that content won’t always be presented in one way on one device. We have to expect that it will be reused across devices, some of which we can’t yet imagine and we need to create content with this in mind.

Our content needs to be separate from any form, from any specific presentation. The big challenge ahead will be in creating new content management systems that store well defined chunks of content that can be combined in different ways. We want to break free from content being stored for use on one specific platform.

We need to think first about content and then think about how to present it. We need to stop thinking about content in terms of where it will be displayed and think about the content itself. Content needs to be flexible and modular. Content needs to be consciously designed for reuse.

Summary

Layout gets the most attention with responsive design. It’s fun to resize a browser and see how the design reshapes itself at different size. We add media queries defined by screen widths for the big changes in layout. This can lead us to think that designing responsive sites is all about adapting our content to the device.

That isn’t the correct approach. We always need to place content first and design content out, not canvas in. Our focus should always be first and foremost on the information. Our designs are meant to present the content in its best light.

However, as more and more devices are created to consume our content, we need to rethink content in general. What is it? How can we best present it when we don’t know how and where it will be accessed? How can we store it flexibly to make it easier to reuse and recombine?

I don’t think we’re there yet in having figured it all out, but I think some very bright people have pointed the way, which is to create more modular content that expects to live in different places and be presented in different contexts.

Next week I want to look at an aspect of design near and dear to content. I want to consider typography and the issues and challenges of ensuring our content remains readable and legible in responsive designs.