Designing in the Canvas Rich Content Editor
Keeping it Simple
Let's start by taking a look at some of the simple design tools we can use in the Canvas Rich Content Editor.
Text Styles
The first step in creating readable content pages is just to keep things simple. What I mean by this is to use the text styles that are already built into Canvas. When composing content for your pages, avoid doing any formatting while writing. Whether you compose in Canvas or use a writing specific tool like Word, enter your text as plain text to start with, and then use the text styles tool on the right side of the toolbar to designate what is Paragraph text, and what are Level 2, 3, and 4 headers. Doing this leaves the primary styling work to Canvas engineers. They have already designated fonts, sizes, and spacing to make your pages look clean and have a consistent look from page to page. Using these text styles also make your pages more accessible as it allows all students including those using screen readers to understand the structure of the page, and easily move through and find the content they're looking for.
Group Like Items Together
Proximity on the page shows students that information is related, or is included in a category.
This can be done by using
- clear header styles as mentioned above
- using tables for showing data in context, or
- ordered or bulleted lists to show items in a category.
Bulleted lists have gotten a bad name in the context of Powerpoint slides, but for writing text-based documents they are a great way to group information together. Grouping makes information easier to find and process. This helps give your document shape and incorporates white space as well. Even without reading the words, in the figure below you can see how the shape and grouping of the text on the right can show the structure of the content, as compared to the paragraph block on the left.
Using a Photo or Image
Use pictures, charts, or other graphics to provide context or examples of the material that you're presenting in your page. Try to choose images that have no background or a white background. These will sit cleanly on your white page. Don't let your images break a line of text. Either center the image above or below the corresponding paragraph (usually below) or float the image to the right, allowing the text to flow around the image. (See examples above) Remember also that you're not limited to the images you find on the web. Use tools like screenshots and Powerpoint to create custom graphics for your course like the example below.
White Space
Just as we use proximity to associate like items together, use white space to separate items that need distinction. In the Canvas Rich Content Editor you can give an extra carriage return [enter key] between body text and the header for the next topic. You can also use Padding and Margin styles in the HTML that we will explore later to accomplish this.
Color or Text Styles for Emphasis
Contrasting text colors and styles can bring focus and emphasis to specific words or pieces of information on your page. But as we saw in the video, too many different colors and styles can overwhelm your reader to the point that nothing has emphasis. Choose a limited palette of colors or text styles for your course. Decide what each indicates in advance, and be consistent throughout your documents and pages. For example maybe use bold text for specific vocabulary words that students need to know, or a specific color for due dates or course tasks. Keep in mind that Canvas will automatically format hyperlinks blue with an underline, so don't use that to indicate something else. I like to find an intriguing photo to make a course banner, and then use that to establish a limited color palette, but colored text rarely looks good and using color as the only way to indicate importance is not accessible to students using screen readers or with color limtations, so be careful with this one. (More about this coming up.)
Click Next to get more control over your content pages by editing code in the HTML editor.