Google’s Webmaster Mobile Usability

Image of a responsive website on multiple devices.
Make sure you set the viewport for your responsive website to display it properly on multiple devices.

Newly introduced into the Google Webmaster control panel is a new section found under “Search Traffic” called “Mobile Usability”. With Google flexing its muscles and readying to penalize websites that are not enhancing the mobile viewing experience your site may be getting flagged as not having the viewport configured.

In fact, if you are using WordPress plugins to render your blog or website as mobile friendly, you may need to manually add in a meta tag too stop Google from flagging this issue.

The viewport is a meta setting that helps a device determine how to display the content properly. Without a viewport setting your site can not render as you had expected. Visit this page online to see images where the viewport is set and is not. It is an eye-opener and once you see it, you’ll know why you MUST update your code to show the viewport properly. (Without the viewport set images may be small and the site may not fill the device screen properly. With the viewport set image that you had wanted to be full screen will be and your site rendered maximized for that specific device.)

Adding a meta tag to the head section of your code is easy. Just grab this snippet and install it using the Editor in WordPress or Dreamweaver on your responsive website.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />

Make sure you are using the code snippet that has the attributes separated with commas and not semi-colons. This little detail will assure maximum compatibility. Read this great article to find out why.