[pmwiki-users] Responsive skin added to core, enabled on pmwiki.org

[Petko Yotov]

Hello,

In the last few days I've been working on the responsive skin for the 
core, based on the 2016 skin.[*]

It is now added to subversion and will be in 2.2.98. You can get it with 
the pre-release archive here:
   http://www.pmwiki.org/wiki/PmWiki/Subversion

It will NOT be enabled by default in the default installation, but I've 
enabled it on the pmwiki.org website so that more people can test it and 
report any problems.

I'll have to better document it but here are the changes from the last 
release of the 2016 skin:

1. The function that allows to print header and footer sections of the 
skin from wiki pages changed to make the template appear less complex to 
newcomers: this is always a goal for PmWiki and I wasn't happy with how 
the 2016 skin did it.

Now the full HTML snippet moved from the php script back to the html 
template for people to easily find it. A slightly different function 
looks for the section from the wiki page, and if there is one, the 
template section is disabled.

2. In mobile view, when the menu, search form and actions block are 
open, the background is faded. This helps focusing your view on the open 
block. This does not require JavaScript to work.

When you click out of the open block, on the background, any open blocks 
are closed. This uses JavaScript, but when unavailable, you can still 
close the open block by clicking on the large red X icon, like before.

3. The minimum width for the "desktop" layout increased to 38em (about 
600px) which allows some 7-inch tablets and large phones to switch the 
layout from desktop to mobile by rotating the device in portrait or 
landscape orientation.

4. The header and footer in mobile mode are now the same light gray 
background as in the desktop mode (instead of white). Inversely, the 
popups with the menu, search form and page actions have now white 
background.

5. Some cleanup was done to the CSS, a scrollbar could sometimes appear 
at the bottom of the SideBar, a pixel here or there, a README file was 
added.

As before, the JavaScript used by the skin is minimal, without 
dependencies, and only cosmetic: the wiki will look nice and be very 
usable even with JavaScript disabled.

Having a mobile-friendly layout reportedly increases the chance search 
engines will list your site to visitors on mobile devices.

I've been using the 2016 skin daily, for several months, but I'll 
appreciate if you can test it and report any problems, inconsistencies 
or if you have ideas for improvements. You can browse PmWiki.org, or 
enable the skin on your wiki. Test/review also if it works as expected 
with any recipes/modules.

The new skin should ship with the next release due in a few days, but we 
can improve it further.

The discussion can continue here:

   http://www.pmwiki.org/wiki/PITS/01406

(or if you prefer, the mailing list).

Petko

[*] http://www.pmwiki.org/wiki/Skins/2016
-- 
Change log     :  http://www.pmwiki.org/wiki/PmWiki/ChangeLog
Release notes  :  http://www.pmwiki.org/wiki/PmWiki/ReleaseNotes
If you upgrade :  http://www.pmwiki.org/wiki/PmWiki/Upgrades