{"id":1853,"date":"2012-08-22T09:26:23","date_gmt":"2012-08-22T09:26:23","guid":{"rendered":"http:\/\/blogs.sussex.ac.uk\/elearningteam\/?p=1853"},"modified":"2012-08-30T23:18:28","modified_gmt":"2012-08-30T23:18:28","slug":"moodle-icons","status":"publish","type":"post","link":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/2012\/08\/22\/moodle-icons\/","title":{"rendered":"Moodle icons"},"content":{"rendered":"<p><span style=\"font-weight: normal\">Question : What do you need from an open source cms and icons on the web today?<\/span><\/p>\n<ul>\n<li>Clean separation\u00a0of content and\u00a0decorative elements<\/li>\n<li>Icons scalable for different devices<\/li>\n<li>Optimisation of icons and markup for page loading times<\/li>\n<li>Easy to skin\/theme<\/li>\n<\/ul>\n<p>The\u00a0<a href=\"http:\/\/docs.moodle.org\/dev\/Roadmap\" target=\"_blank\">moodle roadmap<\/a> currently contains an issue &#8211; Completely new default icon set and graphic design &#8211; and that is a rather wonderful thing but i will miss the ye olde moodle icons&#8230;..<\/p>\n<h3>Moodle icons today<\/h3>\n<p>Let&#8217;s take a look at the current state of moodle icons. I think we all find\u00a0standard icons in moodle are rather characterful, and somehow our hearts have grown rather fond of them.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-1859\" title=\"Screen Shot 2012-08-30 at 10.12.34\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-10.12.34.png\" alt=\"\" width=\"646\" height=\"86\" srcset=\"https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-10.12.34.png 646w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-10.12.34-300x39.png 300w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-10.12.34-600x79.png 600w\" sizes=\"(max-width: 646px) 100vw, 646px\" \/><\/p>\n<p>They have a fantastic naive charm but\u00a0unfortunately to the rest of the world something about them instantly makes moodle look\u00a0cluttered\u00a0and dated, no matter how modern the theme you apply is.<\/p>\n<p>The same is also\u00a0unfortunately\u00a0true for the markup displaying the icons.<\/p>\n<p><code>&lt;li class=\"activity forum modtype_forum\" id=\"module-1772\"&gt;<br \/>\n&lt;div class=\"mod-indent\"&gt;<br \/>\n&lt;a href=\"#\"&gt;<br \/>\n&lt;img src=\"http:\/\/demo.moodle.net\/theme\/image.php?theme=nimble&amp;amp;image=icon&amp;amp;rev=500&amp;amp;component=forum\" class=\"activityicon\" alt=\"Forum\"&gt;<br \/>\n&lt;span class=\"instancename\"&gt;News forum&lt;\/span&gt;<br \/>\n&lt;\/a&gt;<br \/>\n&lt;\/li&gt;<\/code><\/p>\n<p>It&#8217;s a lot of code, for something relatively trivial. In my screen reader this read out &#8220;Forum (from img alt tag) \u00a0&#8211; News forum (from link text)&#8221; .<\/p>\n<p>Editing icons are based on the same model :<\/p>\n<p><code> &lt;a class=\"editing_moveright\" title=\"Move right\" href=\"#\"&gt;&lt;img class=\"iconsmall\" alt=\"Move right\" title=\"Move right\" src=\"http:\/\/demo.moodle.net\/theme\/image.php?theme=nimble&amp;amp;image=t%2Fright&amp;amp;rev=500\"&gt;&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p>which was read by my screen reader as &#8220;Move right (the a title) &#8211; Move right (the img alt) &#8211; Move right (the img title)&#8221; . I can see what the developer is doing here &#8211; using alt tags and title tags for\u00a0accessibility, but\u00a0unfortunately not\u00a0achieving\u00a0what they want.\u00a0 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 &#8216; &#8216; or\u00a0announce\u00a0the url address. It&#8217;s a well intentioned model that we can examine\u00a0improving.<\/p>\n<h3>Icons on the rest of the web<\/h3>\n<p>Let&#8217;s think about most web icons.\u00a0They are mostly what is\u00a0can be described as\u00a0&#8216;decorative&#8217;. Web standards for\u00a0accessibility\u00a0tell us these decorative elements shouldn&#8217;t be causing clutter\u00a0to any users.<\/p>\n<p>Decorative icons don&#8217;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 :<\/p>\n<p><code> &lt;a title=\"move right\" href=\"#\"&gt;&lt;img src=\"http:\/\/demo.moodle.net\/theme\/image.php?theme=nimble&amp;amp;image=t%2Fright&amp;amp;rev=500\"&gt;Move right&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p>That&#8217;s a bit clearer, but we can take it a step further :<\/p>\n<p><code>&lt;a title='Move right' class='move_right' href=\"#\"&gt;Move right&lt;\/a&gt;<\/code><\/p>\n<p>You&#8217;ll recognise this approach as those first magic steps to the separation\u00a0of\u00a0content and display. There are no\u00a0erroneous\u00a0title and alt tags, the simple a href content does most of the work for us as Tim Berners-Lee\u00a0intended. We are now free to use css to add decorative styles.<\/p>\n<p><code> .move_right {<br \/>\ntext-indent: -3000px;<br \/>\ndisplay:inline-block;<br \/>\npadding-left:16px;<br \/>\nbackground: transparent url({path to icon}) 0 center no-repeat;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>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&#8217;s performance, while keeping code clean, improving\u00a0accessibility, maintainability\u00a0\u00a0and \u00a0giving us that all important\u00a0separation\u00a0of \u00a0content from display.<\/p>\n<p><a title=\"js bin demo\" href=\"http:\/\/jsbin.com\/uvonak\/1\/edit\" target=\"_blank\">Edit icons as css background-image demo<\/a><\/p>\n<p>For activities we can use the same approach:<\/p>\n<p><code>&lt;li class=\"activity forum\u00a0modtype_forum\" id=\"module-1772\"&gt;<br \/>\n&lt;a href=\"#\"&gt;<br \/>\nNews forum<br \/>\n&lt;\/a&gt;<br \/>\n&lt;\/li&gt;<\/code><\/p>\n<p><a title=\"js bin\" href=\"http:\/\/jsbin.com\/olifoy\/1\/edit\" target=\"_blank\">Activity icons as css background-image demo<\/a><\/p>\n<p>Another advantage is that this separation\u00a0makes it a lot easier for developers to make\u00a0fantastic\u00a0themes for a cms.<\/p>\n<h3>Fun with html entities as icons<\/h3>\n<p>You can also use <a href=\"http:\/\/copypastecharacter.com\/\" target=\"_blank\">html entities<\/a> as decorators to save on http requests and image load time.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-large wp-image-1864\" title=\"Screen Shot 2012-08-30 at 14.30.52\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-14.30.52-600x204.png\" alt=\"\" width=\"600\" height=\"204\" srcset=\"https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-14.30.52-600x204.png 600w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-14.30.52-300x102.png 300w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-14.30.52.png 1049w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p><a title=\"js bin\" href=\"http:\/\/jsbin.com\/asateb\/4\/edit\" target=\"_blank\">Edit html entity as image demo<\/a><\/p>\n<h3>Our approach at Sussex<\/h3>\n<p>There have been a lot of people asking about our <a href=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/2012\/04\/20\/editing-activities-labels-resource\/\" target=\"_blank\">EDITING ACTIVITIES, LABELS &amp; RESOURCE blog post<\/a>, so here&#8217;s \u00a0basic walk though.<\/p>\n<p>Without changing the core code changing the icons in moodle is currently an interesting challenge.\u00a0It 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&#8217;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.<\/p>\n<p>At Sussex we wanted to alter our moodle icons by using a web standards approach based on this separation\u00a0of content from display, optimisation,\u00a0accessibility\u00a0in mind and mobile and cross device\u00a0adaptability &#8211; we are still not there yet, but we plan to be soon. We did,\u00a0unfortunately, \u00a0have to\u00a0implement\u00a0the changes to core code outlined above to move towards this.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" class=\"size-full wp-image-1868 aligncenter\" title=\"editing icons\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-15.03.10.png\" alt=\"\" width=\"306\" height=\"299\" srcset=\"https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-15.03.10.png 306w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-15.03.10-300x293.png 300w\" sizes=\"(max-width: 306px) 100vw, 306px\" \/><\/p>\n<h4>Semantics<\/h4>\n<p>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 :<\/p>\n<p><code>class=\"asset {resource or activity} {type} {mime_type}\"<\/code><\/p>\n<p>This allows you to use css to add icons based on the mime type of a file resource, the resource and\/or activity type.\u00a0It makes the asset itself self\u00a0describing, 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\u00a0despair\u00a0you normally get). We could than apply a our png icon set via css, and some sprite icons where appropriate.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" class=\"aligncenter\" title=\"sussex file icons\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-14.58.55.png\" alt=\"\" width=\"340\" height=\"391\" \/><\/p>\n<h4>Other icon formats<\/h4>\n<p>In other parts, such as the drop down arrows above, we used a combination of\u00a0<a title=\"copy paste entities\" href=\"http:\/\/copypastecharacter.com\/\" target=\"_blank\">html entities<\/a> and\u00a0svg icons from\u00a0<a title=\"noun project\" href=\"http:\/\/thenounproject.com\/\" target=\"_blank\">the noun project<\/a>. 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.<\/p>\n<p>For activities we chose a different approach of using text based &#8216;faux icons&#8217;.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-large wp-image-1882\" title=\"faux text icons\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-16.25.15-600x251.png\" alt=\"\" width=\"600\" height=\"251\" srcset=\"https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-16.25.15-600x251.png 600w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-16.25.15-300x125.png 300w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-16.25.15.png 789w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>It still relies on the\u00a0semantic self describing markup, but instead of images we use css to create text &#8216;faux\u00a0icons&#8217;, such as the Quiz and Forum above, with unique text and background colours.<\/p>\n<p><a title=\"js bin\" href=\"http:\/\/jsbin.com\/ubabep\/1\/edit\" target=\"_blank\">Activity text &#8216;faux\u00a0icons&#8217; css demo<\/a><\/p>\n<p style=\"text-align: center\">\n<h3>Icons on the web today<\/h3>\n<p>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\u00a0semantic\u00a0mark up,\u00a0accessibility and optimisation of page load speeds &#8211; some of our four requirements.<\/p>\n<p>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.<\/p>\n<p style=\"text-align: center\">\n<p style=\"text-align: center\"><a href=\"http:\/\/gregoryloucas.github.com\/Font-Awesome-More\/\">Twitter bootstrap font based icon set<\/a><\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" title=\"twitter bootstrap font icons\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-17.30.04-600x214.png\" alt=\"\" width=\"600\" height=\"214\" \/><a href=\"http:\/\/gregoryloucas.github.com\/Font-Awesome-More\/\"><br \/>\n<\/a><a href=\"http:\/\/www.zurb.com\/playground\/foundation-icons\"><\/a><\/p>\n<p style=\"text-align: center\">\n<p style=\"text-align: center\"><a href=\"http:\/\/www.zurb.com\/playground\/foundation-icons\">Zurb foundation font based icon set<\/a><\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/www.zurb.com\/playground\/foundation-icons\"><img loading=\"lazy\" class=\"aligncenter size-large wp-image-1889\" title=\"zurb font based icons\" src=\"http:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-17.32.26-600x185.png\" alt=\"\" width=\"600\" height=\"185\" srcset=\"https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-17.32.26-600x185.png 600w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-17.32.26-300x92.png 300w, https:\/\/blogs.sussex.ac.uk\/elearningteam\/files\/2012\/08\/Screen-Shot-2012-08-30-at-17.32.26.png 865w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><a href=\"http:\/\/www.zurb.com\/playground\/foundation-icons\"><\/a><\/p>\n<p><a href=\"http:\/\/www.zurb.com\/playground\/foundation-icons\"> <\/a><\/p>\n<p><a href=\"http:\/\/www.zurb.com\/playground\/foundation-icons\"><\/a><\/p>\n<p style=\"text-align: center\">\n<p>Next time we re-visit our icons at Sussex we will almost certainly be using a font based icon set. Frameworks such as \u00a0<a href=\"http:\/\/twitter.github.com\/bootstrap\/index.html\" target=\"_blank\">Twitter bootstrap<\/a> and\u00a0<a href=\"http:\/\/foundation.zurb.com\/\" target=\"_blank\">Zurb foundation<\/a> are already providing\u00a0beautiful\u00a0font based scalable icons which can be styled with css &#8211; as you would any font.<\/p>\n<h3>So what can we takeaway for moodle from this blog post?<\/h3>\n<p>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\u00a0accessibility,\u00a0semantic\u00a0markup and\u00a0separation\u00a0of content from display.<\/p>\n<p>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 <a href=\"http:\/\/tracker.moodle.org\/browse\/MDL-34080\" target=\"_blank\">tracker<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Question : What do you need from an open source cms and icons on the web today? Clean separation\u00a0of content and\u00a0decorative elements Icons scalable for different devices Optimisation of icons and markup for page loading times Easy to skin\/theme The\u00a0moodle roadmap currently contains an issue &#8211; Completely new default icon set and graphic design &#8211; [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[35,64],"tags":[190,188,189],"_links":{"self":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/1853"}],"collection":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/comments?post=1853"}],"version-history":[{"count":59,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/1853\/revisions"}],"predecessor-version":[{"id":1915,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/posts\/1853\/revisions\/1915"}],"wp:attachment":[{"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/media?parent=1853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/categories?post=1853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.sussex.ac.uk\/elearningteam\/wp-json\/wp\/v2\/tags?post=1853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}