
{"id":805,"date":"2015-12-22T14:36:20","date_gmt":"2015-12-22T14:36:20","guid":{"rendered":"http:\/\/blogs.plymouth.ac.uk\/telmed\/?p=805"},"modified":"2021-01-12T10:27:19","modified_gmt":"2021-01-12T10:27:19","slug":"the-new-rlo-template-design","status":"publish","type":"post","link":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/","title":{"rendered":"Our new RLO template design"},"content":{"rendered":"<p>Over the last few months we have been working together to create a new template design that we can pull all of our existing Reusable Learning Objects (RLO) into.<\/p>\n<p>Currently, all of the existing RLO\u2019s have been made by different developers, old and new and by placement students and mostly in Flash, some even in AS1!<\/p>\n<p>The results vary as each developer had\u00a0their own style and way of working.<\/p>\n<div id='gallery-1' class='gallery galleryid-805 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/contentold-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/contentOLD-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-1-808\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/contentOLD-1-150x150.png 150w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/contentOLD-1-400x400.png 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-1-808'>\n\t\t\t\tThe Cardiac Cycle RLO, although technically brilliant it was built in FLash so not mobile compatible. This RLO allows a user to set up the left and right hand side of their screens to look at what happens to the heart at different speeds\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/content2old-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/content2OLD-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/content2OLD-1-150x150.png 150w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/content2OLD-1-400x400.png 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/content3old-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/content3OLD-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/content3OLD-1-150x150.png 150w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/content3OLD-1-400x400.png 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/content4old-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/content4OLD-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/content4OLD-1-150x150.png 150w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/content4OLD-1-400x400.png 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n\n<p>Although some RLO&#8217;s are technically sound, with Apple not supporting Flash, none of these existing RLO&#8217;s will work on mobile devices.\u00a0The plan was to bring them together into a single coherent design that would give us\u00a0as much space as possible for the RLO to sit in. We also aim to make them work on other devices such as tablets and mobiles.<\/p>\n<p>A secondary challenge to this was that the template would have to work across both Lectora and Storyline as we have staff who use both. Using both tools means we literally have the best of both worlds. The developer then has a choice to use what they think is the better authoring tool for the job.<\/p>\n<p>This brought its own set of limitations as both tools handle certain elements differently. Such as menus. Lectora is the better tool here if you would like a fully custom menu no fuss. Storyline, if you use the built in menu then styles are limited. This means for a completely customised menu you will need to do the whole thing yourself using master slides and layers.<\/p>\n<p>A colleague had already made a decent start prior to me joining the team,\u00a0and after going through the designs I decided that there was only some colour and font tweaks to make. Layout out wise everything was there.<\/p>\n<div id='gallery-2' class='gallery galleryid-805 gallery-columns-3 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/cover1-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/Cover1-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-816\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/Cover1-1-150x150.png 150w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/Cover1-1-400x400.png 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-816'>\n\t\t\t\tThe cover designed by my collegue Maz. All the hard work done with layout. you will see in the next image that all I needed to do was to look at the colours.\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/cover2-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/cover2-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-819\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/cover2-1-150x150.png 150w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/cover2-1-400x400.png 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-819'>\n\t\t\t\tThe redesign, I moved the browser support box down and to the left to allow for an image relating to the RLO on the right.\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/info1-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/info1-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-817\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/info1-1-150x150.png 150w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/info1-1-400x400.png 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-817'>\n\t\t\t\tI felt that the icons here could do with changing also. \n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/info2-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/info2-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-820\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/info2-1-150x150.png 150w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/info2-1-400x400.png 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-820'>\n\t\t\t\tHere is the same area as before with the new colours and icons implemented.\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/learningoutcomes1-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/learningoutcomes1-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-818\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/learningoutcomes1-1-150x150.png 150w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/learningoutcomes1-1-400x400.png 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-818'>\n\t\t\t\tLearning objectives before.\n\t\t\t\t<\/figcaption><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/blogs.plymouth.ac.uk\/digital-education\/the-new-rlo-template-design\/learningoutcomes2-1\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/learningoutcomes2-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" aria-describedby=\"gallery-2-821\" srcset=\"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/learningoutcomes2-1-150x150.png 150w, https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/learningoutcomes2-1-400x400.png 400w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div>\n\t\t\t\t<figcaption class='wp-caption-text gallery-caption' id='gallery-2-821'>\n\t\t\t\tAll that was need here was a genric image of someone achieving something. Just simply to add visual interest.\n\t\t\t\t<\/figcaption><\/figure>\n\t\t<\/div>\n\n<p>A header and footer is all that is needed for the RLO itself as the main center section is large enough to hold a range of content. I chose against creating lots of individual layouts and templates due to the varying nature of the existing RLO&#8217;s. This gave the developer maximum flexibility to redevelop as they see best.<\/p>\n<p>A page on Learning Objectives as well as a Quiz layout was designed. Each RLO now had this minimum standard to abide by.<\/p>\n<p>One area I did tweak layout wise was the main buttons. I decided to move them from top left to a more central position. This would allow the navigation buttons to take its place top right.<\/p>\n<p>Now as you are reading this, these templates are being populated with content ready for release in the new year.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Over the last few months we have been working together to create a new template design that we can pull all of our existing Reusable Learning Objects (RLO) into. Currently, all of the existing RLO\u2019s have been made by different developers, old and new and by placement students and mostly in Flash, some even in [&hellip;]<\/p>\n","protected":false},"author":157,"featured_media":819,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[341,347],"tags":[373,89,247,397,398],"class_list":["post-805","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rlo","category-template-design","tag-design","tag-elearning","tag-reusable-learning-object","tag-templates","tag-user-interface"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-content\/uploads\/sites\/96\/2015\/12\/cover2-1.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pdVSkC-cZ","_links":{"self":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/posts\/805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/users\/157"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/comments?post=805"}],"version-history":[{"count":1,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/posts\/805\/revisions"}],"predecessor-version":[{"id":6381,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/posts\/805\/revisions\/6381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/media\/819"}],"wp:attachment":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/media?parent=805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/categories?post=805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/tags?post=805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}