Page Design in Canvas

“ Some people think design means how it looks. But of course if you dig deeper, it’s really how it works. ” – Steve Jobs

1. Floating Images

Why float images? The alignment of images defaults to be inline with the rest of the page content This can disrupt the flow of the page making it very linear Often there is an excessive amount of white space It can look unappealing or unprofessional excess white space

How to Float an Image in Canvas On the Edit page, select the image to be floated Select “Align left” or “Align right” to float the image accordingly This will put the image either to the left or right of your text Use the image handles to resize the image if needed image handle

2. Using Headers

Why Use Headers? headers Headers separate pages into sections and split up content The correct way to design a page in HTML involves headers NOT a bigger or bolded font Easier for skimming a page Accessibility – screen readers can recognize and hop from header to header on a page

Adding Headers in Canvas On the Edit page, highlight the header text Select the paragraph/header dropdown menu Choose a “Header” option based on the header level Header can be bolded or underlined if needed

3. Color and Styles

What is wrong with this page? Neon colors on a white background are hard to read Too many different colors Red on green and black on red are hard to read, whether or not the reader is color blind Centered paragraphs are not recommended Image breaks the flow of text and is not relevant to the page

Good Page Style Practices Important content should be clear and quickly draw viewer attention Content such as headers, images, and videos should be helpful and relevant Paragraphs should be uniform (color, size, face) and aligned to the left Images/videos should be to the left, right, above, or below text, NOT in the middle of a paragraph

4. Descriptive Links

Which link would you rather click on? X or ✓ A long URL can result in uncertainty or intimidation A hyperlink in the form of descriptive text helps the reader to know where the link is going to take them Not to mention it looks more clean and professional Providing a link to a page is more convenient than mentioning the page and assuming users will know how to get there themselves

Creating an External Hyperlink on a Page 2. Click the “Link to URL” button 4. Click the “Insert Link” button 1. Highlight text to be linked 3. Type or paste the link in the box that pops up

Creating an Internal Hyperlink on a Page 2. Expand the appropriate section in the “Links” tab 1. Highlight text to be linked 3. Select the appropriate link within your course Note: Skipping to step 3 will also insert a link of the same name if no text is highlighted.

5. Proper Use of Tables

Advanced design

X ✓ Proper Use of Tables Do NOT use tables for your page layout Only use tables for tabular data Accessibility – tables are not friendly for screen readers Tables can also cause issues with load speed, make your page look off in certain browsers, and are semantically incorrect for layouts X ✓

Use a Floated <Div> Instead Much more friendly for users that use screen readers Conveniently collapses into a single column on mobile devices Search for ‘floated div’ in Canvas Commons to get a template Anything in a <div> can be floated to the side (text, feeds, etc.) Floated <div>