Responsive Content Revisited
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
- Responsive Web Design: The title says everything. Short, sweet, and ridiculously good.
- Responsive AJAX: Jeremy Keith (@adactio) is a genius. He was some nice code examples on dymanically loading content.
- Hardboiled Web Design: Andy Clarke is also brilliant. His book isn't about responsive content. It's about design. Hardboiled design. But reading it gives insight into creating the best experience for each user. That's what progressive enhancement, responsive design, and responsive content is all about.
- Responsive Content Slides: slides from the SXSW presentation.
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:
- The pullquote is shifted inward on smaller laptop monitors.
- The multi columns from the desktop collapse into one content column on some tablets.
- The pullquote is pruned from narrow or portrait tablets. Remember, the pullquote is repeated in the article, so it is a good candidate for pruning.
- On narrow browsers, like smartphones, the article and photos are split under two separate tabs.
- On full browsers, extra images are loaded in via AJAX immediately on DOM ready.
- With the tabbed view, images are not loaded until the 'photos' tab is clicked on.
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:
- Make sure that users have access to all the content from any device.
- 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.