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

Lately I've been busy as a bee, cross pollinating between the tips Stefanie Sanders shared in Creating an inviting course home page and the HTML Snippets Gerol Petruzella shared in Columns Without Tables: code-snippet. Back and forth I went until I finally had something I think is sweet as honey and ready to share. Combining all the ideas and more I came up with some new homepage designs.


Design Notes:

  1. Not That Wide- When you are designing a homepage in Canvas you have to remember that you are working with less width than a page that is not set as the homepage. This is because the task bar on the right side of Canvas effectively takes up 285 pixels. Taking the left course nav into consideration as well, this leaves you with approximately 840 pixels of usable homepage space if you are designing with the WXGA (1366 x 768) screen resolution as your lowest common denominator.
  2. To Banner or Not to Banner- Your course homepage is like a welcome mat. Some are utilitarian, some are over the top and have too much going on and some are just blah. As a teacher you want your homepage to say come on in and I think having a nice visual, professional looking banner at the top of the page helps to set that tone. Banners that are 760 x 100 pixels are a common size used on various websites and that size works well for Canvas homepages too. You could go a little wider or taller maybe 840 x 120, but then you are pushing it. Going no wider than 760 allows for some wiggle room.
  3. Teacher Presence-  Adding a teacher's picture to your homepage with some contact information is a great way to communicate that there is a caring, passionate and approachable human being here to help you learn. To do this,  I settled on 140px wide as a good size and wanted that to look like it was right aligned to the banner image at the top of the homepage. This turned out to be tricky. Since you're not using tables and the page can be much wider than the banner image, I found that the picture was not really lining up well and looked out of sorts way over to the right or left. Ultimately, I setting the div width for the div that preceded the picture to a maximum fixed amount of pixels and discovered that this worked pretty well.
  4. Breaking Buttons- Originally I was planning on using HTML generated buttons using CSS properties found in the Canvas Style Guide. However, David Lyons who works at Instructure cautioned us not to rely on style guide elements in the RIch Content Editor Areas of Canvas. So there was that to consider, and the buttons made this just don't have enough pizzaz for my tastes. Therefore, I used some icons from Google's Material Icons Project and one of my favorite programs OmniGraffle - diagramming and graphic design for Mac, iPhone, and iPad to break with the traditional buttons and make some buttons that pop.
  5. Blurb Space- When you walk into a teacher's physical classroom 90% of the time you'll notice that they have a little message or important items written on one of their whiteboards. In Canvas we have announcements that can help with this as well as messaging but I still think homepages should have a blurb space. This is a small area that you can add a quick and timely message to and point out a few key things your students need to pay attention to. When designing your blurb space you want to increase the odds the it will actually get read and not glossed over so consider how Size Matters: Balancing Line Length And Font Size In Responsive Web Design. Is your font large enough? Are you lines 45-75 characters long?
  6. Share- If you have any suggestions or any homepages without tables you'd like to share, please add them to this post.


Update: I've included a new version (v2) that lines up as 3 columns on most desktop/laptops and has the buttons aligned vertically going down the left side of the page. I think that is my favorite of the two, but I go back and forth.


v1: Laptop (WXGA 1366 x 768)

v1: Phone 6 (Mobile Browser)

v1: iPhone 6 (Mobile App)


v2: Laptop (WXGA 1366 x 768)

v2: Phone 6 (Mobile Browser)

v2: iPhone 6 (Mobile App)


Source Code:

Canvas Homepage HTML ERWC - Google Docs (shared so anyone with link can make comments on code)

This tutorial will go over how to embed videos, lessons and other information, from sources such as YouTube, Quizlet, and Khan Academy into your course from the Public Resources LTI. While you can get an LTI for each of these sources individually, the Public Resources LTI is useful for grouping them in one place.


Start by going to the page you want to embed the information and get into Edit mode.

Now that we are in the Rich Content Editor, click on the "More External Tools" button, indicated by the blue “V”

Note: This only applies if you have several other LTI's in the Rich Text Editor. If not you will see the icon in the toolbar.

Next, in the drop down options that appear, select “Public Resources”

This brings up the options of content to embed which includes: YouTube, Vimeo, SchoolTube, Khan Academy, and Quizlet


Click on what client you would like to embed content from (For this tutorial we will use YouTube as an example.)


Now you are able to search for content that you would like to embed using the search bar

Once you have found the correct content, select the drop down Embed menu


This gives you a few different options for embedding the content

  • Return Link:   Provides a link back to the original site, with a small size video.
  • Embed Small:  Embeds a small video (320px by 240px)
  • Embed Medium:  Embeds a Medium video (640px by 480px)
  • Embed Large:  Embeds a Large video (800px by 600px)


Below is an example of what the Return Link and Embed Small content look like in the Rich Content Editor

Once you have the content where you like in the page click Save


Below is an example of what the Return Link and Small Embed look like after you have saved

Congrats! You have now embedded a YouTube video into your page.


Kona Jones created this awesome document in CanvasLIVE : it provides extensive guidance on how best to utilize Canvas quiz settings to maximize the integrity and security of assessing students with quizzes. The document explains how to randomize questions, set appropriate time limits, display one question at a time, and more. Instructional Designers can design these settings into quizzes as appropriate for the use case of a particular course.


Here's the link to Kona's document: Quiz Settings to Maximize Security


After reading the document, can you describe your own experience with these settings and suggest others that might enhance quiz security?

Filter Blog

By date: By tag: