Mobile usability issues and Google's search results

On March 18, I received an email from Google in which they said "Google systems have tested 16 pages from your site and found that 94% of them have critical mobile usability errors. The errors on these 15 pages severely affect how mobile users are able to experience your website. These pages will not be seen as mobile-friendly by Google Search, and will therefore be displayed and ranked appropriately for smartphone users."


What the email didn't say is Google starts demoting web sites, in mobile searches, that are not mobile friendly on April 21. This means I have a little over a month to get all the sites I created and still maintain up to par. People may want to think Google is using their dominance in search to force their standards on the web. I also felt that way, when I first read the message, as I pride myself for creating sites that are accessible to the blind and by extension mobile friendly since 1995. However, I did not own a mobile device till 2011, so was never able to really test the site to see how they looked.

When I bought my first mobile device, it was the ASUS TF101 transformer Android tablet, I looked at www.becometheboss.net on the tablet and it looked ok. The screen is relatively small but the text is readable and navigation by touch screen is fine, in my opinion. When I bought my first smartphone in 2012, a Samsung NEXUS S, most of the text is readable but the navigation is impossible without zooming in. I accepted this as I am using a very small screen and the site was designed mainly for a desktop/laptop. I also learned very quickly that double tapping the screen re-sizes the text so I did not see any issue. Like me, Google prefers that all sites be designed to be accessible to all instead of having the main site, an exact copy for the blind and another copy for mobile. Having one site makes maintenance a lot easier.

Anyway, I checked out one of the links in the email to see what Google would like me to do to improve my site, or if you prefer, what Google sees as wrong with the site. They want the site to function and provide the same information on a small screen exactly as it does on a large screen. Notice it did not say they must look exactly the same. If they looked exactly the same, then navigation would become impossible, without zooming, thereby not providing the same information.

I decided to try out Google's  suggestions from the first link on another site that I created for Grayona Tourist Home as it has not been updated in a few years. So I fired up Netbeans on my laptop and also called up the site on my LG NEXUS 5 smartphone from the web server running on the laptop so I may see the how the changes looks on a 5 inch screen. The site looked ok to begin with but there is no way to navigate throughout the site without zooming in. After implementing the recommended changes, the site is totally accessible on the NEXUS 5 without zooming in. The photo slide show works and looks exactly as it does on my laptop. So Google's suggestions from the first link does precisely what I wanted but did not know is possible. And the best part is it only too a few hours to complete the changes. The most difficult page was the one the slide show as it has 25 thumbnails and the main picture.

Then I turned my attention back to www.becometheboss.net as that is a site that is updated monthly for the monthly brunches and has many features including a Canada Revenue Agency (CRA) RSS feed and video presentations hosted on YouTube. This site is very complex as it is dynamically updated by updating a database. The homepage contains a table for presenting the agenda for the brunch. I originally designed the text in the agenda table to be a slightly smaller font to the rest of the text to make it look different. But on the small screen it is not readable without zooming in. And forget about easily navigating throughout the site without even more zooming in. Again, I used Google's suggestions but initially it looked even worse as the width of the page became about twice as wide as the width of the screen. I was shocked. How could that be? The dynamic data could not be at fault.

It took me a couple of days just to get the homepage fixed. The reason is the site was created using XHTML (eXtensible Hypertext Markup Language) V. 1 transitional. Because of this, the tables must have a thead and tbody. When I converted the site from a static site with just 3 pages to a database powered dynamic site in 2009, I simply converted the pages from HTML V. 4 to XHTML V. 1 by following the basic XHTML rules. The tables threw a few warnings but did not break the page so I figured I was safe. Everything worked. Besides theads and tbodies seemed like unnecessary work that did not make any visible difference on a big screen. Fortunately, Netbeans V. 7.4 provides hints on how to correct these XHTML warnings. Once I utilized the thead and tbody in the agenda table and added an entry for the agenda table to the default CSS  (Cascading Style Sheet) the page became fully accessible.

The navigation bar at the bottom of all pages was another area of issue for mobile users. Again, Google's suggestions were helpful to a point. Intermediate knowledge of CSS is required to make it work on a small screen. On a large screen, the navigation bar may be one or two lines. Also, the mouse pointer is a lot smaller than a person's finger tip. So even with sufficient spacing between the page links, it is still very easy to press on the link for the wrong page as the navigation bar becomes multiple lines instead of one or two lines. This was solved by adding line height attribute to the navigation properties in the CSS. So far, I have corrected the homepage, reservation page, guest details page, the events page and the navigation bar. I still have a few more pages to do. The rest should be easier.

This entry was created using Mozilla Thunderbird with the Google suite of Addons.