{"id":6455,"date":"2017-09-29T11:57:33","date_gmt":"2017-09-29T01:57:33","guid":{"rendered":"http:\/\/sydney.edu.au\/education-portfolio\/ei\/teaching@sydney\/?p=6455"},"modified":"2017-09-29T12:23:22","modified_gmt":"2017-09-29T02:23:22","slug":"enhancing-canvas-designs-using-flexboxes-pad-boxes-feedwind-enhance-canvas-sites","status":"publish","type":"post","link":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/enhancing-canvas-designs-using-flexboxes-pad-boxes-feedwind-enhance-canvas-sites\/","title":{"rendered":"Enhancing your Canvas designs: Using flexboxes, pad boxes and Feedwind to enhance your Canvas sites"},"content":{"rendered":"

Over the past few months, I have used the University\u2019s new learning management system, Canvas, to build several sites. These include an OLE, a faculty-wide site, and a dashboard. The approach I take to designing sites is situated in graphic design and information design best practice, and as such, the designs are built around user needs and information navigation. Having a love for functional yet aesthetically-pleasing design, I believe well-designed and thoughtfully organised sites can significantly improve learning experiences. So far, I have found Canvas to be supportive of this approach.<\/p>\n

When approaching a site design task, I usually start drafting my design on paper, brainstorming how people might want to find information, the paths they might take to find what they\u2019re looking for, and the blocks they might encounter on the way. I then let my sketches guide the development of my site online. This has meant finding interesting ways of using Canvas and 3rd<\/sup> party plugins to best support the design. In this article, I will highlight three of these discoveries \u2013 flexboxes, padboxes and Feedwind.<\/p>\n

The code I discuss here and other great Canvas resources can be accessed by all staff at: https:\/\/canvas.sydney.edu.au\/courses\/1255<\/a> <\/em><\/strong><\/p>\n

Canvas flexbox<\/h2>\n

The Canvas Flexbox<\/strong><\/a> is based on the popular Flexbox Grid<\/strong><\/a> system and can be used to create interesting and responsive web page layouts using relatively simple code. I came to the Flexbox system because the design schematics I was creating either required columns of different types of information (for example, links to content and a news feed in a content area separate from the main body content) or grids (for example, a dashboard). The Canvas Flexbox grid system breaks a webpage up into 12 columns and, by employing a little code, you can dictate how many columns of a page an element flows across depending on the size of the screen it\u2019s viewed on. For example, you can make an element flow across the entire screen of a smartphone yet have it flow across only half the screen on a tablet.<\/p>\n

The Flexbox system structures a page into rows and columns. In the Canvas HTML editor<\/a>, this looks something like this for a two-column layout (on any screen):<\/p>\n

<div class=\"content-box\">\r\n  <div class=\"grid-row\">\r\n    <div class=\"col-xs-6\">\r\n       Your content here\r\n    <\/div>\r\n  <\/div>\r\n<\/div><\/pre>\n
The \u201ccontent-box\u201d div class is used to keep elements together and can be used to create space between rows, and the \u201cgrid-row\u201d class keeps columns together. But it\u2019s the following column class where things get interesting. The column class code is comprised of two parts; the screen size and a number indicating how many grid columns the element will flow. In the example above, the code means that the div will flow across half of the screen (6 of the 12 columns) on any sized screen (xs = xs and greater unless additional column parameters are added – see the end of the Flexbox section of this article for all screen codes). You can create more accessible, responsive webpages by combining multiple column classes to tell an element to flow across a different number of columns depending on the size of the screen. For example:<\/p>\n
\"\"<div class=\"content-box\">\r\n  <div class=\"grid-row\">\r\n    <div class=\"col-xs-12\">\r\n      1. Your content here\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"grid-row\">\r\n    <div class=\"col-xs-12 col-lg-8\">\r\n      2. Your content here\r\n    <\/div>\r\n    <div class=\"col-xs-12 col-lg-4\">\r\n      3. Your content here\r\n    <\/div>\r\n  <\/div>\r\n<\/div><\/pre>\n
By using the Flexbox system you can create some striking and responsive pages that present information to your students in interesting and thoughtful ways, regardless of the device they\u2019re using. Below are some examples of designs I\u2019ve created using the Flexbox system and a brief explanation as to what I was trying to achieve.<\/p>\n
Chemical Engineering Threshold Concepts: Dashboard<\/h3>\n
\"\"<\/a><\/p>\n
The dashboard concept arose from a need to provide students with an easy and inviting way to navigate a series of threshold concepts, while ensuring that they understood the need to download and install some free software first in order to complete the modules. Additionally, the organisation was important as students don\u2019t have to complete the modules in any order, though the topic complexity increases block by block. As such, the arrangement needed to indicate linear progression, but not demand it.<\/p>\n
<\/div>\n
Chemical Engineering Threshold Concepts:\u00a0An example of a module<\/h3>\n
\"\"<\/a><\/p>\n
Each concept\u00a0topic is comprised of a number of subtopics. The subtopics don\u2019t have to be completed in any particular order (or at all), though the complexity increases from the first subtopic to the last. As such, I wanted the layout of the page to reflect the complexity increase, while not enforce a linear progression (i.e. as can be achieved through the creation of separate pages embedded in\u00a0a Canvas module). Each topic\u00a0culminates in a self-assessment quiz which covers all subtopics. Again, I wanted the layout to indicate this. I also wanted to provide students with an easy way to navigate back to the dashboard home.<\/p>\n
<\/div>\n
Faculty of Engineering and I.T. Currently Enrolled Student site \u2013 Schools & Facilities page<\/h3>\n
\"\"<\/a><\/p>\n
Similar to the Chemical Engineering dashboard, the Schools & Facilities page needed to act as a homepage from which a student could access further information. The page needed to be clear and uncluttered, foster quick scanning for needed materials, and provide easy navigation to other areas of the site.<\/p>\n
<\/div>\n
The Flexbox system can take a little work to get the hang of, but once you do, you\u2019ll have added another tool to your Canvas user-centred design arsenal!<\/p>\n
There are 5 screen sizes you can customise your code to:<\/h3>\n
Code \u00a0 \u00a0 \u00a0Screen Size \u00a0 \u00a0 \u00a0 Pixel width of screen (breakpoint)\r\n <\/em><\/strong>xs\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Extra-small\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0< 576px\r\n sm \u00a0 \u00a0 \u00a0 Small \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 576px\r\n md \u00a0 \u00a0 \u00a0 Medium \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0768px\r\n lg\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Large \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 992px\r\n xl\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Extra-large \u00a0 \u00a0 \u00a0 1200px<\/pre>\n
<\/div>\n
Pad-box div class<\/h2>\n
By using the Canvas pad-box div class in combination with a border or a background colour, you can create a highlight box to showcase important information. You could think of the pad-box div class like a highlight box you might see in a textbook. By itself, the pad-box class adds padding around an element. There are four different padding sizes to choose from; mega, normal, mini and micro. The image below shows content in a \u201cpad-box-mini\u201d box that also incorporates a border:<\/p>\n
\"\"<\/p>\n
The code for the above pad-box is:<\/p>\n
<div class=\"pad-box-mini border border-trbl\">See how other students coped with the task of managing their theses as they share their experiences in these 6 short videos.<\/div><\/pre>\n
I have used this simple but effective code in a number of Canvas sites to highlight key information, create buttons, summarise key messages from topics, and draw attention to additional work students could do or follow up on if interested.\u00a0Below is an example where I used the pad-box div class and a brief explanation as to what I was trying to achieve.<\/p>\n
Research Project Planning OLE: Module page<\/h3>\n
\"\"<\/a><\/p>\n
One of the motivations driving the design of the site for the Research Project Planning OLE is that students should be able to revisit the OLE content whenever they need to, to refresh their memory about best practice or get access to planning tools. As such, I felt it might be useful to highlight the key \u2018take-away\u2019 information and ideas for each module, and present these separately from the main content area. This would allow students to come back to the resource at a later stage and quickly scan for the main ideas and\/or summaries of each module<\/p>\n
<\/div>\n
Feedwind<\/h2>\n
When designing the \u2018Faculty of Engineering and I.T. Currently Enrolled Student\u2019 site in Canvas, I needed to find a way for staff to add news items to the site and for this news to be displayed in a way that would be interesting and engaging to students. Additionally, as several staff would be editing this site, it was vital that this could be achieved relatively easily. Enter Canvas Announcements and Feedwind!<\/p>\n
Canvas provides you with the ability to copy an RSS feed link of the Announcements page. This means that any announcement made by staff will automatically be added to the feed, keeping the feed information up-to-date.<\/p>\n
After trawling the Canvas Community<\/a> site for suggestions about how best to embed an RSS feed on a page, I came across the free (to a certain point) RSS feed widget generator, Feedwind<\/strong><\/a>. By setting up an account with Feedwind, I was able to create an attractive widget containing the FEIT Currently Enrolled Students Site Announcements feed and embed it on a Canvas page. An added bonus was that I found I was able to create a widget that filtered the posts by keyword, meaning I could create widgets that targeted particular information needs (e.g. job opportunities).<\/p>\n
To create a widget, simply copy the RSS code from the announcements page of your Canvas course (or code of any feed you want to display), paste it into the Feed URL box of the widget creator, and customise the widget settings to suit your needs (I recommend setting\u00a0the width to responsive, and switching the \u2018Use HTTPS as thumbnail URLs\u2019 button on). Once you\u2019ve finished customising your widget, click the \u2018Save and get Code\u2019 button followed by the \u2018Get the iFrame version\u2019 link to get the code you can add to your Canvas page via the HTML editor.\u00a0Below is an example of a Feedwind widget embedded in a Canvas page.<\/p>\n
Research Project Planning OLE<\/h3>\n
\"\"<\/p>\n
The feed on this Canvas site contains the latest posts from an external blog, The Thesis Whisperer<\/a>. The Thesis Whisper is an excellent source of information for research students and touches on many aspects of thesis writing beyond the writing process. The inclusion of this feed situates project planning as part of a larger process.<\/p>\n
<\/div>\n
Designing for Canvas<\/h2>\n
The discoveries highlighted in this article were made trying to meet identified user needs, revealed during the design process of several sites. I\u2019ve found Canvas to be an incredibly flexible platform that supports the design process, particularly in respect to content creation and presentation. I\u2019m looking forward to making more discoveries in the future, and hearing about the discoveries of others.<\/p>\n
To continue the conversation, get involved in the Educational Innovation Yammer group<\/a>.<\/p>\n
<\/div>
<\/div>\n","protected":false},"excerpt":{"rendered":"
Over the past few months, I have used the University\u2019s new learning management system, Canvas, to build several sites. These include an OLE, a…<\/p>\n","protected":false},"author":566,"featured_media":6456,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[58,41,117,57],"tags":[200,246],"coauthors":[529],"class_list":["post-6455","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-educational-excellence","category-engineering","category-lms-transformation","category-teaching-tips","tag-canvas","tag-design","post-item","post-even"],"_links":{"self":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/6455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/users\/566"}],"replies":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/comments?post=6455"}],"version-history":[{"count":31,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/6455\/revisions"}],"predecessor-version":[{"id":6510,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/posts\/6455\/revisions\/6510"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/media\/6456"}],"wp:attachment":[{"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/media?parent=6455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/categories?post=6455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/tags?post=6455"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/educational-innovation.sydney.edu.au\/teaching@sydney\/wp-json\/wp\/v2\/coauthors?post=6455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}