Recent Changes - Search:
PITS /

01369: Make PmWiki's default skin pass Google's mobile-friendly test

Summary: Make PmWiki's default skin pass Google's mobile-friendly test
Created: 2015-06-21 09:34
Status: Closed, added to core and to site
Category: CoreCandidate
From: RandyB
Assigned:
Priority: 55
Version:
OS:

A "pmwiki-responsive" skin was added to the PmWiki core distribution, to sample-config.php, and enabled on the pmwiki.org website. Any issues with that skin can be reported at 01406. --Petko August 14, 2017, at 05:15 AM

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.

See also: PITS:01265, https://www.google.com/webmasters/tools/mobile-friendly/

Steps to take to make PmWiki skins mobile friendly

Set a viewport

this steps should be carried out in the next release, it does not effect non-mobile users and is the necessary first step

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 $HTMLHeaderFmt['viewport'] = '<meta...>'; 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

Make all units relative

Make font-size relative using em

  • use legible font sizes
  • change all font-size: xxpt; to font-size: yyem; (see conversion)
  • additionally change all font-size: zzz%; to font-size: z.zzem;, strictly not necessary, but ensures that all font-size and identified by usage of "em"

Change the width of layout items

Make large elements relative, rather than fixed.