Skip navigation
All Places > Instructional Designers > Blog > 2017 > May

Before I start with my blog, I want to give credit to Huston Hall from Eastern Washington University. His online post inspired me to do this. 


I wanted to create this blog because I did a lot of online research and could not find everything I needed in one place. I was looking to improve the over all quality of my canvas page design as well as adding new feature to my pages. There are a lot of different tutorials online on how to include different HTML elements into your canvas page, but I will be sharing with you here everything I have gathered as well as some tricks on how to make the process easier. I created a canvas resource that is available publicly on Canvas. To access this resource: (Click Here).


If you have any questions, please email me:

John Nassif

Recently I've been working with a few different faculty to move their first classes from traditional to strictly online. Its been a great learning experience for them and me both — they get to start digging into topics like accessibility, I get to step into someone else's design process, and we all get to see exactly what Canvas is capable of. Its also helped expand my thinking in terms of how to articulate and examine my own design assumptions. One pattern I've noticed is how the actual delivery of content gets translated from face-to-face to online. Although I'm burying the lede a little here, my main goal in writing this post is to try and wrap my head around how people conceptualize content delivery. It seems like most people rely on one of two metaphors to think through how they deliver content:


  1. The Lecture — In this metaphor, everything in the online course anchors on what the instructor is communicating to a hypothetical student. How to use worksheets or readings are provided through direct, timely communication from the instructor in the form of announcements and emails. When Powerpoints are included, they are designed as supplements to the voice of the instructor, which talks directly to the listener. Although literal lectures fit in this, the "lecture metaphor" applies to content organization that relies on the direct intervention of the individual instructor to maintain coherency.
  2. The Textbook — Another metaphor is to think of the course like a fully contained textbook. The static content itself explains how to move forward through the course. If Powerpoints are used, the instructor's audio supplements the visuals, instead of the other way around. When the instructor is speaking, it is short and focused. The presence of the instructor is just another building block of the overall course instead of the principle organizing force.


Another way of looking at it: if the instructor was kidnapped today, how long would the course continue to function? It has been my experience that for many instructors, especially with their first fully online class, their course would fall to pieces in exactly one week, right when the students would be expecting another long email from the professor telling them what they had to do next week. I guess I can't help but see one of the goals of course design is self-sufficiency; the course I build will continue to function without my direct intervention. To me, this frees up the instructor to do all the things they got excited about when they were studying pedagogy, instead of the things they actually end up doing when they perform pedagogy.


The whole topic also makes me think of how people use different theories of mind. Perhaps I should've called this "theories of content." I wonder what other metaphors can be used to think through course content, or what assumptions I've made?

Rob Gibson


Posted by Rob Gibson May 4, 2017

A Ph.D. student at Northwestern developed "Nebula" discussions for Canvas. Rather than a traditional discussion format, Nebula utilizes interactive graphs that resemble a concept map...


New App Shows Online Discussions as Interactive Graphs | News | Northwestern Engineering 

The Challenge

Canvas does a pretty good job of handling responsive design via the Rich Content Editor, but, if there is one thing that I have found I am not the biggest fan of, it is the video thumbnails. Dropping a video into a course and having it simply represented by a small thumbnail just bothers me. I know that I can just link to a YouTube video as an External Tool in a module as well, but I want to include buttons, links, and text in the pages to accompany my videos.


Additionally, simply copying the embed code of a YouTube video gives you set dimensions for the iframe that you drop into your page. The end result is a video container that is either too narrow or too wide depending on the device that you choose to use. Furthermore, while I could have easily set the width of the video container to 100%, making it fluidly adjust to the width of the page, the iframe's height would remain he same, which would give me black, spacing bars on either side of the video.


What I really wanted was to be able to embed my YouTube videos on a page so that I could also enable custom thumbnails for the videos and maintain their aspect ratio no matter the device that was used to view them.



While javascript is an obvious choice for resizing elements, the solution for this issue was actually much easier than I realized. I found the following gist by GitHub user jaicab which detailed a pure CSS method for handling this. Recognizing that I didn't have access to the global CSS for my organization's instance of Canvas, I instead chose to utilize his CSS inline with the paragraph element in Canvas, and the iframe element that is generated for the purposes of embedding YouTube videos. The resulting code for the video looks like this:

<p style="border: 1px solid #d7d7d7; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none" src="" width="420" height="315" allowfullscreen="allowfullscreen"></iframe>


You can view and resize the container itself on my jsfiddle account here. Another reason that I like to use the embeddable iframe element is that it also allows me to utilize additional video parameters that YouTube has available including video start/end times, modest branding, and autoplay.


If you would like to test it out using any other YouTube video, simply replace my iframe src parameter with the src parameter from the embed code of your video of choice!

I'd love to get people's ideas and feedback on this Canvas professional development program that we're working on. We're finding that our faculty are moving to Canvas with some ease, but most are not taking the opportunity to really improve their teaching. We're hoping to spark that in a big way. Thoughts?


Teaching Effectively

With my colleagues, I'm designing a set of four guided face-to-face sessions in May of 2017 to help faculty learn how to teach effectively in Canvas. For us, teaching effectively is aimed at both students and instructors. For students, it is not just basic information transfer — what Chi, (2009) calls passive learning, but more active, constructive, and interactive learning. We're basing it on principles of good learning, and applying them in Canvas. For faculty, it also includes administrative efficiencies. We're integrating Backwards Design with Design Thinking and Universal Design for Learning to give them a unified framework.



STEP 1. Immediate term: Mini-Canvas Camp. Four 120-min workshops in May and June on fundamental TEIC topics: Course Design, Assessment, Social Learning, and Individual Learning. These will be the first four of several (a dozen or more) modules that can be led face-to-face, online, or in a blended format. The aggregation of workshops is designed to be flexible: they can be collected in a “Canvas Camp” institute-type model, an online DIY format, or tailored to the needs of a particular SCID.


STEP 2. Over the next 3-4 months, 1-2 dozen more modules will be built around foundational TEIC topics. The materials will live online and be available to hold as face-to-face or blended workshops, or as DIY online resources. The modular format allows flexibility to be assembled and grouped in ways that directly address campus needs.


Core4: Face-to-Face Sessions (Immediate term)

Course Design
(120 min)

(120 min)

Social Learning

(120 min)

Individual Learning

(120 min)

Canvas Tools Addressed

Teaching & Learning Principles (benefit for student)

  • Design Thinking
  • Backwards Design
  • Universal Design (flexibility, multiple means, etc.)
  • Formative & Summative feedback
  • Better understanding of content-specific systems
  • Collaborative learning
  • Project-based Assignments
  • Scaffolding
  • Empowering learners
  • Co-Design
  • UDL
  • E-Learning
  • Teaching for learning

Administrative Principles (benefit for instructor)

  • Reduce student emails
  • Streamline course management
  • Faster grading
  • Useful feedback for assignment design
  • Cohesive grading systems
  • Student-provided points of feedback to each other.
  • Peer feedback is often more accepted/valued.
  • More interesting projects
  • Peer feedback is often more accepted/valued.


(recruit consultants)

1-hour huddle

(individual help)

1-hour huddle

(individual help)

1-hour huddle

(individual help)

1-hour huddle

(individual help)


May Session Dates and Times (9-11am and 1-3pm — includes extra 30 min for settling in, break, etc. Followed by an optional 60-minute Post-session application lab where instructors can get consultant advice directly while working on their courses).

Monday 15

Tuesday 16

Wednesday 17

Thursday 18

Friday 19



Course Design


Teaching & Learning Symposium

Social Learning

Individual Learning


Monday 22

Tuesday 23

Wednesday 24

Thursday 25

Friday 26

9-11 am

Social Learning

Course Design


Individual Learning

(Review and revise

for next week’s sessions)


Monday 29

Tuesday 30

Wednesday 31

Thursday Jun 01

Friday Jun 02

1-3 pm

Memorial Day

Social Learning

Individual Learning

Course Design




Participants will

  1. Apply what they have learned in their own Canvas sandbox or course space, including:
    • student-centered navigation practices such as clear and concise Syllabus pages, Calendar-scheduled Assignment pages, and clearly articulated learning objectives
    • peer-to-peer learning and communication venues, such as peer review, group spaces and discussions, and collaborative Google document work
    • distributed learning frameworks, such as outcome-connected rubrics, learning objective-reinforcing quizzes and surveys, and student metacognitive prompts and reflections
    • UDL-inspired assignments that allow for personalized learning options via multiple means of content representation, student engagement, and expression of learning.
  2. Work on their own course design, leaving each session with some preliminary course design work finished, and experience accessing and applying paper and online resources that can guide them beyond the session.
  3. Engage with a variety of demonstrations and models and evaluate which would be useful in their own course

Filter Blog

By date: By tag: