Optimizing Moodle layout

Optimizing Moodle layout

by Valentine Parnakh -
Number of replies: 16
On the moodle pages we have a lot of different repeated icons (, , etc.). We can optimize layout (minimize markup) of these icon by inserting them using CSS like this:

<p style="font-size: small; background: url(http://moodle.org/mod/forum/icon.gif) no-repeat; height: 16px; padding-left: 21px; margin: 0px 0px 0.6em;"><a href="#">Forum</a></p>
<p style="font-size: small; background: url(http://moodle.org/mod/resource/icon.gif) no-repeat; height: 16px; padding-left: 21px; margin: 0px 0px 0.6em;"><a href="#">Resource</a></p>
<p style="font-size: small; background: url(http://moodle.org/mod/glossary/icon.gif) no-repeat; height: 16px; padding-left: 21px; margin: 0px 0px 0.6em;"><a href="#">Glossary</a></p>

Forum

Resource

Glossary


Here "height" - height of an icon, "padding-left" - width of an icon (plus some space), "margin" set to minimize space usage.

<p> element is used because it is short. Why use tables?

Also you can set "clear: both" to avoid floating elements.

Just use same class ("activity") with style (font-size: small; height: 16px; padding-left: 21px; margin: 0px 0px 0.6em;) for all such paragraphs. And additional class ("resource", "forum", "lesson" etc.) with different background image (background: url(someimage.gif) no-repeat;).
Average of ratings: -
In reply to Valentine Parnakh

Re: Optimizing Moodle layout

by Valentine Parnakh -
It also would be VERY good to have a "Move" button also on a "Topic" block. To be able to move topics NOT ONLY one position up/down. REALLY helpfull.
Average of ratings: -
In reply to Valentine Parnakh

Re: Optimizing Moodle layout

by Nick Freear -
Hi Valentine.
I don't know if you're aware, but I'm working to improve the Accessibility of Moodle (Accessibility forum - RFC - Accessibility Proposal). As a side-effect of that there should be some optimisation of the 'layout'. The blocks now organise links as unordered lists (without tables). At present icons are still coded as <img>s with blank Alt text, but when there is time I am looking to do more in the style sheets.

Any views? Thanks
Nick
Average of ratings: -
In reply to Nick Freear

Re: Optimizing Moodle layout

by Valentine Parnakh -
Unordered lists - why?

Any visible example (link)?
Average of ratings: -
In reply to Valentine Parnakh

Re: Optimizing Moodle layout

by Urs Hunkler -
Picture of Core developers

Hi Valentine,

please have a look at the page about lists as Moodle standard design patterns and follow the links.

By the way, Nick, could you please add a note to this page about the list structure and the CSS you use for Moodle. This would be the necessary step to make the page title real wink

Is the structure and the naming flexible enough to be open for different layouts like the Listomatic examples?

Urs

Average of ratings: -
In reply to Urs Hunkler

Re: Optimizing Moodle layout

by Valentine Parnakh -
I've read your examples with lists. And I wondered - why lists? What so special with them?
All you need is to group and decorate (with styles) hyperlinks. I can be done without lists.
See my earlier post in this thread that updated my example.

List-O-Matic is pretty fancy but if you just use my updated example what changes? <a> elements could be inline, could be blocks (with "display: block"), could have borders and backgrounds. You can group them with <div> element as <ul> (or <ol>) groups list items.

What are the benefits of unordered lists against mine approach?
Average of ratings: -
In reply to Valentine Parnakh

Re: Optimizing Moodle layout

by Ne Nashev -
May be you forget about ability to make offset of course element for visual grouping? In nested lists it is build-in property...

And may be List-O-Matic scripts without modifications may works properly only with list...
Average of ratings: -
In reply to Valentine Parnakh

Re: Optimizing Moodle layout

by Urs Hunkler -
Picture of Core developers

"And I wondered - why lists?"

Valentine, interesting question. I first didn't understand why aou asked wink It never came to my mind to use something different than a list structure when I want to handle information on a page which I recognize as a list.

Anyhow, you are right, you can handle lists with several other html structures, but the unordered list is the very structure that combines semantic (it's a list) and what I see on teh page (I see a list of links, objects, items etc.)

Because the needs for more accessible websites get stronger many web designer start to think about the semantic structures of web pages again. In the early days html was used to support and visualize the semantic structure of information. Web designers started to use the tags mainly for layout purposes and forgot about semantics. When you search for websites with a clear semantic structure you won't find many.

Screenreader "see" web pages like we saw html pages in the early days - as structured information. And the list tag as the representation of a semantic structure helps the visual impaired understand that the information collected in that list belongs together.

Could I make my point of view clear?
Urs

Average of ratings: -
In reply to Urs Hunkler

Re: Optimizing Moodle layout

by Valentine Parnakh -
"And the list tag as the representation of a semantic structure helps the visual impaired understand that the information collected in that list belongs together."

OK, if this the case - use lists.

Just apply my suggested styles to <li> elements.
Average of ratings: -
In reply to Valentine Parnakh

Re: Optimizing Moodle layout

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
I would very much like to see this, although those styles should be done with a sensible class-naming scheme and not with hard-coded CSS.

This would finally get rid of the "custom themes defining their own icons must define ALL icons" issue which has haunted Moodle for a long time, and instead, themes would be able to override specific icons.

Modules should define their own default icons classes in their own styles.php.
Average of ratings: -
In reply to Martin Dougiamas

Re: Optimizing Moodle layout

by Valentine Parnakh -
Of course they should be done with classes (I wrote it in last paragraph). I used inline styles only for demonstration.

I also would like to see it in the forthcoming version of Moodle. But I'm not authorized to change code. You should ask developers.
Average of ratings: -
In reply to Valentine Parnakh

Re: Optimizing Moodle layout

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Ah, so you did, I missed that last paragraph.   But see my profile. smile

At this point I would just like to see some discussion happening about this to get some agreement on the final form before we leap for it.
Average of ratings: -
In reply to Martin Dougiamas

Re: Optimizing Moodle layout

by Urs Hunkler -
Picture of Core developers

Martin,

a very good example with the XHTML skeleton and the necessary CSS is part of the Listutorial. Because these examples are widely tested and discussed I linked to them from the Moodle standard page in Moodle Docs. The page is a start to discuss and describe the use of lists in Moodle. It is somehow the start of Moodle design patterns too - when you agree Martin and support this idea.

I see a big benefit for Moodle when everybody working with Moodle pages uses - when ever possible - the same design patterns. There will be many benefits. One will be smaller CSS files because you do not need to define new styles for every module, sideblock etc. as it is in the moment. When these design patterns are documented it will be easy to use them.

My vote is to use those examples and that Nick takes care that all new introduced unordered list use the same skeleton and the same CSS framework. Nick, do you have the time to do that as additional part of your accessibility job?

Urs

Average of ratings: -
In reply to Urs Hunkler

Re: Optimizing Moodle layout

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
I completely agree with you about all that, makes good sense (as do lists). approve

(My only small issue is that I wish you didn't use that URL for that documentation page as there are many non-interface standards we need to document (SCORM, IMS, etc etc) smile How about using http://docs.moodle.org/en/Interface_guidelines instead?)

BTW, I'm moving this to the Themes forum.
Average of ratings: -
In reply to Valentine Parnakh

Re: Optimizing Moodle layout

by David Scotson -

This is a good idea, though it could be improved by attaching the styles to the A tag rather than the P tag. This means the image becomes a part of the clickable link area too.

You'll save some typing too, if you attached all the common styles to a single CSS declaration, and only changed the image for each particular link.

Note that if you are creating class names to attach these images, you need one per link, rather than one per image. Some of the images are re-used for two different concepts and if they share a class you can't change one image without changing both.

Average of ratings: -
In reply to David Scotson

Re: Optimizing Moodle layout

by Valentine Parnakh -
'attaching the styles to the A tag'

Yes, good idea. Just add some more styles. Result:

font-size: small; background: url() no-repeat; height: 16px; padding-left: 21px; margin: 0px 0px 0.6em; clear: both; display: block;

Forum
"display: block" is needed to present inline <a> elements as blocks and to be able to apply "height" ("height" and "width" couldn't be applied to inline elements).

'if you are creating class names'

Sorry, I have no access to development code. My post is only a suggestion.
Average of ratings: -
In reply to David Scotson

Re: Optimizing Moodle layout

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
We can combine class names. I guess in this case the actual class name would be .activityicon.forum for example (and you can also include .course-content to be more specific).
Average of ratings: -