17 August 2011, 11:58

Hi,

I'm at an art and design institution, and we're interested in making Mahara pages more 'designable'. One aspect of this involves allowing the design of custom themes or skins, and I believe work is ongoing with this in the Mahara community.

Another important aspect is developing the layout options so that content can be laid out in formations other than the column-based designs we have at the moment.
I understand this is not a trivial feature to introduce, so I would like to open it to discussion in the hope that those who are interested could come to a consensus on how it should be implemented.

As an institution we may have some money to part-fund this. I am looking for other institutions or companies who might also be able to contribute funding.

For the sake of discussion, here are a couple of examples of layout options from other software packages:

The panels module in Drupal:



and the template designer in Blogger:



The feedback I've had from students here is that the 'Flexible' Drupal panels layout would be very useful. Other favourites were Drupal panels 'Dashboard' and 'Two Column Bricks'.

Ideally we would come up with a format for layouts which would enable users to add their own custom options, just as it is quite easy to add more columns options now with a little bit of digging in the source code.

I spoke to Simon Grant, who is involved with the Leap2A standard, at a recent conference and he thought the layout issue was of interest to the Leap2A community. So perhaps there are implications beyond Mahara.


So, some areas for feedback:

1. Do you have any thoughts on useful layout options?
2. Do you have any funding to contribute?
3. Any thoughts on the technical realisation of this, if you have web development expertise?

Thanks,
Mike

17 August 2011, 15:30

Thanks, Mike!

For interoperability (with Leap2A) the first thing that strikes me is that any content should be able to be reproduced independently of layout. Linearised, if you like - there needs to be an order - and this may be a similar point to screen readers. If we could separate content and layout - a bit like stylesheets separate content from colours, fonts, sizes, etc. - then the content is more likely to make sense even when separated from the layout. Come to think of it, you probably want the same for mobile devices - at least the ones with smaller screens.

Perhaps people could think about that and I'll dig up what we were starting to write in Leap2A...

Simon

18 August 2011, 5:16

Hi Simon,

One approach might be to split the page into header, body and footer sections, which gives a simple sequencing schema. (Or header, body section 1, body section 2, body section x..., footer.)

Another possibility, though more ambitious from the point of view of implementing it in Mahara, is to use a CSS framework like the 960 grid system. http://960.gs/

I will take a look at Drupal panels and try to get the gist of the technical implementation.

Mike

18 August 2011, 0:28

I just found a bug report that's basically suggesting the Drupal-style layout options:

  https://bugs.launchpad.net/mahara/+bug/802157

18 August 2011, 5:42

Would it be possible to have a series of Page Sections, each one of which is analogous to the existing column-based page? When put together they would make up a single Page.
Each Page Section would effectively be a row of content, and each row would have a customisable number of columns, as with the existing layout options.

Example: Reproduce the Drupal 'Flexible' layout.

My default page layout has 1 column.
At the bottom of the page preview there is an 'Add Row' or 'Add Page Section' button. I click it, and choose the column layout 25/50/25.

I click the 'Add Row' button again, and add a 1 column section.

I now have the equivalent of the 'Flexible' layout, and each Row or Section is clearly delineated in the page preview.


Taking this approach might make it easier to extend Mahara's existing code rather than reinventing it.
It could also be a fairly discreet feature which could be ignored by users who only require the existing layout options. The 'Add Row' button would be the main addition to the interface.

Mike

24 August 2011, 5:28

Here is a mockup which illustrates this idea. It's based on the 'Flexible' layout.

Another thing which would be required for better usability would be having the content tabs area floatable. That way you can scroll right to the bottom of the page and still be able to drag and drop content blocks ontoo the preview area.

Mike

18 August 2011, 5:10

Here are the images again, for those people who are not logged in here and can't see them in the first post:

Drupal panels:

Blogger body layout options:

14 September 2011, 8:01

Take into account that this new layout design should use HTML5 tags <article>, <section>, <nav>, <sidenote>, <head>, <foot>, etc.   The user should be able to say (in layman's terms) the top part is the header, so I want to assign it as <head> section.  The bottom part is a footer, so I want to assign it as a <foot> section.  The same would be true for the main article and all subblocks are sub-articles of the main article.  The inside any sub-article, the user should be able to add an <aside> (which could be an image or another block of text -- anything that is legal in regular HTML5.  

Second, every page should have the ability to assign a CSS file to it.  That way a student can use Mahara to add the content, but them use a CSS page to define the fonts, colors, positioning, etc.

The tags at the bottom of a page should produce HTML5 tags.  The student credientials should be iCard format.