Passing the Google Mobile Site Test - Step 1 - Viewport Metatag

This blog site didn't pass the Google mobile friendly site test. I'm going to publish some posts describing how I updated the blog site to make it pass.

Step one is this post: fixing the viewport.

The viewport is a HTML meta tag that tells small screen devices how they should scale pages when rendering to their small screens. See the W3 Schools entry on the viewport. To change the viewport for this blog site I had to update the template entry in my Pelican theme. To update the theme I copied the standard "notmyidea" theme from the site package and updated the base.html file to include a suitable viewport metatag. Finally I updated the file to use my update theme and republished.

Fixing the viewport unearthed the next Google complaint: "Content wider than screen". Fixing that is the topic of the next post.