Not this blog of course – it had been responsive already.
But I gave in to Google’s nagging and did not ignore messages in Google Webmaster Tools any longer. All my home-grown websites had a fixed width of the content pane and a fixed left sidebar. On a mobile device you only saw the upper left corner – showing the side bar and only part of the content pane.
Learning about a major Google update implemented last week I spent one night coding until the test went fine for our business website …
… and for my/our other sites.
This is not a guide to the perfect responsive design, I am not a professional web developer, and I don’t claim my CSS or HTML code is flawless, elegant, or processed correctly by all browsers in the world. I read this tutorial and this guide, and they provided me with clues to answer my main question:
What is the bare minimum to make a classical website
mobile-friendly according to Google’s requirements?
It also does not necessarily mean other websites are extremely difficult to read on a mobile device. There is a famous website that doesn’t meet Google’s standards although the content pane fits nicely into the width of a smartphone – if you turn it by 90° and scroll to the right … which Googlebot will not do.
In summary I did the following:
Pre-requisites: Use only CSS for formatting, especially define the layout by containers referred to in the stylesheet. Fortunately I made that move long ago.
1) Set a viewport metatag which tells the device to adapt the visible content to the width of the screen. Even if the width of the content is not fixed in a desktop browser, it is not automatically interpreted correctly on mobile devices without viewport. Actually, I was wrong in assuming that a plain old-school hardly formatted HTML text of variable width is mobile-friendly by default. In this case the content adapts to the width of the device, but Google rightly complains about too small text, and links too close together – in addition to missing viewport.
I had been intimidated by the small text / links close errors some time ago and figured I had to re-do all navigation elements. But after adding viewport, the ‘only’ thing left was to make the content break or flow so that it won’t be larger than the screen width. Text size and links were fine without any change to font size or width / height of containers for navigation links.
2) Add at least one media query to my CSS stylesheets in order to make the left side bar vanish or move if the width of the screen is pixels is smaller than a certain size. I tested with an Android device, and with Google’s tool – but mainly I was squeezing the window on a desktop PC to very small widths. For the business website I decided the sidebar is nice-to-have as it just shows recent blog posts – the same approach as used with by my current WordPress template. For some other sites it was an essential navigation pane; so I let it move to the top.
3) Make sure that all containers and images on a page resize or flow accordingly by making their styles change at the threshold width or continuously – this meant cross-checking the styles of all containers that define the layout and changing / adding style definitions depending on the screen width. I made images resizable, and text displayed left to images should flow under it at a certain width.