Skip to content

Instantly share code, notes, and snippets.

@thomasgohard
Last active January 2, 2016 00:19
Show Gist options
  • Save thomasgohard/8223108 to your computer and use it in GitHub Desktop.
Save thomasgohard/8223108 to your computer and use it in GitHub Desktop.
Responsive Web content article for CCO.

Creating content that works on any device

The trick to creating content that works on any device is simple: Create your content for the most restrictive contexts of use first; then enhance your content based on the capabilities of the device used to read it.

This ensures not only that your content can be read on any device, but also that the reading experience is optimised for the device used to read it.

How do you do that?

Focus on your user's needs

If your user doesn't need it to accomplish their task, don't include it.

Most people struggle with fitting all their content on small screens. Less content means you need less space to display it.

Less content also means more space to display the content that really matters. By focusing on what your user needs to accomplish their task will allow you to eliminate all the fluff that fights for your user's attention and just gets in their way.

It also means less work for you: You'll have less content to edit, translate, mark up, lay out, style and maintain.

Chunk your content

Which is easier to read? 5555555555? Or 555-555-5555? Chunking is the practice of dividing your content into bite-size chunks to make it easier to read and understand.

What you want to do here is create chunks of related bits of information that should be read together as part of your user's workflow. Content chunks can be almost anything: A product image, a list of eligibility criteria, a set of data.

Chunking allows you to order, lay out and style these self-contained pieces independently. It also makes it easier to re-use content across different pages on your Web site, or even across different channels.

Present the most important information first

Present the most important information first and let the user decide if they want to read the rest.

This is often called the inverted pyramid. The idea is to provide the high-level, whole picture first, and then provide the details. This allows the reader to read only as much as they want or need but still get the core message you're trying to communicate.

A great example of this in action is a product listing, such as you'd see on Chapters' or Amazon's Web sites. The product listing doesn't show all the information for each product. It only shows enough to let you decide whether you want to see more.

Enhance the visual presentation of your content chunks

Use the capabilities of your user's device to enhance the visual presentation your content.

Different devices and browsers have different capabilities: Desktop computers have large screens; mobile devices have GPS; modern browsers support newer Web technologies such as CSS3 and SVG. Think of ways these capabilities can be used to enhance your content and how you present it to help your users accomplish their tasks more easily and more quickly.

Test your content with real users

Make sure that your content truly works for your users by getting real users to use it to accomplish their task.

Don't expect to get it right the first time. Get users to validate your content design by using it. See where they fail and iterate until you get something that works.

But don't stop there. Your user's needs will evolve over time. Your content will be updated. New technologies will make new ways to present your content possible. Keep testing and iterating to make sure that your content continues to work over time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment