How to Make Your Website Mobile Friendly

image of mobile phone

What is a mobile-friendly or mobile-ready website?

A website is mobile friendly if reading and navigating pages on a mobile device (read, smartphone) is as easy as on a desktop or laptop. In other words, no on-screen manipulation of images or adjusting of text is required to view the page comfortably.  Providing an 'equivalent' viewing experience on a mobile device is challenging, as the size of the screen and its vertical orientation are significant constraints.  These factors represent less of a constraint for tablet devices, but similar adaptation is needed to ensure optimum page viewing.  We note that conventional usage of the terms 'mobile-friendly' or 'mobile-ready' refer to smartphones rather than tablet devices.  However, as we will see the specific device type or screen size will not affect effective display of web pages if the site has been constructed appropriately.

Why does having a mobile-friendly website matter?

There are two reasons you should care.  Browsing from mobile devices is generally increasing, but over 50% of mobile device owners use it every day for search.  The same individuals use their device to access social networks and roughly half of them use it every day to visit a social network. From a customer service perspective it makes sense to ensure that visitors to your online education website can get the best out of their experience. Here is an extract of the results of a Google-commissioned study of mobile usage for four national markets, confirming the importance of mobile search:

Country Search on Mobile Every Day Visit Social Networks Visit Social Networks once a day
USA 61% 83% 56%
UK 54% 77% 53%
Canada 55% 78%
France 51% 69% 42%

Source: Google May 2013 International Survey 

Secondly, it is important because Google says it is.  On 26 February 2015 Google's webmaster central blog confirmed that mobile-friendliness will become an important signal for displaying search results, starting from 25 April 2015.  If you want to be found you want to be mobile friendly.

Is my website mobile-friendly already?  

This is a question with a two-part answer. You may be mobile friendly, but not friendly enough. Or, expressed slightly differently, your pages may render well, but they may be slow to load. You can check the first part of the answer here at Google's Mobile Friendly Test page. You shouldn't be too surprised if the answer is no.  Our testing of online course websites shows that just under 40% are mobile ready.

Making Your Website Mobile Friendly | Source: Online Course Info

Figure 1: Relative proportions of 4,038 online education websites tested for mobile friendliness

Whether you pass Google’s Mobile Friendliness test or not, we also recommend installing the User Agent Switcher add-on for Firefox and doing more testing.  This add-on shows you what your website looks like when viewed from an number of different devices: avoiding the need to buy or borrow examples of each device.  If you passed the Google Mobile Friendliness test, you can see if you like the way that key features of your website are implemented on mobile devices. And, if you failed the test, you can see the issues that mobile-equipped visitors will experience.

How can I make my website mobile friendly?

Modern web design principles dictate that websites/webpages provide a good viewing experience regardless of the device being used.  Moreover, good design practice tries to achieve this goal with a single set of code: CSS/HTML/JavaScript. This practice is known as responsive web design.  A site following responsive principles uses flexible page layouts and images and specifically tests for and recognises the device being used for viewing.  When design and execution come together, sites render well on almost any size of device. If you want to see responsive design in action, grab the right hand edge of your browser window with the cursor and gradually make the browser window narrower and see how the layout adapts - of course, it helps if you passed the mobile friendliness test.

We can divide the world of websites into two. Sites that have been created using a content management system (CMS) and those that have not.  The world of online education makes extensive use of CMSs, which is good news.  Most modern CMSs have long since introduced responsive templates - site layouts that conform to responsive design principles and will render site content as needed on mobile devices. So, if you have a CMS you are either already mobile friendly, or can upgrade your existing template to a newer, responsive version or you can try something we discuss a little later.

On the other hand if you have built a site from scratch your options are threefold. Do nothing! Less flippantly, you can migrate to a CMS, which would solve this issue and have many other benefits, but implementation is not trivial.  You can get a better sense of the CMS options here. Or, it is time to start coding and add the responsive features that are missing.  For the latter task here is a resource to get started. 

CMSs live in a symbiotic relationship with the providers of large numbers of add-ons, plugins and add-ins.  And, you can use CMS plugins to make a non-responsive site responsive. Consult the following links for solutions that work with the top four content management systems used in online education: Drupal, WordPress (look at JetPack, first), TYPO3 and Joomla!.

Is that all I need to do to create a mobile friendly website?

Unfortunately, it is not. And, we now address the second part of the answer to the question above. Not only should the site display well on a mobile device, but the site also needs to display quickly. And, we mean quickly, within 400 milliseconds quickly.  Here are Google’s benchmarks:

Source: | mobile timeline diagram

Figure 2: Google Mobile Analysis for Loading Pages over High Latency Networks

Source: Mobile Analysis in PageSpeed Insights

Even if you’ve passed Google’s Mobile Friendliness test, verify how quickly your pages load with Google's PageSpeed test. You have the option of testing the desktop and mobile versions of your site, but given our point about a common set of code, if you fix one, you fix the other. 

The results can make depressing reading, but Google suggests a number of specific actions you can take to improve the speed at which pages load. The key areas that you will need to address are:

  •  Reducing the data you are loading on the mobile device

Enable server-side compression, by using GZIP or its equivalent - see our blog post for more details. 

Compress images, again see the previous post for online and downloadable tools you should be using to compress all images on your website. 

Minify your code. Both the Google link and this blog post identify open-source tools that can be used to compress code files. 

  • Optimising the execution of any code used to create the page

Order of execution items.

Optimising CSS files.

And, when you complete the work set out above you will have successfully managed to get to the mobile search starting line. 



Sign Up for Email Delivery:

We collect the following solely to email you new blog posts.

* indicates required

MailChimp stores your details. We do not share data with third parties.



Don’t have accurate and current information on all the websites you own? Not able to monitor and check each website’s content quality and risk status? Let’s talk about how we can help.


Blog photo image: