[pmwiki-users] It's time to change pmwiki default skin!

Rogutės Sparnuotos rogutes at googlemail.com
Tue Sep 20 11:58:20 CDT 2011


Petko Yotov (2011-09-20 16:07):
> On Tuesday 20 September 2011 13:09:26, rogutes at googlemail.com wrote :
> > I'm not browsing with mobile devices, but I am not against supporting
> > them. Are you thinking about a special skin for very small screens, or one
> > skin that is good enough for both use cases?
> 
> I'm not sure the same page could look fantastic on screens wide 172px and 
> 2048px at the same time. So it would probably be either different skins or 
> different "skin modes" as some suggested.

No, definitely not fantastic. But the change from 1000px to 2000px is also
pretty hard to manage while keeping it beautiful. And mobile browsers seem
to have a pretty good overview and zooming ability.

> > I think that the best approach would be to aim for simplicity in the new
> > default skin (minimal distractions on the homepage) and use media queries,
> 
> What is "media queries"?

http://www.w3.org/TR/css3-mediaqueries/
You have put a link to "Detecting device size & orientation in CSS" in
PITS/01265, which describes media queries from a practical standpoint.
I use them to change from 'position:absolute;' to 'position:fixed;' on one
PmWiki site when screen width is smaller than 970px:

@media all and (min-width:970px) {
  #wikileft {
    position:fixed;
  }
}

> I see a future mobile skin (mode) primarily targeting readers and not writers 
> of pmwikis in the wild, simply because editing a long text on a mobile phone 
> is way too long and difficult and is done only in rare cases.

Good point.
But recently I had bad experience on a site with a special interface for
mobile users - it didn't have the feature that I came for and which was
present in the "normal" interface. So the possibility to edit shouldn't be
hidden in "mobile mode".

> I wouldn't worry too much about the pmwiki.org website on the tiny screens of 
> mobile phones -- our visitors are admins coming to download and install PmWiki 
> and recipes, read the documentation and customize their installations (SSH, 
> FTP...). You don't do these things on a phone. That's why I want a balanced 
> pmwiki.org home page, neither too complex and overwhelming, nor too simple and 
> empty.

> > By the way, does http://www.pmwiki.org/wiki/PmWiki/BasicEditing look ok on
> > small widths (but bigger than my 172x220)?
> 
> On a 240x320 the markup examples don't look too good, but as I said this 
> documentation page will be read by wiki writers who are more likely to be on a 
> normal screen. On 360x640, especially landscape 640x360 it is quite good.

People do read documentation on mobile phones and especially tablets. But
perhaps this is not the case with PmWiki writers, dunno.

> > And would it really be a good idea to move the sidebar down for mobile
> > devices (as someone suggested)? It would mean a lot of vertical scrolling
> > to reach it on longer pages. And if the sidebar is on the side, one can
> > zoom out and back in to reach it (or scroll horizontally, if the sidebar
> > has position:fixed).
> 
> The "fixed" position in CSS should be used carefully, because if the sidebar 
> or other element is taller than the screen, a part of it will never be 
> displayed. And desktop browsers don't have the same zoom feature as mobile 
> ones. For example, this skin has a sidebar taller than the screen of my laptop
> 
>   http://www.pmwiki.org/wiki/Cookbook/FixFlowSkin?setmenu=fixed
> 
> and only half of the sidebar is shown, up to the "Skins" link. Fortunately, 
> this skin has a mode with a scrolling sidebar, without position:fixed.

Yes, the skin needs this:
#sidebarbox {
  overflow:auto;
}

> For a mobile device I would probably prefer a different menu, that is a wiki 
> page other than Site.SideBar, with less selected links, eg. a topbar in a 
> single line which needs much less screen area than a full sidebar. If more 
> links are required, they could be placed at the bottom of the page like on the 
> other popular websites (Wordpress...).

Are 'position:fixed;' elements working fine on mobile browsers? It could
be a topbar with
  <Menu> <Home> <Link1> <Link2> <Link3>

And clicking on <Menu> could open a javascript "popup"...

-- 
--  Rogutės Sparnuotos



More information about the pmwiki-users mailing list