Design user friendly pages using multiple columns

See also MultiColumnsTheme, SectionParser, DruidWikiTestCase

Many sites are using multiple columns, because its a better use of screen space. There is no much point in a browser window wider then 600-800 pixels to read text, as wider window with typical font size causes long lines of text, which are harder to read.

Here is an example: http://www.apple.com/hotnews/. The main left column showing the stories, and the right sidebar listing events, and various hot or recent "stuff". It not hard to find many more examples. Another example: http://phpnuke.org/. This is not an example of a good design, but how dynamic content from multiple sources is gathered in one page.

MoinMoin can only do one linear column. This style is good for long articles, but not enough to create nice and user friendly FrontPage, or any other central page. This will enable MoinMoin to serve better as community site, when the FrontPage gives you an dynamic overview of "Whats happening in the community".

Sidebar can be part of a theme or part of a page, or both. Themes can define sidebar that look the same on all pages, which is good for wiki related information. This page talks about page side bars, which show page related information. Since the theme control the page design, different themes can live with pages that have multiple columns or sidebars.

Here are possible page sidebars:

• News - put the list of recent news from the News page.

• Events - in a community wiki
• Current users - a list of the users currently "visiting" the wiki, or the page?
• See also - list of pages related to this page
• Meta data - list of facets this page belong to
• Table of contents
• Recent changes for this page - the last N editors changes
• Recent changes from another wiki
• Recent changes for this wiki - the top changes in a shortened form
• Recently created pages - list of the new pages created recently
• RSS feed
• Page statistics
• Home page owner image
• Calendar in a wiki blog
• Children pages - list of N children pages, sorted by name, views or modification time

Test cases

DruidWikiTestCase - Creating maintable design of a nice looking front page

Implementation

• MultiColumnsTheme - have special pages that set the content, and assemble by the theme

• SectionParser - design pages using sections and CSS

Discussion

We are using for page style MacroMarket AnttiKuntsi's Columns.py macro. It works in 1.3.3 too. -- ReimarBauer 2005-03-13 08:18:25

It may conflict with the sidebars theme.

• Nobody force you to provide conflicting themes on your wiki. Rich page design is much more important then user selectable themes. -- NirSoffer 2005-03-13 12:52:48

I don't see much point in using lots of (mostly useless) sidebars just to get the text narrow enough. It would be nice to have 2 text columns, but until html does support that in a clean way, I don't see us doing that. -- ThomasWaldmann 2005-03-13 11:44:05

We don't have to do this, just write an extension and people will use it if its useful. When and if the code is mature, conflicts are solved, and many people use the extension, we can consider integrating it into the main distribution. Actually I prefer smaller general core code, free from bugs, with proper hooks so it can be expanded easily by others. -- NirSoffer 2005-03-13 12:36:01

I feel that we are mixing issues here... One thing is to be able to embed variable content (as in a include) in a sidebar¹. The other thing is to create the layout, that should be done completely in CSS, IMHO. Themes, like they are today, can -almost- allow to make both if we can use the include macro, with pages whose content is dinamycally generated, as a modular piece of the each page. Did I understood it OK? --SIG

• ACK, Nir is mixing issues - as usual. It should be easy to realise that his current implementation of the section parser cannot replace the implementation of the Druidwiki design at all whereas this page structure suggests that.

To design the layout, each piece of data in the page should have the correct id or class. Currently, all the page data is in the page div. Tables can have class and id, but thats all. I'm not talking here about the wiki layout - only about page layout. Having dynamic content in the themes is possible, you don't need the include macro for that, just get the data from the special pages when rendering the theme.

• How is that done? Can you provide an example code fragment for the ThemeName.py file? e.g. if I want to "include" (without include() ) the contents of a page WikiSidebar in the sidebar.

  • One way to do this is with page.send_page. Check PageEditor, near the end of sendEditor, there is a check for preview. If a page preview is needed, page.send_page is called with content_only argument. This render the page in the preview area. You can copy the needed code from the Include macro...

I thinks ProcessingInstructions may be use to define the CSS . For example, the following

• ...
  ## CSS id sidebar
  some normal words
  ## CSS id /
  ...

  will generate

  ...
  <div id="sidebar"> some normal words </div>
  ...

This seems clear. -- ZhangYunfeng 2006-08-24 13:51:47

An alternative may be ParserMarket/Frame -- ReimarBauer 2006-08-24 14:35:46