Googles Mobile Friendly Webpages - Take 2!

Original- mobile desktop- mobile phone

We have spent much of today going through the Google Sample Code  and producing a "to Googles requirements" version of an important page on our website - Car Caricatures, Logos, Cartoons and Business Graphics. To replace the existing index.html "desktop only formatted" page.

Very much based it on their code and structure. It uses CSS @media  to use different formatting when the screen is greater than and less than 600px wide. I have used their sample table construct to form my horizontal changing to vertical menus in a similar way I did mobile support in my previous version.

Their finished code has bugs in it too. Maybe that is part of their course the student is supposed to fix, but they have things like missing closing HTML, HEADER BODY tags and other things.
In my previous mobile friendly version,  I effectively added an additional website formatted for 320px wide screens and used php to generate or select the correct format for the client device.   All worked fine for users, except Google Webmaster Tools complained the desktop format files were not mobile compatible, Duh! , even though the mobile formatted were.

Now I thought that was mostly fine, and as far as I could see in my testing in Google of our keywords we were still ranking OK, even if there were way more skimmer sites now showing up with our images in a Google Image search rather than our source images on our site.

So we watched and waited and have seen our site accesses drop 50% or so over the last two months.  Have been thinking about and testing theories as to why.

So is not being Mobile friendly the Google way the problem?  Don't think so BUT...

To find out, we have again updated what was our desktop html file to be multi- screen. The right two versions in the above image.

The fonts all round are all a bit big to me, but that is what Google is recommending, so we will stick with them at the moment.

I've also taken the chance to break up the gallery images to now be on 5 different pages instead of one long one, or the 3 above.  So faster to load.

Awesome, so Google says,  but their fonts are so big that the first screen is JUST the title and menus! I think this is dumb, but I don't have the influence of Google.

We will sit, test and wait again to see if this changes the page access results.  It is a lot of work to redo all the pages, again if it is.

I suspect that it is related as much to other referencing sites not being mobile friendly, and their rank has dropped, and that Google has changed their ranking code, and broken it.  I suspect this as these BLOGGER pages also have their images drop out of image search, and this has always been Mobile friendly, and they did come up before Google changed things.

I suspect Google broken code is because the programmers are listening to non  instrumental music!

Now if you actually come to this Car Caricatures, Logos, Cartoons and Business Graphics page via the main page, you will get our current Mobile page. You have to select the "non-mobile" option near the top of the page to get to the new "Desktop-but-also-Mobile-compatible-page" 

We can be contacted at Art & Technology