So You’ve Got a Responsive Website – Now What?

responsive websiteWhether you’re the designer or business owner of a newly responsive website, there’s something incredibly satisfying about resizing that browser window. You watch the page resize itself, adjust and transform to fit any resolution you can throw at it – and the content perfectly reshapes for users of every device.

Great stuff. That’s your online brand (or your client’s) fully optimised for a web accessed by devices of all sizes, right? Well, no, sadly you’re not even close. A few media queries and content reshuffles hardly count as mobile optimisation, let alone the plethora of other devices on the market.

A responsive website is only the beginning – one small part of a much bigger picture – and you still have a long way to go before you have a marketable website for today’s web (and tomorrow’s).


Take another look at your content

It’s great that your navigation and other page elements reshuffle to fit displays of all different sizes, but what about the actual content on any given page? This is what users come to your website for, after all, so it’s not something to gloss over.

Take another look at your pages on mobile, at things like the posts on your blog page, and ask yourself if that 1,000-word article is readable on mobile. It’s not really, is it? And this is the problem we currently face with responsive design – layouts are no problem, but what about the content?

Users expect to scroll these days – smartphones did that by themselves – but they don’t expect to read an essay on a five-inch screen. Mobile attentions spans are short and it doesn’t take many words to fill up one of those little screens. Attention lost means traffic long gone, along with whichever conversion you or your clients were trying to seal. Clearly, another approach is needed. An approach that moves beyond responsive design and focuses on content for multiple devices.


Multi-device content strategies

You don’t have to sit back and let your content spiral out of control for mobile users or any other device. Some simple CSS and JavaScript allows you to hide and show chunks of content. You’ll hear a lot of people talk about this being an SEO no-no, but that only applies if you’re trying to stuff keywords or other junk into hidden content.

The display:none CSS style is a perfectly legitimate way to trim content for smaller screen sizes. What you can do from here is create a button to reveal more, making better use of screen retail space. This is only one example, naturally, but the point is we need to consider how we deliver content for different users.

Aside from exploring new ways to code up your content for different device types, you’ll want to go back to the drawing board and rethink your approach to content strategies. The key thing here is to create a varied stream of content that caters to every device and create a purchase journey between them. Think what kind of content works best for mobile, desktop, larger displays and even wearables. Create a varied content stream that meets all of these demands, but don’t stop there – link between these pieces of content with a clear marketing message that encourages users through the buying process.

Mobile users aren’t only looking for different forms of content to other device users, they also have different intentions. You’ll need to tap into this intent – not just the device type – to create effective content that encourages them through the buying process and closer to the conversions that count most.


Responsive media

Responsive media is no small challenge in the modern web and there’s still plenty of work to be done. Smaller devices typically come with weaker processing power and internet connections, but often HD displays. In fact, HD screens are becoming the norm, which creates an entirely new problem for maintaining stunning, but fast visuals.

Your typical smartphone packs an HD screen, as do most tablets, the latest MacBooks and ultraportable laptops. Then we have 50-inch plus TV screen with Ultra HD, hooked up to gaming consoles that come with internet browsing. Yikes!

So it’s not only image size we need to worry about, it’s visual quality – especially for premium brands, where every pixel counts. This is the future of our responsive media woes, but we haven’t even cracked the current issue of responsive images – or have we?

The img tag has undergone a subtle transition over the last couple of years, but the addition of the srcset attribute has finally given responsive images a viable solution – and you can find out more about it from this fantastic article over at


A/B testing for multiple devices

If you’re in this game to make a profit (for you or your clients) then you’ll know conversion rate optimisation (CRO) is fundamental to maximising the performance of a website. You can’t simply run tests for all your traffic and expect to make effective changes of the back of those results, though.

Different device types come with different user expectations, needs and intentions – each of which your diverse user experience needs to address. Which is why you’ll need to segment your traffic for A/B or multivariative testing to get data you can trust and make changes to meet their needs.

This isn’t necessarily a question of mobile vs desktop either. Tablet conversion rates walk all over smartphone, so it’s worth segmenting data between the two devices – especially for e-commerce sites. You may even feel the need to segment between Android and iOS devices to make changes suited to users who prefer each given iOS – whatever maxes conversions.

To find out more about why you need to segment your test traffic take a look at this article at


Improving the multi-device experience

With segmented data from multiple devices, you should be in a position to improve user experience across every device you consider important to your target audience. You don’t have to stop at maximising conversions though – there are tons of UX issues we still haven’t found a viable answer to and that should be reason enough to experiment.

With your tests set up correctly you have an environment to test more creative solutions to things like mobile navigation. You can also counter design trends (let’s say the default hero sections) to test alternative approaches. Many in the industry argue web designs look and feel too similar these days and there’s a lot of truth to that. But you can take the initiative to test new solutions improve the overall user experience for users across the smallest of devices, all the way up to those 50-inch plus 4K TVs.