Making A Mobile Friendly Website: Mobile Viewport Not Set (1/5)

How to make site mobile friendly

Having Trouble Making Your Site Mobile Friendly?

Our recent post “Google Search Algorithm Change - Mobile Friendliness” highlighted Google’s upcoming change to its ranking algorithm.  Google will down rank sites that it deems not mobile friendly.  There have been no public statements from other search providers about their mobile friendliness plans, but given Google is evolving in response to changing behaviour, other search engine providers will want to do likewise. Mobile Friendly day is 21 April 2015.

Is Our Site Mobile Friendly?

By now you may have used Google’s “Mobile-Friendly Test” tool – if not, open another window, head over there right now and test your homepage. We’ve conducted extensive testing of mobile friendliness of university, college and online course provider websites. Our most recent round of testing was on a group of just over 90 sites specialising in online IT and web development courses.  Forty-three per cent of the test group’s homepages failed Google’s Mobile-Friendly test: including a couple of sites offering a strong product line-up in mobile application development. And, we’ll confess that a couple of our site's pages failed as well.

Google’s test tool groups errors into five categories.  We will discuss these in order of ease of resolution.

Why Mobile is Tricky.

Browser publishers and web standards organisations have recognised the growth of mobile Internet access.  The various parties interested in making Internet access seamless have had to deal with the fundamental difference between desktop web access and mobile access: desktops are large and wide and mobiles are small and narrow.  One way of providing satisfactory cross-platform browsing is to offer different sites for desktop and mobile access.  This approach depends on testing the type of device accessing the site (with variable success) and often fails to handle changes such as a visitor turning their mobile through ninety degrees to ‘get a better view’.  


In a previous post we discussed an approach to making your site mobile friendly - there are a number of ways to do this, all of which require a commitment of resources.

Google has a published preference for a single “means” of website access. The preference is for fully responsive web designs. Fully responsive web designs are those that adapt their appearance based on the “window” through which they are being viewed.  If you're reading this post on a desktop, you can verify responsiveness by resizing the window to simulate the size and shape of a smartphone, tablet or other mobile device.

Mobile-friendly Test

Our experiments with Google's mobile-friendly test show that it accesses the page submitted as a simulated Apple iPhone running iOS 6 (yes, you read that quite correctly).  Importantly, the test also simulates the behaviour of the standard Googlebot web crawler, in that it reads and follows the “requests” of a site's robots.txt file.  This latter approach has an important implication.  Google’s test may not access some of the files needed to display your site as you designed it. You can see the impact of this aspect of the test in the simulated smartphone display showing what Googlebot has pulled from your site.

This result occurs because robots.txt requests Googlebot to ignore certain files and folders. The purpose of the exclusions is prevent Google's indices being “polluted” with references to files that are internal to your site's operation and should not be listed in search results.  The robots.txt mechanism is not binding, so can be ignored and you can really only specify what to ignore, not what to include.  As a result, it is easy to create a robots.txt that excludes files Googlebot needs to perform the friendliness test.  We'll discuss this issue in more detail in a future post.

The normal search-indexing Googlebot crawls all the pages of your site that it is allowed to access, during which Google will be assessing the mobile-friendliness of your entire site, so you will have to address the mobile-friendliness of every page in due course.

Mobile Viewport Not Set – First Problem Solved

Of the sites that failed the mobile friendly test, 94% failed by not having the mobile viewport set. We discussed earlier the “window” through which you are reading this post – technically, this is an example of a “viewport”.  For mobile friendliness, a viewport tells a mobile device browser how to relate the dimensions of that device to the page to be displayed.

If no viewport definition exists, than most mobile browsers assume a width of between 800 and 1024 pixels.  For smartphones, those dimensions might be “right” when held on its side (landscape mode) but too wide when held in its usual portrait orientation.  

The solution? Simply include a meta element in the site's HTML header section like this:

meta name="viewport" content="width=device-width, initial-scale=1.0"

This code instructs the mobile browser to set the viewport to be as wide as the physical screen and not do any zooming when a page is first loaded (otherwise the mobile browser might chose to start by showing the page zoomed in to make the reading of it easier).

It is highly likely that the viewport meta element is included in your site generation software and that one setting change will update all pages.

We will work through the remaining test results in subsequent posts and how you can resolve the issues that Google identifies. The next post addresses: Content Wider Than Screen



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: