banner explaining hierarchy

NAVIGATING PAGES IN CANVAS

Unless you are using anchors (which is possible using HTML (Links to an external site.)), scrolling with be the only navigation your users will experience within your Canvas pages. There are still a plenty of steps you can take in order to create a clean look and feel and organized hierarchy to your Canvas pages. Fear not, the basic tools are already available for you to use.

Canvas Basics

Not once was HTML entered while making this particular page. The tool bar in the rich content editor provided everything I needed, including:

Basic Font Sizes
Bold & Italics
Bulleted list options
A chain link icon for adding hyperlinks
The "Insert Content Into Box" for the addition of images

Web Page Elements

While most of this module deals with basic text layout, placement of images and graphics, and use of color and fonts also make a significant difference.

Color: Implement a unified color scheme. Consider how much attention your colors should attract and the emotion you want them to convey.
Space: Give your elements space and room to breathe. Respect backgrounds and “white space.” This helps viewers focus on key items and content (e.g. Google and Apple)
Images & Graphics: Pick a focal point and tell the eyes where they should go. When using banners, use a center dominance. Make sure there is balance between images and text. Images help offset having too much text, but they should not take the place of your content's mission.

Above the Fold

You have hopefully noticed that most of the banner images leading at the top of these web pages have a title directly below them and do not take up the entire screen. Resist the temptation for incredibly large images.

You will want to introduce the content on your page, enticing your users to scroll down. Also remember, in Canvas, the title you give a page upon creation appears at the top, aligned to the left. Banner images allow you to create a break between that and your first heading.

Layout of Content

There are a handful of simple tools to use in order to give your content a clean layout, making it easy on your readers to quickly to consume and digest information. These include, but are not limited to:

Tables

The best way to use tables in the rich content editor (Links to an external site.) within Canvas is for the tiled homepage buttons you will see consistently throughout sample Canvas courses (including this one).

Tables work best with images. When you move into heavier use of text, they will present problems to even more experienced programmers.

Alignment

Given the placement of features in Canvas, a normal left alignment is recommended. Indenting sections of the page can be useful as well.

Center alignment can provide a great look to your page, but use it sparingly and with caution. Depending on the size of your screen, paragraphs may be limited to a line or two, making center alignment appear awkwardly.

Avoid center alignment and centered text. Things can go wrong in a hurry as bulleted lists fail to align (also, certain media features in Canvas only align to the left.

A compromise could be to use center alignment for certain images and media, but pay attention to size.

HTML

There's no argument that this:

Read this excellent article on nanotechnology (Links to an external site.).

Looks better than this:

http://www.nanowerk.com/spotlight/spotid=42713.php (Links to an external site.)

It can't be recommended enough that you follow simple hyperlinking standards when linking to URLs, files, or course links (in Canvas, it's best to leave the default setting of URL's to open in a new window in order to avoid error messages).

WHITE SPACE AT THE FOOTER

Hit the return key after your last line of text or graphic at the bottom of your page. Canvas does not have a built in margin at the bottom when displayed.

HOW DO I ADD HYPERLINKS IN CANVAS?