By Rob Weatherhead

There’s often a similar reaction when we talk about Tecmark’s multi-screen experience.  When we explain that everything we produce is optimised for the multi-screen world, there can be a lack of understanding about what we mean. A brief pause is regularly followed by: “Oh, so you mean it’s responsive?”

But being responsive and being multi-screen optimised are not the same. Responsiveness is just one factor of many that need considering.

How responsive is responsive?

There are different ways in which a page can be responsive to different devices and screen sizes. Most websites built on modern platforms will resize to fit a screen, but what’s left is often difficult to use and involves a lot of zooming in and out.

Just responding to a changed screen size is one thing; responding to make the content optimised for that specific screen size is another.

Tip: Remember that ‘browser window size’ is different to ‘screen size’ and, particularly on desktop computers, browser windows can be much smaller than expected. Test content at the critical and commonly used browser window sizes of 320 x 480, 768 x 946, 1024 x 690 and 1366 x 784. However, content must work well for all sizes to guarantee a great user experience for all users.

Think about images

If a page resizes, the images need to do so too – and remain intact. Many ‘responsive’ websites stretch and distort images as they shrink down the page width, leaving you with a poor user experience.

You also need to consider image sizes. Retaining the same image sizes will bloat your page unnecessarily, reducing load speed and increasing bounce rate.

Tip: Use free ‘lossless’ compression tools such as ImageOptim (Mac) or FileOptimizer (Windows) to reduce image file sizes. Some images can be reduced in size by 90% without sacrificing quality.

Layout

This is often one of the most overlooked elements when optimising for smaller screens. The page is made responsive, and the content resizes and realigns. But what you’re left with is a page that’s too long, with your calls-to-action tucked out of view down at the bottom.

As a page resizes it should adjust to make sure you don’t lose your key on-page elements. It should hide any unnecessary elements for mobile users so they aren’t confusing the user journey or bloating the page.

Tip: Think about how users on different devices are engaging with your content. Use Google Analytics to understand the user interaction and build the layout to make it as easy as possible.

Load speed

A key factor in being ‘mobile optimised’ is page load speed. By simply making all your existing content responsive using the same assets you can bloat your page and impact the user experience significantly.

Work out what can be left out for mobile users while still retaining the key information for them. Everything else should be dropped from the mobile design to ensure maximum load speed and user experience.

Tip: Use Google’s PageSpeed Insights tool to highlight load speed problems with your site and prioritise areas to be fixed. Ensure your website uses compression and caching at the very least, and that images are as small as possible and compressed using the tools mentioned in the ‘Think about images’ section above.

Touch screen usability

People on laptops use a mouse with a precise pointer. In contrast, those on smartphones use screen five times smaller with a finger 50 times wider to navigate. Yes, you can scale down content. But you also need to consider the spacing of your potential touch points if it’s going to be usable.

Tip: Check elements that a user may touch are at least 30px square, and ideally over 40px square, to make your site feel easy to use.

Shareability

The assets we build at Tecmark are made to be shared. We need to make that as easy as possible, and the method’s different from mobile to tablet to desktop.

On a desktop you can get away with more. You’ve more screen size for sharing buttons and pop-up share boxes. And, if all else fails, it’s easier for a user to copy the URL and manually share it on their social network of choice.

With a mobile or tablet it’s not as easy. URLs are less visible and, quite often, sharing buttons are tucked away at the bottom of a ten scroll page.

Tip: Make your sharing buttons easy to find. If possible, use a layout that follows the user down the page so they don’t have to go searching for them. We love how the sharing buttons appear on the Manchester Evening News mobile site. Check it out.

Our tip: Scale up, not down

Using a mobile-first approach to content development is often the best way of overcoming some of the above issues. It makes you think about the absolute core elements you need in your page before adding more ‘nice to haves’ on larger screens.

Think about what people are using your website for on different devices, and whether there are any differences which should affect the different layouts.

 
—
 
Want to know even more?

Give your content marketing another boost by getting our four free digital marketing ebooks and our weekly content marketing newsletter.

You’ll immediately receive 123 pages of expert insight straight to your inbox.