1. Page Design in Canvas

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

3. 1. Floating Images

4. 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

5. 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

6. 2. Using Headers

7. 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

8. 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

9. 3. Color and Styles

10. 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

11. 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

12. 4. Descriptive Links

13. 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

14. 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

15. 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.

16. 5. Proper Use of Tables

17. Advanced design

18. 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 ✓

19. 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>