The responsive content website experience: A day in the life of…

Smartphone, Tablet, Laptop and a Desktop PC in your office – today, this is far from an unusual array of gadgetry. Our daily interactions with the online world has led to a technological breeding ground for Internet enabled devices, each of which offers their own individual screen display and resolution. This diversity has just added to the age-old challenge faced by website owners; namely, how to ensure their site’s layout and content gives their users exactly what they’re searching for. This is where ‘responsive content’ comes in.

Smartphone, Tablet, Laptop and a Desktop PC in your office – today, this is far from an unusual array of gadgetry. Our daily interactions with the online world has led to a technological breeding ground for Internet enabled devices, each of which offers their own individual screen display and resolution. This diversity has just added to the age-old challenge faced by website owners; namely, how to ensure their site’s layout and content gives their users exactly what they’re searching for. This is where ‘responsive content’ comes in.

Just give the user what they’re looking for//Just give me what I want!

“To be responsive to” means to adjust, to react to certain conditions. Responsive content does just that – it’s the content which adjusts to meet the conditions it finds itself in. Responsive web design, for example, means the layout of the page will adjust to meet the screen size. That said, responsive content is so much more than simply ensuring text shows up with the line breaks in the right places. In an ideal situation, responsive content will react to the very individual requirements the users and their various different gadgets bring with them.

The volume of text, content and the display of the page should adjust, depending on the device used to access the page. This means the user always gets what he needs: whether that’s quick access to information, emotional video clips or more serious, fruitful research results. In a truly ideal situation, the website will even recognize if the user is a first-time visitor to the site or whether this is one of many regular visits before displaying the most suitable content.

Accompanying users through their online visit to your site is one sure-fire way to ensure they’ll come back – time and again.

The best content for every situation: An exemplary day

6:00 am – the radio alarm kicks in to wake Mr. Green with a report on camping holidays, perfect for the holiday season. Before switching to the commercial break, Mr. Green is informed he can find further information online.

At 7:00, sitting in the bus on the way to work, Mr. Green considers taking a camping holiday this year (despite the weather). He visits the webpage mentioned on the radio and reads their checklist with the advantages and disadvantages to camping, caravanning, holiday apartment renting and hotel vacations.

The user arrives at this webpage for the first time via his smartphone.  Given that he’s never before visited the page, it makes sense to direct him to specific content only then, when he’s requested it per Google. Given that he’s accessing the page via his phone, he may not have the quickest or most stable Internet connection. He’ll also be viewing the page on a smaller screen and operating the device via touchscreen:

The webpage ought to be like this:

• Small volume of data, avoiding large images and graphics
• Short, concise text passages; prefer lists over lengthy prose
• Streamline headlines and keep introductions precise, or delete them completely and open with the solution to the problem.
• Use larger font sizes for ease of reading
• If absolutely necessary, use large buttons and navigations elements, avoid links in the text
• Avoid forms which require text entry
• Go for a minimalist design, with low data requirements

By the time he arrives at work, Mr. Green has decided that a camping trip would, in fact, be his dream holiday this year. During his lunch break, he uses his work PC to access the Campsite Comparison Page on the Radio channel’s site. Here, Mr. Green gets suggestions for what could potentially be his ideal campsite destination. Based on his entries, he gets suggestions for locations: whether the UK or abroad, the star rating he’s looking for, mountain or coastal sites etc. Mr. Green can, then, decide on the perfect location.

It’s been a long time since Mr. Green’s last camping adventure, and he knows his old tent and camping paraphernalia wouldn’t survive another trip. The camping website also offers advice and information on everything to do with camping. It’s by reading these articles and checking out the videos that he knows what to look for when purchasing new equipment.

The user accesses the site via desktop PC. He’ll have a mouse and keyboard, as well as a stable and quick Internet connection:

The content ought to look like this:

• The site can branch into multimedia: large graphics, videos, links, a sophisticated design etc – none of this will be problematic.
• The lines are broader, articles can be lenghtier and more detailed. An article can also be adorned with various helpful graphics.
• There’s space for an introduction and (lenghtier) headlines, with subheaders too.
• The comparison engine might ask about individual requirements, which the user can enter using their keyboard, sliders on the site, dropdown menus etc. The navigation here can be more detailed than is possible on smaller displays.

On his way home, at 6pm, Mr. Green takes a detour and makes his way to the camping outlet shop. Whilst he’s satisfied with the advice the personnel in the shop have given him, he’d like to get a more objective, neutral opinion on the advantages and disadvantages of the products he’ll need. Using his smartphone again, Mr. Green goes to the webpage suggested by the radio again. It’s here he finds a clear overview with a checklist of the Must-Haves, outlining the most important features he needs in his tent, sleeping bag, camping stove etc.

The user accesses the webpage again using his smartphone. He searches specifically for information on the product he’s entered – and he needs it presented clearly and quickly. When he access the page, it can be useful here to highlight any content which he hasn’t yet seen.

The website ought to look like this:

• Short articles with the most important Pros and Cons of a product, where possible in bullet point lists.
• Consider presenting reviews from other users graphically: star ratings for individual categories or products, rather than using long prose text

8pm: Mr. Green arrives at home laden down with his new purchases. He sits down with his tablet in hand and a firm resolution to buy all the remaining items he couldn’t get in the shop. The radio’s camping webpage directs him to their affiliate partner’s online shop. By this time, the channel’s marketing has now got videos and live webcams embedded on the page, displaying the most attractive regions and campsites at Mr. Green’s ideal camping destination. Additionally, the site also displays the most important information such as the current weather report, hours of sunshine, as well as reviews. If this wasn’t enough, the site also works with a travel company, with a link to their site and App. Mr. Green can directly access the bookings page, enabling him to reserve a spot on the campsite of his dreams.

The user access the site this time using his tablet. It’s likely he has a quick and stable internet connection, and a medium sized display. The pages will be navigated using touchscreen technology.

The website ought to look like this:

• Reviews can certainly be detailed, with more prose
• Articles can be more detailed, sentences and headlines can be lengthier and subheaders will aid content structure
• The site can use multimedia elements to reach the users on an emotional level: images, graphics, (webcam-) videos
• Large font site should be used to ensure the content is easy to read on the tablet
• Clickable links should be very clearly highlighted and not too small, as they have to be accessed via finger click, rather than using a mouse.
• Any forms which are required for making a reservation need to be designed for ease of use, as they’ll be completed using hand-navigation. These forms can, however, be more detailed than for a smartphone.
• On these pages, links and buttons also have to be large enough, ensuring they’re easily clickable.

Conclusion

Today’s advances in technology inevitably mean advances in the challenges faced by website owners. It pays off to get acquainted with responsive content. If you’re able to ensure your site’s visitors always access the exact content they need, then you’re effectively giving them the best user experience possible. If your site adjusts and responds to each device’s display requirements, then your readers and visitors…

1. get the ultimate personal shopping experience, whether they’re just looking for information, products or entertainment.
2. will inevitably be convinced not only of your site’s quality, but also…
3. through the multi channel marketing, they’ll become long-term, loyal customers.