Going Mobile : The Viewport

I have more topics for the series last seen in Label 'Engines', but before I continue with those, I would like to make a detour to take a closer look at Going Mobile. I signed off that post with

It's clear that I have to address the issue of 'mobile-friendly'. In a future post I'll look at what sort of work is involved. First stop: setting the 'mobile viewport'.

A page on developers.google.com, Configure the Viewport, told me to add 'a meta viewport' in the HEAD section of my pages and gave a specific syntax:-

<meta name=viewport content="width=device-width, initial-scale=1">

I added this for my WCC index page, loaded it into a test directory, and used the resource Mobile SEO - The tool and optimization guide [feedthebot.com] to compare the results. I first tried Google's 'Mobile-Friendly Test' (see the 'Going Mobile' post for a link), but it failed to render the Adsense code. The following image shows the results given by feedthebot.com.

For me, it's no contest. I would much rather have visitors see the full content of the page (shown on the left) than see only the introduction to the page (shown on the right). Given the full content they know they can zoom in to see more content. The intro alone might leave them scratching their heads and wondering what, if anything, they should do next.

Case closed? Maybe, but first I returned to Google's 'Mobile-Friendly Test' and fed it the address of my test page. It told me,

Awesome! This page is mobile-friendly.

This was exactly the message I wanted to see. Now I have to decide which is more important -- having mobile visitors understand at a glance the full content of a page, or having Google rank my pages as mobile-friendly. I'll think about this choice for the next few days. In the meantime, the developers.google.com link I gave earlier contains many more 'Rules' on how to optimize a page for mobile.