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
Have you ever struggled with idea generation? There is a constant demand to stay ahead of competitors in any industry you might find yourself in. One of the fundamental ways of doing this is to remain innovative; challenging your business with new answers to existing questions and adapting to major changes within your own industry […]
Despite online sales soaring for most big multi-channel businesses, it has been predicted by Accenture that the “brick-and-mortar store will continue to make the largest revenue contribution until at least 2026”. This directly ties to the importance of local search, allowing businesses to be found easily online, which translates to a store visit and subsequent […]
Public Relations, one could argue has been around since the dawn of time. Ever since humans have been able to talk they’ve been able to persuade. But, when did we begin to make a business out of it? So, what is Public Relations? First things first, what is PR? Defined by the ever trusted CIPR, […]