Mobile Friendly Web Pages
Recently Google has started downranking pages which it regards as being not mobile friendly. So it may be advantageous to have an idea of what Google regards as being the issues.
In the past it was thought that if no font size was specified in the HTML, and one left the browser to choose its own size, one could not be accused of making a wrong choice. In Google's world, this is wrong.
On a "normal" desktop browser, screen pixels and the browser's idea of pixels are identical, and the default font size is probably 16 pixels.
Most browsers on mobiles default to deciding that in order to produce a page which looks similar to that one would see on a desktop, they will lie and claim to have a width of between 800 and 1000 pixels, a typical width for a desktop web browser window a few years ago. They use a default font size of 16 of these pixels, often known as CSS-pixels, and the text is utterly unreadable. On older smartphones in portrait mode a CSS-pixel is probably half the width and height of a real pixel. (I believe that the iPhone 1 to iPhone 5 claim to have a screen width of 960 pixels when the truth is 320 for the iPhone 1 to iPhone 3, and 640 for the two later models.)
The alternative which Google recommends is to put the magic meta tag in one's HTML:
<meta name="viewport" content="width=device-width,
initial-scale=1">
This takes one to the opposite extreme. It now requests that the CSS pixel size is set so that its apparent size at the expected viewing distance is the same as a 96dpi screen at arm's length. On many phones the answer is now 320. The default font size is unchanged, which means that very few words fit on the screen.
If using some form of mobile browser, one can investigate the effects of the viewport tag by looking at this pair of pages, one without and one with.
The Issues
After adding the above viewport tag to make Google happy, what more needs doing?
To get a reasonable amount of content on one's page, one will need to shrink the default font size. Google is happy down to at least 10 pixels.
Images could be a problem, especially as an element which is wider than 320 pixels and thus forces horizontal scrollbars to exist will make Google unhappy again.
Trying to maintain two columns in 320 pixels is hard. More than two, most ambitious.
Trying to avoid recourse to JavaScript is also hard, and I don't think that Google intends that one does try! However, conditional expressions in CSS may get some of the way to a solution.
These points are now discussed in more detail under the following headings:
On-line Validators
Google's mobile friendliness testerHTML validator
CSS validator
(There is no reason for mobile friendliness to lead to incorrect HTML or CSS!)