Mobile Responsive Design

In April 2015 Google released an algorithm update that would give a boost to websites with a mobile responsive design in mobile search results. The update was nicknamed Mobilegeddon and reinforced Google’s own position stating “responsive design is Google’s recommended design pattern”.

Website Development

Those without a mobile responsive design had a reason to fear Mobilegeddon, given that by 2016 mobile device browsing had surpassed desktop device browsing. But what is a mobile responsive design, how does it work and how does it benefit users and search?

How Does a Responsive Design Work?

With a responsive website the server sends the same HTML, but the CSS dictates how the page is presented based on the user’s device type. Google is able to determine when a website has this capability based on whether the meta name=“viewport” tag is present to instruct the browser on how to adapt to the device. If that tag is absent then the default status is a desktop dimension that gives the user a poor experience on a mobile device.

With a non-responsive design on a mobile device the visitor is forced to pinch and zoom to move around the page. This is because the default presentation is to zoom out and display the whole website in a single view. Users should not be required to adapt to the website – the website should seamlessly adapt to their device preference.

Is Your Site Mobile Responsive?

Viewing your website with a smartphone is the easiest way to determine this. If the design is mobile responsive then you will notice significant differences from the desktop version with layout changes. This includes horizontal menus being replaced by expanding and contracting hamburger menus as well as resized imagery and fonts. Test your website using the Google mobile friendly test tool that will assess and confirm if your page is mobile responsive or not. You can also download the Chrome Mobile Browser Emulator Plugin for the Chrome browser to test if your site is responsive.

As an example, below you can see our original Enpiem website that wasn’t mobile responsive back in 2008!

Enpiem Limited 2008 website demonstrating a non responsive design

The whole page is shown by default and text and links are illegible without manually zooming – hardly user friendly! Below is our current homepage that utilises a responsive design theme that has delivered the site optimised for smartphone and tablet devices.

Enpiem website in 2019 with a mobile responsive design

Benefits of a Responsive Design

Besides the improved experience for the user, there are a number of other benefits to having a mobile responsive design including:

  • Page Load Speed – as images and other elements are optimised for the target device the page often loads faster. This can result in ranking improvement as Google considers page load speed for mobile results. You can check your load time with tools like GTMetrix and webpagetest.org and find out the time to load specific assets
  • Improved Usability – a longer time-on-site will send a better signal to Google that the user has had a better experience. If the user can easily read content and navigate around the site their experience will be better than if they had to keep resizing the screen
  • Bounce Rate – does a user only visit a single page and how long was that visit before they returned to search results to look for an alternative result? A shorter dwell time indicates a poor user experience or content that didn’t deliver
  • Crawl Efficiency – it is more efficient for Google’s crawler to index your website in a single visit. Otherwise you rely on multiple visits for separate mobile and desktop versions

Catering to the Mobile Audience

As well as adaptation of design it is also important to consider the user journey of the mobile visitor. What is the top information your visitor is looking for or the quickest way they can complete a call to action? At this time signal strength and mobile data allowances still play a deciding factor in time on site, so quick load and easy navigation is essential to keep users engaged.

Are you a venue or destination where users will be likely to need to know your address/postcode details for satnav or a telephone number to call for details? Are you a restaurant with menu details or a transport provider with timetable information? How can you make finding this information as easy as possible for mobile users? Consider this in your mobile design UX to help users interact with your business.

With more users accessing the internet via mobile devices, providing a responsive device is vitally important and should be a must have on your website development brief. Make sure to test the sites responsiveness during User Acceptance Testing (UAT) as well.