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.

Continue reading