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 its responsive?
But being responsive and being multi-screen optimised are not the same. Responsiveness is just one factor of many that need considering.
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 whats 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.
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.
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 youre 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 dont lose your key on-page elements. It should hide any unnecessary elements for mobile users so they arent 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.
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 Googles 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.
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 its 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.
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. Youve more screen size for sharing buttons and pop-up share boxes. And, if all else fails, its easier for a user to copy the URL and manually share it on their social network of choice.
With a mobile or tablet its 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 dont have to go searching for them. We love how the sharing buttons appear on the Manchester Evening News mobile site. Check it out.
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.
Get 123 pages of expert advice straight to your inbox.
About the Author
Do you know if your website is safe? It’s a valid question given the current climate of leaked personal details and how some companies handle the information of their customers. With new GDPR compliance coming into play in 2018, many companies are taking extra precautions to ensure their customers’ data is safe. You may have […]
Happy New Year everyone! As we all know the transition into the new year is a time for reflection, hope and new beginnings. However, it often brings with it a descent into copywriting madness, with god-awful clichés often popping up out of nowhere – yes we’re looking at you #NewYearNewMe crowd.
When it comes to building a decent website, content really is still king. The key to creating decent copy that not only draws readers to your site, but also gets your brand message across, is to make it compelling. You want to create something that’s actually worth reading – not just a scrambled up splurge […]