You’re an HTML novice who has stumbled on the Canvas Style Guide. “Can I do this?” you ask. “What would I use this for?” Come by for a speedy lesson on: adding icons to links to build a roadmap; formatting course schedules with tabs; and building popovers for definitions.
Overview
The Canvas Style Guide can be intimidating. Divs and jquery and scss, oh my! But certain parts of it are easy for even an HTML novice to use. Yes, you can do this! This Discovery Session will connect elements of the Canvas Style Guide with pedagogy, providing elegant and time-saving examples pulled directly from Northwestern University’s School of Professional Studies online master’s degree programs.
Learning Objectives
By the end of this session, attendees will be able to:
- Create module-level roadmaps formatted with icons from the Canvas Style Guide.
- Organize an extended course schedule using tabs as presented in the Canvas Style Guide.
- Produce popovers for term definitions in module content using code from the Canvas Style Guide.
- Correlate Quality Matters standards with course design components, including roadmaps with icons, tabbed course schedules, and popovers for term definitions.
- Describe the visual design benefits of formatting course components using the Canvas Style Guide.
- Describe the accessibility benefits of formatting course components using the Canvas Style Guide.
Activities
After a brief presentation describing the benefits of the three techniques (including mapping the three techniques to Quality Matters standards 8.1, 8.4, and 8.5), I will showcase each paired with a practical use. Attendees will access a webpage with resources and code snippets, and will be asked to log in to their respective iterations of Canvas and work in their sandboxes. Then, attendees will have an opportunity to download sample content (or use their own), cut-and-paste sample code, and build their own course components. Attendees will have the opportunity to ask questions out loud, but the session will also be accompanied by a Padlet page where attendees can type questions or share screencaps of components they create.
By the end of the first short lesson, attendees will be able to create module-level roadmaps formatted with icons from the Canvas Style Guide. It will provide best practices for building roadmaps as well as outline the design and accessibility benefits of using Canvas icons as opposed to supplying your own. Then attendees will be guided to try it out themselves, by adding code from the Icon Library to the class field of a link. This session will be based directly on this blog post.
By the end of the second short lesson, attendees will be able to format an extended course schedule using tabs as presented in the Canvas Style Guide. It will provide best practices for constructing a course schedule, as well as outline the design and accessibility benefits of using tabs as opposed to one very long webpage. Then attendees will be guided to try it out themselves, by merging code supplied by Canvas with course schedule information.
By the end of the third short lesson, attendees will be able to construct popovers for word definitions using code shared in the Canvas Style Guide. It will provide best practices for providing definitions as popovers, as well as outline the design and accessibility benefits of using popovers as opposed to a separate webpage defining terms. Then attendees will be guided to try it out themselves, by supplementing a definition with popover code provided by Canvas.
Benefits
A number of different stakeholders can benefit from this discovery session. Instructional designers and faculty developers will certainly jump at the opportunity to learn new, marketable coding skills quickly as well as discover new ways to accessibly design webpages for online coursework. This session truly embodies the conference theme--Accelerate--by providing attendees with a rapid-fire session full of practical takeaways that can be implemented swiftly in the online courses they develop and support.