← blogs.sussex.ac.uk

Moodle icons

Question : What do you need from an open source cms and icons on the web today?

  • Clean separation of content and decorative elements
  • Icons scalable for different devices
  • Optimisation of icons and markup for page loading times
  • Easy to skin/theme

The moodle roadmap currently contains an issue – Completely new default icon set and graphic design – and that is a rather wonderful thing but i will miss the ye olde moodle icons…..

Moodle icons today

Let’s take a look at the current state of moodle icons. I think we all find standard icons in moodle are rather characterful, and somehow our hearts have grown rather fond of them.

They have a fantastic naive charm but unfortunately to the rest of the world something about them instantly makes moodle look cluttered and dated, no matter how modern the theme you apply is.

The same is also unfortunately true for the markup displaying the icons.

<li class="activity forum modtype_forum" id="module-1772">
<div class="mod-indent">
<a href="#">
<img src="http://demo.moodle.net/theme/image.php?theme=nimble&amp;image=icon&amp;rev=500&amp;component=forum" class="activityicon" alt="Forum">
<span class="instancename">News forum</span>
</a>
</li>

It’s a lot of code, for something relatively trivial. In my screen reader this read out “Forum (from img alt tag)  – News forum (from link text)” .

Editing icons are based on the same model :

<a class="editing_moveright" title="Move right" href="#"><img class="iconsmall" alt="Move right" title="Move right" src="http://demo.moodle.net/theme/image.php?theme=nimble&amp;image=t%2Fright&amp;rev=500"></a>

which was read by my screen reader as “Move right (the a title) – Move right (the img alt) – Move right (the img title)” . I can see what the developer is doing here – using alt tags and title tags for accessibility, but unfortunately not achieving what they want.  Other screen readers might read the title, alt or even nothing. Because there is no actual text in the a link, some screen readers will actually read the link as ‘ ‘ or announce the url address. It’s a well intentioned model that we can examine improving.

Icons on the rest of the web

Let’s think about most web icons. They are mostly what is can be described as ‘decorative’. Web standards for accessibility tell us these decorative elements shouldn’t be causing clutter to any users.

Decorative icons don’t need title or alt attributes, the content should always be the text in the actual dom node. Applying this to our code gives us :

<a title="move right" href="#"><img src="http://demo.moodle.net/theme/image.php?theme=nimble&amp;image=t%2Fright&amp;rev=500">Move right</a>

That’s a bit clearer, but we can take it a step further :

<a title='Move right' class='move_right' href="#">Move right</a>

You’ll recognise this approach as those first magic steps to the separation of content and display. There are no erroneous title and alt tags, the simple a href content does most of the work for us as Tim Berners-Lee intended. We are now free to use css to add decorative styles.

.move_right {
text-indent: -3000px;
display:inline-block;
padding-left:16px;
background: transparent url({path to icon}) 0 center no-repeat;
}

One line of css gives us the same as an img tag and src for every move icon on a page. It is a dramatic step towards optimising any site’s performance, while keeping code clean, improving accessibility, maintainability  and  giving us that all important separation of  content from display.

Edit icons as css background-image demo

For activities we can use the same approach:

<li class="activity forum modtype_forum" id="module-1772">
<a href="#">
News forum
</a>
</li>

Activity icons as css background-image demo

Another advantage is that this separation makes it a lot easier for developers to make fantastic themes for a cms.

Fun with html entities as icons

You can also use html entities as decorators to save on http requests and image load time.

Edit html entity as image demo

Our approach at Sussex

There have been a lot of people asking about our EDITING ACTIVITIES, LABELS & RESOURCE blog post, so here’s  basic walk though.

Without changing the core code changing the icons in moodle is currently an interesting challenge. It involves going through folders in your theme and physically replacing icons while keeping to the naming conventions, icon size, icon mime types and folder structure specific to moodle’s guidelines. For us it proved an insurmountable barrier to integration with other systems where we wanted consistent icons cross cms, or dynamic icons for javascript interactions.

At Sussex we wanted to alter our moodle icons by using a web standards approach based on this separation of content from display, optimisation, accessibility in mind and mobile and cross device adaptability – we are still not there yet, but we plan to be soon. We did, unfortunately,  have to implement the changes to core code outlined above to move towards this.

Semantics

First we suppressed all the icons spat out by php in moodle. Second we devised a semantic structure for classes. For resources and activities it follows this pattern :

class="asset {resource or activity} {type} {mime_type}"

This allows you to use css to add icons based on the mime type of a file resource, the resource and/or activity type. It makes the asset itself self describing, the sort of thing that gives a web developer a little glint in their eye when they view source on a webpage (as compared to the sinking feeling of despair you normally get). We could than apply a our png icon set via css, and some sprite icons where appropriate.

Other icon formats

In other parts, such as the drop down arrows above, we used a combination of html entities and svg icons from the noun project. Path dependency was no longer an issue and we are able to use icons internal and external to moodle, in whatever format was most suitable.

For activities we chose a different approach of using text based ‘faux icons’.

It still relies on the semantic self describing markup, but instead of images we use css to create text ‘faux icons’, such as the Quiz and Forum above, with unique text and background colours.

Activity text ‘faux icons’ css demo

Icons on the web today

The landscape for how you create and use icons has really changed. The principles of keeping content and styling separate are still the golden rule, alongside semantic mark up, accessibility and optimisation of page load speeds – some of our four requirements.

The ability of users to view your content on devices with different pixel densities has opened up a requirement for scalable icons such as svg and font icon sets.

Twitter bootstrap font based icon set


Zurb foundation font based icon set

Next time we re-visit our icons at Sussex we will almost certainly be using a font based icon set. Frameworks such as  Twitter bootstrap and Zurb foundation are already providing beautiful font based scalable icons which can be styled with css – as you would any font.

So what can we takeaway for moodle from this blog post?

It would be great to see moodle moving towards the future in its choice of icon format. Perhaps even more importantly to developers is to see moodle move towards web standards of accessibility, semantic markup and separation of content from display.

Be interesting to see what happens and if you feel strongly about this, as always, please contribute to the future of moodle on the forums and tracker.

6 Comments

  1. Posted August 30, 2012 at 9:20 pm | Permalink

    Is the forum icon next to each forum purely decorative, or is it part of the semantics? I would say semantics. I feel the fact you choose to replace the icon with a text faux-icon lends weight to that point of view.

    There is then the question of which, if either, is more semantic:

    <li><img src=”…” alt=”Forum” /> … </li>
    <li class=”asset activity forum”><span class=”type”>Forum</span> … </li>

  2. Stuart Lamour
    Posted August 30, 2012 at 9:57 pm | Permalink

    The choice of displaying the text “move right”, “hide”, “update” and “delete” next to the editing icons was our users. The action they would be performing based on the icon alone wasn’t necessarily that clear to them – which probably tells you a lot about the demographic of our users. Title text shown on hover wasn’t something they generally understood.

    When it came to the choice to use text instead of icons next to activities we, again, asked our user base – both students and tutors.

    They understand what a Quiz or Forum is, but when faced with http://demo.moodle.net/theme/image.php?theme=nimble&image=icon&rev=500&component=forum or http://demo.moodle.net/theme/image.php?theme=nimble&image=icon&rev=500&component=quiz have no idea what this represents.

    The faux-icon text (quiz, forum etc) is our way of giving a very visual semantic clue as to the activity actually entails.

    I think we all know the answer to your question is that the creator should be naming the activity in such a way as to indicate what it entails to all users – with or without any visual prompts. In this respect i’d say icons are, for our user base, purely decorative unless they deliver extra information that everyone can understand which is not in the node text.

    In terms of actual code that moodle img tag is redundant – nothing that shouldn’t really be done by css in this day and age. I do like the text span showing the activity type though.

    As these things get more engrained in popular culture symbols such as the home icon, menu icon, editing pencil and game controller icons will almost gain that same meaning as text has.

    It’s going to be a strange future… ⟁

    http://4.bp.blogspot.com/-yTDBirAWy8Q/T2esFrQAhOI/AAAAAAAAAc8/GIA1yr1JAkg/s1600/Hipster%2Btriangle%2Bspace.jpg

  3. Posted August 30, 2012 at 11:00 pm | Permalink

    Stuart, what an interesting post.

    You lost me half way down (or earlier) I may re-read this some othertime. (Maybe a Semantics & Icons for Dummies is needed)

    But you say: “They have a fantastic naive charm but unfortunately to the rest of the world something about them instantly makes moodle look cluttered and dated, no matter how modern the theme you apply is”

    Agreed. Repeatedly. And if I change from some cool Ruby on Rails startup site to Moodle I sometimes feel a little the same way. If what you are saying and MoodleHQ is doing, roll on a new iconset and new approaches.

    -Derek

  4. Posted August 31, 2012 at 7:52 am | Permalink

    Many thanks for putting this forum post together, Stuart. I’d never thought about – or considered – icons in Moodle in this way previously.

    Perhaps it’d be worth starting a conversation around this on Moodle.org to see if the community can get this onto the roadmap…?

    Nitin

  5. Posted September 11, 2012 at 1:32 pm | Permalink

    I’ve used a similar semantic approach for ‘links with icons’ in the systems I’ve built from scratch, and bits I’ve added on to our Moodle. I have a class called iconLink that sets left padding and positions a background image with no-repeat, then other classes to apply the right background image to each link, like so:

    <a class=”iconLink delete”>Delete</a>

    .iconLink { background-position: 0 50%; background-repeat: no-repeat; padding-left: 20px; }

    .iconLink.delete { background-image: icons/delete.png; }

    I keep this CSS in a separate CSS file, and all my commonly-used icons (from the excellent Fugue icon set) in a folder. That way, I just drop both the CSS and icons folder in a new project, include the CSS in my page headers, and I’m good to go. Much like the Twitter bootstrap, I’m trying to build my own library of UI components to use across every project my department builds, which I’m calling my “Common User Interface Language”.

  6. Posted September 20, 2012 at 4:03 pm | Permalink

    Two points:
    1. THANK YOU for pointing out what a mess of sound screen readers emit when reading a bog standard moodle course. I’m now working with a couple of blind users one of whom is trying to learn how to use the screen reader at the same time as learning moodle and having to grade online assignments. It’s a nightmare of cognitive overload exacerbated by the ‘chatty’ nature of most pages.

    2. You make the observation:
    “The action they would be performing based on the icon alone wasn’t necessarily that clear to them – which probably tells you a lot about the demographic of our users. Title text shown on hover wasn’t something they generally understood.”

    I disagree that failure to associate function with some of the icons (or descriptive text) is necessarily associated with a particular demographic. I have found that no-one really gets what the pencil means and I continually have to explain that ‘update’ really means ‘edit’. And that’s without dealing with Settings / Options / Preferences ….

Post a Comment

Your email is never shared. Required fields are marked *

*
*