I had a minor website issue this week but it had me going for a while. One of my customers received a notice that his site had mobile issues. My template has always passed muster so figuring out what was going on became a real challenge.

You see, Google will announce problems, give you the gist of the problems detected, specific down to the actual page the problem appears on. So, I got that far. But it was the site map! Simply generated content of the category names with nothing extra.

That was a WT um WTH (what the hay) moment.

There are no tools available to be able to pinpoint the exact content or exact place on the page – especially if it’s just a list of category names. The stated problems were content too close together and content wider than screen.

Oof. So I did follow the links to the documentation and it does give a better description much to my surprise. When the mobility testing started and after I designed my template, I hadn’t checked back to see the specs or documentation. I knew I had what works and that’s all I needed to worry about.

But that description states numbers that obviously Google does not require for spacing because I’ve never worried about it. What had happened in this specific case was that the category names were shorter, more succinct than what I normally see. Though I totally understand why this had happened, I never recommend such terseness. The more keywords you use, the better the SEO result so eventually this site will expand those categories names.

In the meantime, I had to figure out what CSS (cascading style sheets) changes would satisfy Google.

First, I made the names 100% width. Not the physical, visible names, but only the list item (<li>) and not the links. Problem solved. Doesn’t change the look or the ability to click on that link on a mobile device but, WTH, Google is now happy.

But the other one of elements too close together buffaloed me. The width/length of the names were short but the links were just as close together as every other site I’ve worked on with the template. Google actually mentions some numbers so I increased the line height of the li to separate the links better. The first number which separated those items nicely wasn’t enough. I figured out that a 24 pixel line-height worked, half the number Google mentioned.

So Google was happy. Was I? Not by a long shot. Google didn’t care what size the links were – and having the links themselves larger does improve usability. But all I did was make the list items larger which spaced them further apart and nothing else. So I did make this a mobile only CSS change.

The result is a lesson in usability. The page went from taking 10 seconds to scroll down the entire list to taking 15 seconds, lengthening the entire page for those with smaller screens. No way in my book this is an improvement. Below are the links to the two screencasts to show you what I mean. The first link is without the change and the second is with the change on a phone.

https://screencast-o-matic.com/watch/cYn327wHA8
https://screencast-o-matic.com/watch/cYn328wHB6

So Google has its rules and we have to jump through those hoops they decree. Does this really help users? No, because it is not driven by usability but by what Google can code into their mobility assessment tool.

Can other changes be made to improve the usability factor? Yes, but dang it, the trouble simply isn’t worth it. It’s just the site map for heavens sake and I have never had one complaint about it. If you want to look at the site map on your phone and tell me to do it, go ahead. Look at the demo site: https://deliatest.com/readytogo/index.php?main_page=site_map

Thanks heavens there are tools and ways to make Google, the big bully on the block, stand up and take notice. But don’t be deceived into thinking they care about what is really happening on your website.

A final note for the day – WordPress’s automatic update is still in question. One site had updated itself but my other two blogs had to be hands on forced to update. Don’t forget to check your blog!