A Day in the Life of Responsive Website Content
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 its 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 and to react to certain conditions. Responsive content does just that – it’s the content that 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 that 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
At 6 a.m., the radio alarm kicks in to wake Mr. Green with a report on camping vacations, perfect for the holiday season. Before switching to the commercial break, Mr. Green is informed he can find further information online.
At 7 a.m., sitting on the bus on the way to work, Mr. Green considers taking a camping vacation this year. He visits the Web page mentioned on the radio and reads its checklist of the advantages and disadvantages of camping, apartment rentals and hotel vacations.
The user arrives at this Web page 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 after 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 Web page ought to be like this:
* Use a small volume of data, avoiding large images and graphics.
* Use short, concise text passages and lists instead of 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 navigation elements and avoid links in the text.
* Avoid forms that 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 vacation 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 such as by the beach or in the mountains and ones that are secluded or near attractions. 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 and a sophisticated design will not be problematic.
* The lines are broader and articles can be lengthier and more detailed. An article can also be adorned with various helpful graphics.
* There’s space for an introduction and lengthier headlines with subheaders too.
* The comparison engine might ask about individual requirements, which the user can enter using their keyboard, sliders on the site or a dropdown menu. The navigation here can be more detailed than is possible on smaller displays.
On his way home, at 6 p.m., Mr. Green takes a detour and makes his way to the camping outlet shop. While 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 returns to the Web page suggested by the radio. 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 and camping stove.
The user accesses the Web page 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 accesses the page, it can be useful here to highlight any content that he hasn’t yet seen.
The website ought to look like this:
* Short articles will detail the most important pros and cons of a product, in bullet point lists where possible.
* Consider presenting reviews from other users graphically: star ratings for individual categories or products rather than long prose text.
At 8 p.m., 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 Web page 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 and visitor reviews. If this wasn’t enough, the site also works with a travel company, providing a link to their site and app. Mr. Green can directly access the bookings page, enabling him to reserve a spot at the campsite of his dreams.
The user accesses 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 like images, graphics and videos to reach the users on an emotional level.
* A large font size 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 by a mouse.
* Any forms that 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 those for a smartphone.
* On these pages, links and buttons also have to be large enough to ensure they’re easily clickable.
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 of your site’s quality, and…
3. Through the multichannel marketing, they’ll become long-term, loyal customers.