Fix mobile usability issues found on.....

Getting an email from Google Webmaster Tools is not something I look forward to.

One that tells me to do something - such as "Fix mobile usability issues found on....." on my portfolio website makes me apprehensive.

So naturally I write a blog post - because a problem shared is a problem halved right?

Plus, it turns out I won't be alone in getting this email.

A couple of blog posts by major search engine commenters indicate Google is initiating a major drive on mobile usability and a lot of people are getting these emails.  See

• Google Sending Mass Scale Warnings To Non-Mobile Friendly Web Sites (on Search Engine Round Table)  
• Google Sending Mobile Usability Warnings To Huge Number Of Webmasters (Search Engine Land - ) 

What we have here is Google reminding these webmasters their sites are not mobile-friendly and issuing a warning that the pages won’t rank well in mobile search.

I'm guessing this is because search queries are now tipping over in favour of ones from mobile devices (ie 50+) so they want everyone up to speed with websites and blogs with fully responsive templates. (I explain these below)

Tackling Mobile Usability

This long blog post looks at:

• what's happening right now re mobile usability - and why
• what you might find in your inbox or on your dashboard
• the advice provided by the Google Webmaster Tools Help Page and other guideline documents online
• what you now need to do

I recommend you go and get a hot drink - there's lots of things you might want to take a look at if you are concerned with keeping your website and blog accessible by people using mobile devices.

The Google Webmaster Tools email

So this is what the email looked like



Mobile Usability

Google explained back in 2012 why mobile sites were important in a blog post Mobile-friendly sites turn visitors into customers on their Google Mobile Ads blog.

Their focus is on advertisement conversions - however exactly the same principle applies to the sites of artists trying to promote or sell their art.

From Google Webmaster - Mobile-friendly sites turn visitors into customers

Mobile Usability is the Help Page from Google Webmaster Tools. It's definitely worth studying in some detail as mobile usability will be critical to getting your artwork seen on the internet in future.

For example this section explains very clearly the types of problems that have to be tackled and the sorts of standards and solutions which are now expected - if you want your site to rank well in Google.

Because global web traffic from mobile devices is on the rise, and recent studies show that mobile visitors are more likely to revisit mobile-friendly sites, mobile usability is now relevant for optimal search results. This means that search results for mobile users should lead to content that is usable in the following ways:

• A defined viewing area (or viewport) that adjusts to the device’s screen size.

• Content that flows in the viewport, so that users don’t have to scroll horizontally or pinch the screen in order to see the entire page.

• Fonts that scale for easier reading on small screens.

• Easy-to-touch elements (e.g., buttons) that are well-spaced from other touch elements.

• Visual design and motion driven by mobile-friendly technology.

Google also explained how it was now Tracking mobile usability in Webmaster Tools in October last year.  I'd now take this as the beginning of their new drive to make sure more sites are compliant with the standards for mobile devices.

This is the link to the Mobile Usability page in Webmaster Tools. (you'll find it at the bottom of the section related to Searh Traffic).

This is what I found on my dashboard

The Mobile Usability Page on the Google Webmaster Tools Dashboard for my portfolio website

In addition, this is the link to Google's Webmaster Fundamentals Guidelines - scroll down the page to see 

• a link to Principles of Site Design
• a link to Multi-Device Layouts which includes Responsive Web Design Basics and Responsive Web Design Patterns
• as well as much much more!

What's a fully responsive template?

Responsive web design, originally defined by Ethan Marcotte in A List Apart responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. For example, on a phone, users would see content shown in a single column view; a tablet might show the same content in two columns.

Google Web Starter Kit - Responsive Web Design Basics

If you want to know what a fully responsive template looks like check out this site which provides some neat examples - although I'm not recommending you use them!  You can see how one should be able to expect a template to vary to accommodate different screen sizes.

What to do next

Inspect your own sites

Check out the Mobile Usability Page (link above) in Google Webmaster Tools ((link top of the page)

Get up to speed!

A basic fact of life is that if we want what we post on our websites and blogs to be seen and read, we need to understand some of the basics about how websites work and what standards are expected of "good practice" websites and blogs

What I'll be doing next is reading the Webmaster Fundamental Guidelines so I can use this as a benchmark when assessing which website I'll be going with when I move my 'resources for artists' sites away from HubPages.

At the moment I'm umming and erring between Squarespace and Weebly and one of the reasons is that both deliver fully responsive templates which means that content is always accessible on any size of screen.

Make sure your blog uses responsive templates

I'm NOT expecting to get a letter from Google re my Blogger blogs and that's because they are all mobile compliant.

If you use Blogger for your blog, you need to ensure that you have made it mobile compliant. Click Design / Template - and check what your blog looks like on the mobile option.  You need to click the wheel under the mobile option.

My blog - this is the template page and show the desktop and mobile versions of my blogthe arrow indicates the wheel you need to click

Below is the screen you see once you click the wheel under the mobile template

Make sure that you have clicked the option to ensure a mobile template for your Blogger blog is used on mobile devices.  There's a drop down menu so you can choose which mobile template to use. I'm currently using the one which I use for the desktop version - but I might explore the others.  I just need to know first what that does re. the extra code inserted in the existing template re statistics.

Page which allows you options about whether to use a mobile template and what it looks like

If you are using any other form of blogging software you need to ensure that your template is fully up to date. This is most likely to affect those who started blogging early and haven't updated their template.  Upgrades to new templates are possible without massive disruption to your site - but no guarantees as to whether that will be the case for everybody

Make sure your website uses responsive templates

You will need to check out what arrangement you have with your website host

I've already written to my website host asking them what they are proposing to do. They've been talking about responsive websites for a long time - but only seem to have introduced them for the high priced packages.

If you like to code your own sites you may well find the Web Starter Kit useful.

Start your project with the Web Starter Kit and ensure you're following the Web Fundamentals guidelines out of the box.Google

Think about how you write and how/where you post images on your blog or website

It's not all just templates and techie stuff. You also need to think very hard about whether you need to change the way you write and post images.

For example, it's much more difficult following long streams of consciousness text on a smaller mobile device. One of the reasons I use lots of headings and sub-headings, bullet points and short paragraphs is because it makes my very long blog posts easier to read on mobile devices.

In terms of images you need to check the layout of images on different sized screens and adopt a format which seems to give the best result on all sizes of screens.

What will you be doing next?

I think this is a good opportunity to share out experiences - of what we need to do and what we have done so far.

Do please leave a comment on this post and let me know where you are up to on mobile usability and/or what queries you may have about what this all means.
_________________

It looks like 2016 is turning into a major website update year for me. Doubtless I'll be writing more about websites for artists - and new developments in due course.

If you'd like to follow my blog you can subscribe in the side column.