Hans Sprecher

Responsive Content: Director's Cut

Hans Sprecher, @honzie

13.3.2012

Thanks for Coming!

I want to thank everyone who came out to hear me speak at SXSW 2012. We packed a ballroom at the Hyatt. Afterwards, some of you gave me some great feedback and made some excellent points about respnsive content.

Based on this, I think my initial article needs to be revisited. Rather than replace it, here are some new thoughts, including content and examples.

Resources

Pruning Demo »

The pruning demo shows how to prune content. Pruning means hiding the content completely from some contexts. This demo shows a fake blog homepage.

In larger contexts, the blog snippets contain a headline, a thumbnail, and an article summary. The article summary is actually the lead-in to the article itself.

When constrained, to allow for quicker scanning through more stories, the summary is pruned. This means the user only sees the headline and the thumbnail.

This clones how several blogs, including Gizmodo, act on a desktop and on a mobile device.

Note in my presentation I classify this as 'linking'. It straddles the line between pruning and linking. The pruned content (summary) is still available by clicking to the article. In fact, we'll build on this example in the next demo.

Linking Demo »

The linking demo builds on the pruning demo. In it, the mobile user experiences a portion of the summary and has a UI component that allows the user to quickly expand the summary.

This is a nice feature if the headline isn't particularly descriptive. It may also be helpful if the user gathers most of the importance of the article off of the first paragraph or where they are likely to read most article summaries during each visit.

AJAX Lazy Loading Demo »

This example loads up some above the fold content initially. Then, once the DOM is ready, the rest of the content is loaded in.

Lazy loading decreases perceived load time, since the user is able to begin interacting with the page and consuming content quicker.

Combination Demo »

Combining these three techniques on a content article is impressive. Here are the features of the combined page:

As you can see, the requirements subtly shift content from desktops to laptops to larger tablets to portrait tablets to smartphones. Now that's responsive.

Corrections

In my earlier article on responsive content, I mainly discussed pruning and linking. Since then, I have two new rules for pruning:

  1. Make sure that users have access to all the content from any device.
  2. Unless the content really isn't critical.

In the latter case, ask yourself why you need the content on any version of the site. Chances are likely removing it everywhere might be good. It's definitely a grey area—a dark grey area.

If you're interested in responsive design and responsive content, please let me know: @honzie.