Responsive design: How to weave content into an adaptive framework

Apr. 08, 2014 | by Danny Chadburn

This is a condensed version of an ebook which is available to download in full on our website.

Introduction

We’ve put together this guide to help digital producers and strategists think about their content in a flexible and fluid way that will allow what they put together to adapt and flourish, regardless of the device it’s viewed on. We look at it from the point-of-view of your consumers as well as the colleagues and partners you work with day-to-day.

This isn’t a technical walkthrough (head to the appendix to see some recommended reading for the geeky stuff), rather an overview of the considerations that those in charge of content need to make when planning out what should be produced and how it should be presented.

1. Out and about

Today’s average smartphone has more processing power than the desktop computers we were buying three years ago, allowing website owners to create feature-filled portals their audience can access anywhere.

That said, it’s wrong to presume that someone accessing your website via a phone is always going to be on the move. They’re just as likely to be lounging on the sofa or sat at their desk as they are walking through the Lake District.

There’s little doubt that the balance will continue to tip in the favour of handheld devices and you may be inclined to focus on a mobile-friendly site as your primary portal, but on that day there will still be a significant number of users accessing through alternative means.

Responsive design isn’t about rewarding or punishing your visitors with added or diminished elements based on how they’ve arrived on your site. It’s about adapting what you present in a way that retains the emphasis of the messages you’re trying to get across.

Forget desktop or mobile first – think information first.

Get on the grid

The grid system concept that sits behind responsive design applies just as much to the front-end as it does to back-end development. Putting logical structure behind your content helps marry what you produce to the containers within which it will be published.

When putting together a responsive site, it would be lovely if you could leave each block to flow down the page on a smaller screen. However, what happens to the social plugins that sit alongside your title, or the call to action in the right hand column, or the comments and related articles that sit at the bottom?

When viewed on a large monitor, navigational elements often sit inside columns that provide a prominent place to display these essential elements. When the pixel width reduces, if the same flow is retained you risk losing the elements you want users to focus on.

responsive1

Regular content on a responsive grid

 

responsive2

Deconstructed content on a responsive grid

The best way to maintain the right information flow is by assigning proportional importance. By deconstructing each section of content item into chunks, you free the elements to act in an optimised and responsive fashion. You may choose to place a call to action just after your intro paragraph on a mobile, or accompany a bullet point list with a visual slideshow on a tablet, or change the design of your social buttons by device.

Anything is possible, if the structure is there to empower your ideas.

2. Online origami

As the number of web enabled devices continues to increase, the concept of ‘the fold’ is an outdated notion. Content creators once worked with designers and UX specialists to ensure that essential copy, links and buttons were arranged in a way that would allow visitors to immediately take action, without the need for the dreaded scroll.

Now, when a site reacts and adjusts according to device and screen size, the precious pixel-perfect positioning is lost.

The fold still exists, but it now appears in an inconceivable number of places. Scrolling may not even be such a bugbear for users. After all, when you’re on a flimsy 3G signal, would you prefer to have added clicks or swipe your finger to move down the screen?

Early mobile experiences were often filled with ‘next’ buttons or pagination that tried to keep content per page to a minimum and as much as possible high up on the screen. Modern responsive sites do away with this, allowing users to freely move around, with site elements arranged to provide the user with everything they need, in a way that’s simple to absorb.

3. A step in the right direction

Getting people to move around your website and persuading them to take the actions you want is a major goal for every site owner.

On a large desktop monitor you can comfortably set aside a higher percentage share of the header to let people know what’s available on the rest of your site; visitors expect to see it there and it provides a useful reference point should they get lost at any stage along their journey.

On smaller devices such as tablets and mobile, taking up half the screen with big buttons screaming ‘PRODUCTS AND SERVICES’ and ‘ABOUT US’ is going to be an instant turn-off, especially if your visitor has arrived on a page deep within your site from one of their social streams and just wants to get on with what they came there to see or do.

responsive3

So while a basic responsive site displays the content in a format that’s readable without pinching and zooming, the main purpose of visiting the page, such as to read the article, can sometimes be forgotten.

Responsive sites generally tackle this by presenting users with a button that expands to reveal the main navigation options. Granted, you may say that this is primarily a UX decision to make, deciding on the navigational elements to include based on the most likely steps the user will want to make when they get to the page, but there are some important editorial decisions to make too.

responsive4

Depending on the type of content they have arrived at and the link they’ve used to get there, are they likely to want to consume more of the same? Would they be likely to subscribe to a newsletter or feed? Is it something that might instigate some form of social interaction? Is this a common first step that often leads a visitor into the purchasing funnel?

The message is different in each case, and therefore the actions need to adapt to trigger the desired activity from your user, whether that’s a click, subscription, share or purchase.

4. Beyond site boundaries

The internet is a big colony; a connected community that has blurred international boundaries and made the world a smaller place. The presumption that you can get people to stay within the confines of your website is a misguided one.

Third-party partnerships and mutually beneficial relationships with other organisations allow you to expand your reach and satisfy more of your users’ needs without the need for humungous budgets.

Syndicating in relevant content that satisfies your users’ goals and meets your business objectives helps you to keep your audience close. With a responsive website this should make for a seamless integration, as long as your suppliers are thinking responsively too.

It would be a shame to see your beautifully configured website ruined because affiliate content doesn’t know how to behave beyond the desktop monitor.

Power to your peers

Some things are often better left said by someone else with more knowledge, so you may often find yourself linking out elsewhere on the web.

Directing users to badly optimised content reflects badly on you. Even if you have disclaimers covering your back, in a connected web, user experience is only as good as the next link you click on.

Don’t assume that the user journey stops as your website ends. If you’ve put a link within your page, you’re making the assumption that a certain percentage of people will click on it (if you’re not, why are you linking it in the first place?), so always test the pages you send people to on various devices. If you come across anything that might be seen as a barrier – an unresponsive layout, a splash page asking you to download an app or a dreaded paywall – consider whether you should be linking to it at all.

responsive5

 

This doesn’t necessarily need to halt you in your tracks; services such as Instapaper, Pocket and Readability take the clutter away, leaving users with a comfortable reading experience. A clever use of their APIs can allow you to direct people towards pages of interest elsewhere on the web, without submitting them to the horrors of an ugly or poorly constructed website.

Provide users with a good external experience in a new tab or window, and they’ll return to yours with a newfound respect.

Make things beautiful

Big, high-res imagery is seen as a standard design feature on the modern web, allowing visitors to see the product they’re about to buy, the meal they’re about to cook or the place they’re about to visit.

Photos scaled to 100% may look stunning on a large widescreen monitor, but what about when the dimensions are reduced? If you have an image that contains essential information that will aid your visitor (such as a flow chart or process diagram), it needs to be treated with as much importance as the rest of the content.

For example, on a responsive site you may want an image with an aspect ratio of 5:3 to revert to 8:2 on a smaller screen so it doesn’t push copy too far down the screen. This doesn’t mean your users will be presented with an elongated version. Defined cropping can take place to retain the original dimensions whilst slotting seamlessly into the new placeholder.

responsive6

Original 5:3 image

responsive7

Cropped well to 8:2

responsive8

Cropped badly to 8:2

Producers need to work closely with the design and development team to decide exactly how this should occur so imagery retains its appearance and purpose. To save yourself from copious amounts of code, you should ideally make a style decision that can be replicated across all your images, such as always having the main element of focus in the lower third.

Sensible scaling is even more important when it comes to technical diagrams and infographics, which have spread like wildfire across the web in recent years. The data that sits within these is often difficult to make out on large screens, let alone when they appear just a few inches wide.

Pinching and zooming is always an option that you can offer to users, but why make it unnecessarily difficult for them to absorb your content?

Captain caption

Even though pictures speak a thousand words, a short piece of associated text can go a long way to helping users understand context. You’ll often see text overlaying photos on the web, ideally not text within the image itself but text that’s readable by a search engine spider. When transported to a smaller screen, if your font retains some of its size and readability you may find your background image obscured completely.

responsive9

Annotation over original image

Worse still, if you’ve placed white text over some blue sky, what happens when it moves and overlaps another element of the image that isn’t a contrasting colour.

responsive10

Annotation on a smaller screen

Content producers shouldn’t be in the business of dictating to designers how best to present information; however we need to be able to get across the importance of each individual element.

It may be the case that the text stands up for itself without the need for the image, however if your picture is the primary focus, consider switching text to a neutral colour, or even better, move the copy to a caption below the image so it can take pride of place without getting in the way of the image or being obscured.

responsive11

Annotation as a caption

5. Show And Tell

Knowing how text moves from device to device is also important when determining your writing style. On a fixed structure you’re free to reference ‘the image below’ or encourage your visitors to ‘click on the pink albatross to the right’. When your site rearranges itself, chances are your bird will have flown elsewhere.

Again, deconstruction is crucial. The code behind this enlists media queries to adapt what is shown and how it’s displayed to each individual user.

There’s also the option to apply a gradient filter to all imagery so it acts as a suitable, subtle background which can house any style of text.

6. Making More of Media

Each content type means a new responsive requirement and consideration – you can’t treat them all the same way and expect them to react in the most appropriate fashion. The aim is to ensure they retain relevance and relationships within an adaptive structure.

Whether you choose to host your videos through YouTube, Vimeo, or on your own servers with a branded skin and playback control, make sure these are considered within your responsive design. The full screen option is a particularly important component here, increasingly so as display devices get smaller.

The use of native web apps can provide some major benefits here. For users with YouTube installed on their device, clicking a video within a web page can prompt them to revert to an optimised playback tool. There are a few pros and cons with this.

  • On the plus side, these apps are constantly being tweaked and updated to ensure they comply with the latest web standards on a plethora of operating systems. You also get access to the in-built social interaction tools which increase the number of people who will comment on and share your content, helping it to spread far and wide.
  • However, you need to be aware that YouTube is an addictive beast. View one video and you’re shown a menu of others that may tickle your fancy; your users could lose themselves in LOLs and fails, forgetting what they were doing on your site in the first place. Whilst YouTube’s servers are likely to be a lot more robust than your own, you also need to be aware that reliability is out of your hands when the connection drops.

If you do decide that making use of proprietary apps is the right option, you can gain access to functionality far beyond the scope of your core site and servers.

If you have audio on your site, SoundCloud and Spotify provide excellent embedding functionality that allows visitors to comment, download, add tracks to personal playlists or subscribe to updates.

7. Cash converting

Filling in forms and completing shopping carts can be an arduous task on a small screen device, and again there’s an adaptive response that can be applied. Do you really need users to fill in all those fields? Really?

Could you provide Google Wallet as a swift payment option for people accessing via Android? Do what you can to make the process more streamlined and therefore increase purchases. If you don’t need a field on a mobile, you won’t need it in the desktop view either.

8. Get yourself connected

There’s no denying that getting your users to share your message with their peers helps to get it in front of a wider audience. What many websites fail to recognise is the ‘share situation’ their users are likely to be in when they reach their website.

Whatever device your user is on, aim to already understand what they know using readily available social plugins. If you’re aware of the purpose and audience for each piece of content, you can segment and create more tailored templates that go beyond Facebook and Twitter, considering whether Songkick, Meetup or Foodie buttons might encourage a more meaningful interaction.

To read or download the full ebook including more detail and top takeaways click here.

Be Sociable, Share!

    Comment (1)

    • Responsive design: How to weave content into an adaptive framework | Social Media / SEO / Mobile / Digital Marketing News

      […] See on connect.icrossing.co.uk […]Apr 9, 2014 06:47 pm

     
    Please note: the opinions expressed in this post represent the views of the individual, not necessarily those of iCrossing.

    Post a comment