mobile responsivity: the basics
We explain the basics of mobile responsivity and consider why you should ensure your site works on mobile and tablet devices…
what is mobile responsivity?
A responsive website reacts to its environment – whether it’s mobile, tablet or desktop – and changes the browsing experience to reflect the size and capabilities of that environment. It’s a bit like water changing shape when it’s poured from a jug into a glass or bowl. A responsive site has more or less the same functionality and content across all platforms, but appearance and layout may vary. For example, menus and buttons may look different and text/images may increase or decrease in size.
This is in contrast to a mobile (friendly) version of a website, which is a different, separate, version of a desktop site that has been created and designed specifically for mobile. It usually has a condensed menu and reduced functionality to make the site quicker to load. It may require content to be updated twice in the back end – on both the desktop and mobile versions of the site.
why is mobile responsivity important?
Mobile browsing accounts for more than half of internet traffic, having overtaken desktop browsing for the first time back in 2016. Mobile screens are much smaller than desktop ones, so a responsive or mobile-friendly website makes it easier for users to read and engage with content. It also affects search engine rankings, with Google increasingly prioritising mobile site versions in its algorithms, especially with its recent focus on mobile-first indexing. Maximising speed for mobile is vital too, as even a one second delay in page loading can result in 7% fewer conversions.
how can you check & improve your mobile site version?
Google has a free mobile test tool which checks whether or not your website is responsive/mobile-friendly and offers suggestions for improvements. The Responsive web design checker is also free and shows how your site looks on devices of different sizes.
If your website isn’t responsive and/or doesn’t have a mobile version, you may need to get a plugin or update your site’s code to improve responsivity. For WordPress, the free WPtouch plugin is recommended by Google; for Drupal, there’s detailed advice about responsivity for Drupal 7 and Drupal 8 on the Drupal.org website. Mobile speed and navigation can also be improved through simple changes such as making buttons larger and clearer, avoiding pop-ups, turning off background videos, replacing header menus with ‘hamburger’ versions, and compressing images.
Need help to optimise your website for mobile? Get in touch – we’d be delighted to chat to you.
