[Pmwiki-users] CSS layout in pmwiki-0.6

J. Perkins jason
Mon Jan 26 09:08:02 CST 2004


I've been following this thread with some interest and giving the 
subject a lot of thought. I think I might have a few ideas that 
hopefully will help.

First a word of warning: IMHO the table-oriented layout of classic 
PmWiki a fundamentally flawed design. It's a fine idea in theory, but in 
practice it is difficult to implement, as you can tell from all the 
discussion surrounding the issue. The root of the problem, I think, is 
that the design is not browser-friendly, and more importantly, it 
doesn't scale well as new features are added. I also believe that it is 
excessively complex.

I've put together a prototype page at http://www.sim8.com/pmwiki-proto/. 
This is not a functioning wiki, it's just an HTML mockup.

First off, this design should be browser-friendly. It uses only basic 
CSS and I believe it should work just about everywhere. The design is 
"elastic" and will scale to different font sizes and screen widths. Try 
scaling the font size up to see what I mean.

This design also degrades reasonably on non-CSS browsers. The title and 
text appear first in the HTML so it is screen reader friendly. The menu 
doesn't degrade as nicely as it could, but I'll try to think of some 
improvements there.

The "controls on the left" paradigm is a pretty standard web convention 
that most users will be comfortable with. This design is popular because 
it makes efficient use of screen space. Moving the controls to the left 
also allows room for the category titles and longer link descriptions.

Comments and constructive criticisms are welcomed.

Jason





I finally got a chance to play with this, and I would be happy to give
my opinion (this is where people that know me usually politely find
something else to do ;)

Might I suggest a design that is a little more browser-friendly? Instead
of trying to make these incompatible (and sometimes just broken)
browsers bend to your will, perhaps adapt the layout to what they *can*
agree on.

   http://www.sim8.com/proto/pmwiki/pmwiki.php

This approach drastically simplifies the layout code and the stylesheet.
It includes a wiki page in the left-side menu, allowing it to be
configured without editing php code. The CSS tags now have more
understandable semantics: "wiki-text" and "wiki-menu". The most
important content -- the title and the text -- always appear first in
the HTML, making it friendly for screenreaders and small-display devices.

Whatever layout you decide on, please consider alternative view devices.
Don't put the layout ahead of the content. Don't set a fixed body width
or font size. Assume the layout will be resized drastically in the browser.

Hopes this helps someone and doesn't just add to the clutter,

Jason





More information about the pmwiki-users mailing list