Create an interesting (minimalist) home page
The layout of your Canvas home page (really) matters
In many Canvas courses, the home page is the first things students see when they start a new term or semester. A good page design will not only capture your student’s attention, but will navigate their eyes sequentially through the page content. You don’t want to leave your student’s attention to fate or chance, nor do you want page design that is banal an uninteresting.
Find a good banner graphic
My suggestion to instructional designers and course developers is to use relevant imagery when you can. You don’t want it too gaugy or distracting, but for the homepage I want it to have enough contrast and interesting elements to pull the student’s attention to it (and from the many other page elements, such as the global navigation, breadcrumb trail, browser bars/tabs/bookmarks, course navigation, and other resources on the page outside of your content). I want to grab the student’s attention, but I don’t want to keep it. I want them to graduate to the content below. I want to grab their hand and lead them to my content.
In the video I walk through my thought process for selecting a good image and how I crop it. I don’t confine myself to pre-determined dimensions, but rather I look for imagery that would look good cropped to fit my Canvas screen. So I want something very wide and short. It could be 800 pixels wide by 200 pixels tall, or 900 pixels wide by 225 pixels tall… If the image doesn’t look good cropped to those approximate ratios then I won’t use it for the banner. You can find good imagery on many sites:
canva.com [not Canvas]
There are many more, but those are a good shortlist. In my video, I used PowerPoint to crop my image, but you can use any photo editing platform. Once I have my image uploaded into Canvas, I like to go into the html editor </> and add a line of code to my image: style="width: 100%;". So the entire line of code may look something like:
<img style="width: 100%;" src="https://imgur.com/a/dSdWQev">
Buttons can clean up the page
In my example, I do have some course description text, but I don’t have too much. Rather, I link to places in Canvas and I have some buttons with popup text. I like the use of buttons because it allows me to have some control over the page. There is a bit of debate in the web development world with this approach. On one hand, when you allow certain page content to be accessed through things like accordion menus, tabs, buttons with popups or lightboxes, etc., then it can streamline the user experience and tidy up the page. On the other hand, do you really want to hide content from your user with the expectation that they will interact with the elements to reveal it? Some folks argue that all the content should be accessible without needing to be revealed. I say it’s your call, but if you use hyperlinks, buttons, or other interactions to reveal content then you want to ensure that it is intuitive that the user can interact with it.
In Canvas, buttons are very easy to create using some simple html. It can be as simple as:
<a class="btn-large btn-info btn" href="URL">Text inside button</a>
Replace URL between the quotation marks with the link where you want them to go when they click on it, and then choose the text you want inside the button. The button will expand with the text, but I like to keep mine to one or maybe two words.
Putting it all together
Grab the following code and paste it into you Canvas course or sandbox. There are elements that you will need to replace. Each URL will need to be directed to a webpage or internet asset (e.g. the URL to an image). These URLs can link within Canvas or you can link to external sites or images as well.
<p> <img style="width: 100%;" src="URL"/> </p> <p><strong>Prerequisite:</strong> IO512</p> <p>Portland chia vice typewriter humblebrag sriracha. Venmo bitters migas activated charcoal cray cred hoodie man bun try-hard intelligentsia selvage. Scenester venmo, green juice keytar pork belly artisan health goth butcher chicharrones snackwave sustainable. Paleo, mlkshk organic +1 seitan keytar live-edge. Vegan authentic squid pop-up pug asymmetrical raclette leggings. Gochujang brooklyn yuccie pug readymade, succulents selvage occupy ramps chambray. Art party freegan ramps.<p> </p> <p> </p> <p style="text-align: center;"> <a class="btn-large btn-info btn" style="margin: 4px;" href="URL to announcements">Start here!</a> <a class="btn-large btn-info btn" style="margin: 4px;" href="#prof">Professor</a> <a class="btn-large btn-info btn" style="margin: 4px;" href="URL to syllabus">Syllabus</a> <a class="btn-large btn-info btn" style="margin: 4px;" href="URL to modules">Modules</a> <a class="btn-large btn-info btn" style="margin: 4px;" href="#help">Help</a> </p> <p> </p> <p> </p> <p> </p> <div id="prof" class="enhanceable_content dialog" style="font-size: 14pt; margin: 10px;"> <p> <img style="display: block; margin-left: auto; margin-right: auto;" src="URL" width="150"/> </p> <p><strong>Sean Nufer</strong></p> <p><a href="mailto:sean@howtocanvas.com?body=Hello%20Professor.%20%20I%20just%20wanted%20to%20let%20you%20know%20that%20you%20are%20such%20a%20good%20professor%20and%20this%20is%20such%20a%20great%20class.%20%20Here%20is%20a%20long%20list%20of%20things%20I%20like%20about%20this%20course%3A%0A%0A1.%20" target="_blank" rel="noopener"><strong>sean@howtocanvas.com</strong></a> </p> </div> <div id="help" class="enhanceable_content dialog" style="font-size: 14pt; margin: 10px;"> <p><strong>To get help with Canvas at any time, click the Help icon along the lefthand edge of the window:</strong></p> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="URL" alt="A question mark within a circle, above the word 'Help'" width="80px"/></p> <p><span style="font-size: 12pt;">You can also search the <a href="https://community.canvaslms.com/docs/DOC-4121">Canvas Student Guide</a>, or go to this course's <a title="Technology Requirements" href="URL">Technology Requirements page</a>.</span> </p> </div>
Once you have the code and all the URLs in place, try swapping out the elements for your own content. You may want to create additional buttons for students to access your institutional library or course course/program learning outcomes or objectives. You may want to decorate the text and put it in a box, such as:
<p style="border: 1px dotted black; margin: 15px; padding: 10px 20px; background-color: #fdf5e6; font-size: 10pt; text-align: justify;">
And of course you’ll want to search for unique a creative imagery for your pages which both express yourself and reflect the nature and content of your course. Feel free to visit my sandbox course to see my homepage:
https://canvas.instructure.com/courses/2560052/pages/interesting-minimalist-home-page
Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas
And follow us on social media
Twitter: https://twitter.com/HowToCanvas
Instagram: https://www.instagram.com/HowToCanvas
Facebook: https://www.facebook.com/HowToCanvas