12 April 2013, 7:34

Hello,

I'm posting this in the pedagogy forum rather than the developer forum because it's a question for users.

Currently, we have rather static page layouts where you can only choose columns, but not align your content otherwise. Mike Kelly had made a proposal for also being able to align blocks in rows and thus have for example one big item on top and then 2 blocks below and then again 1 big block. For more information an a login to the test site: http://mikekelly.myblog.arts.ac.uk/2012/01/31/new-version-of-custom-layouts-in-mahara-workflow/

This would satisfy the requirement that users want to align their blocks next to each other for example. However, the current and also this layout would not work well with responsive design when you go to smaller screens because it is very rigid. When you go to smaller devices, you also lose the perfect alignment of blocks next to each other because the smaller the device gets, the fewer blocks you can place next to each other and thus everything eventually ends up in one long list.

Our designer discovered http://masonry.desandro.com/ which takes a different approach: There, all boxes are numbered (and can be of different width and length) and the JavaScript arranges them according to their numbering but also by trying to fill in spaces when it works out with the numbering of the blocks. This design is highly flexible and works very well on big and smaller screens because the layout adapts to the screen size, however, you would not be able to align blocks beyond let's say the first 2 or three because depending on the screen width / the maximum defined width and decreasing the screen width, boxes move around depending on their size. But, you would never have block 10 sitting right below block 1 for example because first blocks 2-9 need to be placed. Some order can be achieved, but no definitive one.

The Masonry design is incredibly nice, dynamic and works well for any size of screen, but you lose a fair bit of control of where blocks go. Would you be ready for this or would an improvement to the current layout being able to align blocks in rows be preferred with the caveat that a fully responsive design is not possible?

Cheers

Kristina

P.S. http://shanenuessler.blogspot.com.au/?view=flipcard seems to use something similar to Masonry if not Masonry altogether. Shane mentioned it in his post about sorting portfolio pages at https://mahara.org/interaction/forum/topic.php?id=5356&offset=0&limit=10#post23100

12 April 2013, 20:47

Hi Kristina,

That's a tough choice, but I guess we can't have everything ;)

Having ANY sort of horizontal control over layout would be a great step forward though.

I'd have to vote in favour of the masonry design simply on the grounds that tablet and mobile access is becoming more and more prevalent. I don't think we'll ever be totally future proof, but over the past few years I've seen more students arriving with tablets and fewer with laptops and expect the trend to escalate. I also like the way masonry allows you to shuffle content of different sizes and fit them together jigsaw-like. That could work really well for combining images with journal posts of varying length.

What would probably help users is a preview button that lets them see how their layout would look in say smartphone, tablet and pc monitor mode - that would then help them optimise block size and layout - eg resizing an image to fit better across platforms.

On the flip side - I think the way Mike Kelly has put together his version would be very intuitive for existing users to adopt. I could take that and work with it immediately. What I don't know is how much of a learning curve there would be in using the masonry version - if it feels complicated to use it would be a barrier. Overall I'm probably 65/35 in favour of the masonry version.

Regards, Gordon.

12 April 2013, 23:03

I endorse what  Gordon says, but would like to add a layer

First, some questions:

1. Is this all or nothing, ie has to be for all themes?
2. Within a theme, need it be the default, or can it be triggered by a resolution size?
3. Are we talking single or multi-column masonry?
4. Can someone explain the animation part? I don't get it.

For me, responsive design is more about the smartphone than the tablet. Tablets will increasingly support resolutions comparable to desktops/laptops. Typically, a smartphone goes to some form of single column display and I can see how masonry can support that, but need it be an all or nothing decision? Is there no other solution that will support deliberate layout for larger displays and the default single column for tiny ones? Maybe I'm being too idealist here, but surely other projects are facing similar issues?

And then there's ease of use, as Gordon says...can there be a proof of concept to play with? (mahara or not...)

13 April 2013, 1:42

Hi again,

In term of liquid design (yes I remember my course in CSS with Eric Meier, long time ago) or adaptability, there is a good example with the forthcoming Moodle 2.5 version, which offers an adaptable theme.

Instead of moving all the blocks that are on the screen, this theme choose what has to appears on the screen and where, and what can disappear when the place is limited.

It is already a bit what Mahara does (1.6 and 1.7) when you access it with a computer or a smart phone.

I think that the way we build pages is one thing and the intelligence the theme put in rendering them on different platform is an other.

Happy that others comment on this.

Regards,

-dajan

16 April 2013, 10:09

Hi all

I like the control over layout that the flexible columnar layout offers (Mikes option)- this means you can ensure that related content is displayed in the position you set.

The masonry choice seems to be about conserving screen space on smaller screens. Through the smart use of appropriate sized columns in the flexible column layout you can minimise gaps on your portfolio page.

When you choose a column layout in Mikes solution the choices seem to be percentages eg 50 - 25 - 25 . I was expecting when I decreased my window size for the column width to be adjusted but they seemed to be a fixed width. I think it would be good for the columns to be a flexible width based on the percentage.

On another track - would it be possible to incorporate a magnifying glass app in mahara so you can read text when hovered over so people with small screens can read content easier (or for those of us in our senior years)

12 April 2013, 23:09

Hello Kristina,

I have taken the time last night to have a (long) look to both the solution improving page design.

My point of view, regarding what teachers and employers on assessing work and ePortoflios in general and on Mahara in particular.

It appears that what these two bodies want is a way to avoid losing time in searching for information on students or applicant pages. For a potential employers, during the first round of candidates selection, information has to be found easily, immediately and in a form that make comparison possible and straight forward.

During my different interivews with teachers on ePortfolios and ePortoflios practice, the same need has raised in assessing students' skills and personal achievment.

I will then prefer and vote for a way that gives users more freedom in the presentation of their data, bbut keep information where users have decided to put them (aka Kelly's solution).

Moreover, I also agree with Gordon that Mike Kelly's proposal may be in the continuity of what users already know to do with actual Mahara page layout system. And Mkes' interface is great and easy to use.

On the other what I like with the masonry style is what Shane Nuessler did to sort his posts on Blogster.

--dajan

14 April 2013, 3:26

Chipping in my two pence worth....

We currently use mahara with students as a way of presenting evidence for project design work and also as a personalised porfolio of their understanding in particular subjects eg GCSE Chemistry.

Assessment of these pages is done within the school and only through comments. Any formal assessment is done via the Mahara assignment plugin. None of the pages officially point outwardly unless through a secret URL to parents.

With those caveats, I  would welcome any design that increases the flexibility of approach and personalisation of a page. Kelly's solution seems the better of the two in that there is more control for the user in terms of where they place material. I also like it because the use can actually plan out where they want the features to go (and can alter these). The wizard feature is awesome.

The Masonary styles seems to be more about reducing space and avoiding gaps. When ourt students use mahara they add in a vast range of features from text boxes to videos and Google Docs to embedded files. Due to the difference in sizes, the page they end up with is more like the Masonary one by default rather than design. In this case I am not sure what benefits there are by using this feature but I would need to read this more carefully.

Whilst I think notebooks/laptops will be around for a little while longer than stated earlier there is an increasing march toward as a BYOT/D solution with many devices in place in the 10inch and 7inch tablet size. I have personally yet to see an effective use of Mahara on mobile phone other than through the maharadroid app for uploading stuff.

The Blogster "flipped" template is very impressive especially the way that you can sort/group posts by a range of features eg dates/ tags and so forth. The "animated" feature where it flips is pleasant can work very effectively if you have different images front and back.

Mike Kelly's block for me please. 

15 April 2013, 8:15

Hello Gordon, Don, dajan and Gideon,

Thank you very much for your feedback on the page layouts. It's a tough choice. ;-) Mike's layout allows for the exact placement of blocks horizontally and thus makes aligning easier which lots of users would like to be able to do. The Masonry design is about conserving space and making blocks work on any sized screen. With Masonry, you cannot align things perfectly. You can only define a block order and then depending on the screen size, the JavaScript calculates where the block would fit best. Masonry would work much better with the responsive design that we already have because blocks can be moved fluidly. The other page layout (including our current one) would leave gaps because it cannot recalculate columns. That is an issue for viewing very different sized columns on a smartphone when everything moves into one column.

The animation is just there to place the blocks like the animation in Shane's Blogger example.

At the moment, it would be either one or the other because both together doesn't work as they are polar opposites. However, Aaron has been thinking that in the future it could be possible to choose the page layout you wanted to work with and thus make it more flexible.

Gordon: As for the preview button, that's a great idea. Currently, you can only do that in your browser when you have the developer extension and thus the responsive design view.

Cheers

Kristina

15 April 2013, 20:04

Hi,

If Aaron's thoughts on this do prove to be possible, it would make sense to aim to incorporate the Masonry layout into the responsive theme - as Don suggested - leaving Mike's version (which fits more closely with current structure) as default on other standard themes. That way the user can decide which version suits best based on the target audience of their content.

OK - maybe I do want to have my cake AND eat it! 

Regards, Gordon.

16 April 2013, 10:54

To be clear, my idea was that on the tab where you're choosing the Page layout, one option would be "just flow all the Blocks with Masonry".

So, it would exist alongside the other options from Mike's version.

Cheers,
Aaron