I noticed today that these Nanoblogger created pages were not 'Mobile Friendly' according to Google. So, I investigated. It turns out that the necessary fixes are straightforward:
Firstly including the following meta tag in the head section explains to the browser that the content should fill the device screen:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
To add this tag to your Nanoblogger site, simply find the template .htm files that contain meta tags and add this one.
The remaining issue is the Nanoblogger side bar, which is really not useful on a mobile device. This can be removed with the following additional lines in your nb_clean.css style sheet (or whichever style sheet you are currently using).
@media screen and (max-width: 780px) {
body { font-size:16px; }
a:link { margin: 16px; }
#container { width: auto; }
#links { display: none; }
#content { margin-left: auto }
}
These lines come into play when the screen is small, i.e. less than 780 px, and boost the font size to 16 px, provide a margin of 16 px around all links (to improve clickability). This addition to the style sheet also adjusts the container and content div's width, and removes the display of the links div. With these changes the Google analysis is happy with the readability on mobile devices - and indeed readability is improved at the expense of navigational elements which were too small to use on a small screen anyway.