Content Considerations for Responsive Websites

There’s been a great deal of discussion here at Geonetric and in the cyber scene lately about the advantages of taking the responsive website approach versus having a stand-alone mobile site. We’ve talked about how the Age of Mobile Has Arrived, informed you that Everything You Know About Mobile is Wrong, and cautioned you about Approaching Responsive Design Responsibly. We’ve hopefully convinced you that responsive provides a better user experience for your audiences, aids in search engine optimization and creates less work for you. Now that you are head over heels about responsive websites, I want to talk about responsive content. I can almost hear the collective cries: “Now wait a darn minute! If my site is responsive my content will be too, won’t it?” The answer is yes… sort of. Your content will be responsive but that doesn’t mean it will be effective.

When considering the implementation of a responsive website, it’s important to think about how your content will be affected by the shifting and sliding of the page element. As page elements resize and move to different areas of the screen based on the magic of responsive design, so moves your text and important calls-to-action. Imagine you’ve placed an important call-to-action following two paragraphs of text on a key landing page. This call-to-action is clearly visible in a typical browser window and on a tablet, but what happens on a smartphone? Because it follows two paragraphs of text that have been squeezed and stretched into a much narrower space, the call-to-action now requires much more scrolling to be viewed. That’s probably not what you intended. Your goal was to create a better mobile experience by implementing a responsive design; unfortunately the result was the opposite.

Several content blogs have raised concerns about Starbuck’s recently unveiled responsive website. Starbucks deserves kudos for what must have been a huge and complex undertaking but there are some content issues that can provide valuable lessons for the rest of us. If you look at the Starbucks website in multiple devices you’ll see that the home page flows beautifully between screens of various sizes.

Starbucks responsive design website as seen on desktop, tablet and mobile

Unfortunately, when we start to navigate deeper into their site, the responsive nature of the design starts to have some less than positive effects on user experience. If you click on the home page item regarding one of their special whole bean coffees from the island of San Cristobal from a browser on a desktop or laptop you get a well-structured page with a short description of the product, reviews from other customers, a list of quick facts and an easy to find button to place your order.

Comparison of Starbucks responsive design across desktop and tablet

On a tablet device the user experience is still intact but when you access the pages from a smartphone the experience breaks down. Because of the way the page content is structured and the functionality of the CSS, the primary call-to-action, Buy Online, disappears from view and can only be found by scrolling past the description and the several screens of customer reviews. Forcing site visitor to scroll through all this content isn’t the best structure if your primary goal is to get people to buy this coffee.

Starbucks responsive design on a smartphone

If this example has you wondering, “If Starbucks couldn’t get their responsive website right, how will my organization do it?” Don’t fret. Geonetric is here to help. The following are best practices for writing for the Web but these can also help your content flow more effectively in a responsive website.

  • Place calls-to-action high on the page and in the main content area so it is still in a highly visible location regardless of the browser size.
  • Break up important points with numbered or bulleted list and make them easy to scan.
  • Place the most important bits of content first in the body of the page.
  • Keep paragraphs simple and sentences short.
  • Avoid ‘big’ words, marketing speak and flowery prose.

You can also use the following as a sample structure for a Web page that will work well on a responsive website.

  • Use a descriptive (but not excessively long) page header.
  • Create a short introductory paragraph for the page consisting of no more than two sentences.
  • Create a bulleted list of important points, no more than one sentence per bullet
  • Limit the bulleted lists to 6 – 8 bullet points.

Following the bulleted list, a couple of short paragraphs can be included to add additional insight to the page or briefly explain bulleted concepts. In situations where in-depth explanations or expanded text descriptions are needed, consider linking to an additional page with the full-length text.

These tips don’t cover everything there is to know about making your content as responsive as your design, but they can get you started on the road to responsive content and Geonetric can help you along the way.

Plusone Twitter Facebook Email Stumbleupon Pinterest Linkedin Digg Delicious Reddit

Leave a Reply

Your email address will not be published. Required fields are marked *


9 − = seven

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>