01369: Make PmWiki's default skin pass Google's mobile-friendly test (ToDo)
Description: In 2015, Google began to use mobile friendliness to rank websites. I fear that until PmWiki's default skin passes Google's test, website developers will now increasingly think of PmWiki as legacy software.
Yes, mobile skins are available as add-ons. But these do not have the same feature set or imprimatur as the officially supported skin. If mobile friendliness is evolving to be a foundational element of modern website design, then shouldn't PmWiki follow suit?
This may be a huge undertaking, but it seems unavoidable in the long run.
Someone who knows about skins, HTML5, etc., could begin by adapting PmWiki's current skin to pass Google's test. After a sufficient period of usage, this new skin would officially become PmWiki's default skin and the old skin deprecated.
Steps to take to make PmWiki skins mobile friendly
Set a viewport
- see size content to the viewport
- configure the viewport
<meta name="viewport" content="width=device-width, initial-scale=1">to
This step will not be carried out in the next release, it does strongly affect mobile users' usability as it disallows for the mobile browser to automatically scale parts of the page (without the direcive the mobile browser makes the main text part readable even if the sidebar is smaller and needs zooming in to read and use). The 'pmwiki' skin stays as it is, no viewport, no units change. If you require the use of a viewport, simply add in a config file something like
or copy and modify the skin as you like. The new skin will have a viewport, relative units and no layout tables, it will be a different skin. --Petko June 22, 2015, at 12:24 AM
$HTMLHeaderFmt['viewport'] = '<meta...>';
Make all units relative
font-size relative using
- use legible font sizes
- Android typography guidelines
- by default, the browser will display each font at 16px (CSS pixels), 1 pixel is 0.75 points
- change all
font-size: yyem;(see conversion)
- additionally change all
font-size: z.zzem;, strictly not necessary, but ensures that all
font-sizeand identified by usage of "
Change the width of layout items
Make large elements relative, rather than fixed.
- size content to viewport
- sidebar width from