Why Modern Websites need to be Mobile Friendly

It should come as no surprise to anyone that mobile internet usage is booming. Smartphone technology and the rise of 3G and then 4G mobile broadband has enabled all of us to access the internet whenever and wherever we like. As of May 2014, the consumption of mobile media accounted for 51% of all digital media consumption. By 2019 Cisco predicts 66% of all IP traffic will be from mobile devices.

This change in the way we interact with and interrogate the internet, in particular through search, is nothing short of a paradigm shift and, as usual with so many of these things, Google is helping sculpt this brave new digital world through its search algorithm.

In this article I’m going to explore why it’s so important for content marketers and businesses of all sizes to make sure their websites are mobile friendly. We’ll also look at exactly what ‘mobile friendly’ actually means, as well as how to achieve it. But first I want to turn our attentions back to Google.

 

Google’s Carrot and Stick Approach

In April 2015 Google implemented a pre-announced update to its algorithm, nicknamed by many in the SEO community as ‘Mobilegeddon.’ The Mobile Update was designed to boost the rankings of sites that had been optimised for mobile devices, including tablets. Of course by sending mobile friendly sites up the rankings on mobile search, Google was effectively penalising non-mobile friendly sites by causing them to drop in the rankings.

According to Moz’s resident marketing scientist, Dr Peter Meyers, the results of the update were smaller than expected over the short term. He does conclude, however, that Google’s rhetoric around this issue will undeniably see mobile-friendly websites gain an increasing advantage over their non-mobile friendly competition in the long term.

Although Google’s algorithm update only affects website rankings in mobile search results, it’s important to understand just how many people are using their mobile devices to search for businesses and services in 2016. In fact as far back as 2012 over half of local searches were being done on a mobile devices and this figure continues to rise, for both local and search in general. Whatever stats you look at though, the conclusion is clear; ignore mobile and you are potentially losing out on a huge amount of your potential search traffic.

Of course getting your site optimised for mobile goes beyond improving your standing with Google. In fact rankings are really only half the story. User experience is the key to mobile friendly design and as more and more sites become optimised for mobile devices, the faster this standard will become the norm; leaving un-optimised sites looking increasingly backward and outdated to those using mobile devices.

 

What is a Mobile Friendly Website?

Cameron Soojian’s excellent article in Business2Community lays out in laymen’s terms how Google defines a mobile friendly website and is an excellent starting point. To sum up, there are three types of mobile friendly approach to website design:

  • Responsive Web Design (RWD)
    This is undoubtedly becoming the new standard for new websites with major publishing platforms like WordPress and Squarespace all using it. It is also the easiest to maintain. In a nutshell responsive website design uses CSS and HTML to resize, shrink, hide, enlarge or move the text, menus and images in your website, dependent on the size of screen it’s being viewed on.
  • Dynamic Serving Websites
    These types of website will still use a single URL like RWD, but instead a different set of HTML is served up, dependent on the device being used. Although load times are faster with dynamic HTML serving, there is a lot more maintenance as you are essentially dealing with two versions of the same website.
  • Separate URL Configuration
    The last and most impractical type of mobile friendly website is one that uses separate URLs for mobile and desktop versions. In this setup the server will detect the device being used and redirect the user to the mobile friendly version of the site if necessary. This is complex and maintenance of redirects can get hard to manage.

Modern website publishing platforms like WordPress and Squarespace all use themes that make mobile friendly web design something you don’t really need to think about. This often includes the use of RWD but they may also serve up specific mobile versions of your site dynamically (these often appear with an ‘m.’ prefix in your browser’s address bar). For the most part the theme will usually create this in the background as you build your main site for desktop, but it’s important to test it on various devices throughout the process.

 

User Experience Considerations

Regardless of how good your website theme is at automatically optimising your site for mobile devices, there will always be some considerations when it comes to how users experience things like navigation, images and video content. Many website publishing platform themes will automatically resize images for a mobile screen so they load faster, but you may have to do some cropping and resizing for banner or background images. Once again, the rule here is to test on various devices as you go.

For many businesses with established large websites, the process of mobile optimisation isn’t always a straightforward one. However big the job of optimising your website for mobile, it pays to reconsider user experience and begin thinking about how your potential customers interact with their mobile devices. It’s really not enough just to think you’ve created a mobile version of your site and be done with it.

Here are a few things to consider before you begin:

  • Readable fonts
    Mobile screens are a lot smaller so that fancy font that looks great on a desktop might be a nightmare to read on an iPhone or Android phone.
  • Big buttons
    CTAs on mobile devices need to be big and bold. The tendency is therefore to opt for buttons over hyperlinks, which are difficult to click on. Try applying the ‘thumb rule’ which says that if a user has to zoom in or use their other hand so they can use a finger to click, then your button is too small.
  • Icons
    Screen real estate is at a premium on mobile devices so where possible use icons instead of words. This could be a magnifying glass for search or a phone icon to call.
  • Image resizing
    Load times are crucial to mobile friendly sites so make sure all your images have been resized properly for smaller screens.
  • Flash
    Flash is all but dead on desktops but on mobile devices it cannot be rendered at all. Avoid it at all costs.
  • Video content
    If your site hosts video content you need to be thinking about how viewers are going to see that content on a significantly tinier screen. Letterboxing may give you the cinematic effect on a desktop monitor but it can seriously hamper the viewing experience on a mobile screen. The same goes for titles, subtitles and the content itself. If it can’t be read on mobile, then should you be featuring it prominently on your site at all? Finally, consider the fact that many users have the sound of their phones turned off. Is your video still worth watching without the sound? If not, is there any way it could be made to?
  • Think context
    When people search and click through to your site on their smartphone they will often be looking for different information than someone on a wired device. They’re more likely to be outside for example and actively looking for your business, so location info and opening times should be prominent on your homepage. Mobile sites should also take advantage of geolocation to point people towards your nearest store, serve them local info, etc.

 

For more info on the ins and outs of Google’s update visit their FAQ page. For the lowdown on getting your site mobile friendly there’s a ton of information and resources on the Google Developers website.