Creating an inviting course home page

[Stef_retired]

The course home page is a critical navigation waypoint for students. As course designers, we can choose from numerous style ideas to make the course home page inviting and intuitive for our students.

This is a stripped-down version of a course home page I'm currently using.

I created this home page using a table, and I used the "btn btn-info btn-large" attribute for the buttons.

The functionality of this home page style is compatible with mobile devices, but the buttons themselves won't appear in the app. This is how the same home page looks in the Canvas App on an iPad.

The image below shows examples of other button styles.

The button code is inherently versatile. For example, using this code:

<p><a class="btn-large btn-block btn btn-danger btn" style="width: 100%;" title="Click here to view the Course Announcements" href="https://community.canvaslms.com/courses/[insert-course-number]/announcements" target="_blank"><strong>Course Announcements</strong></a></p>

...I can create a clickable button across the top of my home page to direct students to announcements:

At many schools, teachers are tasked with creating their courses and course home pages. I'm currently training a cohort of teachers, and more often than not, when they create their syllabus page, they simply insert a link to their own syllabus file at the top of the page. The result is neither pretty nor inviting--so I've been teaching them the method of having the syllabus file auto-open for inline preview.

How do you create your course home pages? Do you have a standard template that is used across all of the courses at your institution? Do instructional designers create the pages, or are your teachers given instructions on how to create their own, and what they must include on them?

[Note: Need help with HTML? Read snugent​'s awesome blog, Rich Content Editor HTML Cheatsheet]

[scottdennis]

Stay tuned.... 

[Chris_Hofer]

Once the URLs are replaced with URLs from your own course, if you import this content into another course, do you have to update all those URLs in the second course?  Or will Canvas change them automagically?

[awilliams]

I haven't had 100% success with this, there are a couple scenarios I haven't pinned down where the links don't update as expected, but for the most part Canvas does a fantastic job of updating links to different items within a course on an import.

[Stef_retired]

Like awilliams​, I'd like to do additional testing on this--but my preliminary take is that links that are inserted via the Insert Content panel will update upon import, whereas page links that are copied and pasted as absolute URLs will not update. My MO is to check every link upon every import just to be sure, and I enlist my students in the process by putting a bright red banner at the bottom of pages with numerous links: "If a link on this or any page does not work, please let me know!"​

Again, my theory about the Insert Content method needs more data, and I'll be working on it.

[scottdennis]

I wonder if anyone has ever put one or more intentionally broken links somewhere in their course and then incentivized students to be the first to find them.  That might be a fun way to get students to explore the course and if they end up finding unintentionally broken links in the process - so much the better.

[kmeeusen]

Scott:

That is a great idea for an orientation activity. I always thank my students when they find them, but how cool to incentivize them by offering a couple extra credit points. By engaging in this activity not only are the students encouraged to explore their new classroom, but they are also helping their classmates and themselves by assuring that content is accessible.

Kelley.

[Stef_retired]

 @scottdennis ​, love that idea!

[Chris_Hofer]

So I have a question...simply because I'm not much of a code guy.  In the example screen shot of the Style Guide you've given here, Deactivated user​, you said we could copy the code.  So I did that in my own sandbox course using this code:

<button class="Button Button--primary" type="button">Hey, I have a blue button!</button> 

However, after saving my page, that only resulted in text on the page...not a blue button as expected.

Looking at some of the code from one of stefaniesanders​​ examples above, her code to get the same button would be a bit different:

<a class="Button Button--primary">Hey, I have a blue button!</a>

When I put this code into my sandbox course page, I get the blue button I was expecting to see.

Am I missing something here?

[erinbreaux]

Stephanie Sanders,

I don't know how to ping you but I would love the Word document with the HTML format for the course page above. Can you message me for my email?

[biray]

If you want to ping Stefanie, simply type @ and then start typing her First name_Last name and a list will pop up, select the right name from the list. stefaniesanders​

[Stef_retired]

erinbreaux​, I sent you a direct message. Thanks,  @biray , for pinging me on her behalf. 

[erinbreaux]

Can you email it to me? erin.breaux@solacc.edu

[Stef_retired]

erinbreaux​, done! Please feel free to post the results of your experimentation with the code here.

[erinbreaux]

stefaniesanders​

So I ended up searching for different templates, researching some HTML, finding my own visuals, and changing things back and forth. Here is the result and I am VERY happy!! I am feeling like a Canvas goddess right about now

[Stef_retired]

erinbreaux​, this is gorgeous!

"Animals in Literature"--can I take your course?

[Stef_retired]

erinbreaux​, I also like how you incorporated  @scottdennis ​'s idea about enlisting your students in a joint effort to identify, report, and repair broken links.

[scottdennis]

Cool!

[Stef_retired]

...and those of you who are coming to this site looking for additional clarity on how to create buttons on your Canvas pages will undoubtedly benefit from this discussion: Buttons on Canvas Pages

[GideonWilliams]

​This is great work. The personal touch is clearly evident and looks wonderfully engaging

[rgibson1]

I started using graphical headers built using Canva. (Thanks to the presentation at InstructureCon.) I use them on every page in my course design.

[kmeeusen]

Hey, Rob!

For those who did not attend this session, could you describe how this is done? I can thinks of several methods, but am curious about this one.

Thanks!

[rgibson1]

Do you mean how I used Canva?

[awilliams]

I think this is the session rgibson1​ was referring to. ​

[rgibson1]

Yes, that was the session. The Canva tool she mentioned has been particularly good.

[kmeeusen]

Yep, that's what I mean.

[kmeeusen]

Thanks, Adam!

I will go check out the video recording of the session.

[rgibson1]

She talks about Canva at around 24:00

[jbuchner]

I think this is much better than your example. My class home pages, when I am in charge, are tilted much more towards giving them information not links. They've already gotten to the homepage, why make them click one more time to get to the stuff they need right way? (My page is most often a resource for material they'll need at the next class meeting.)

[Stef_retired]

 @jbuchner ​, your design approach makes a lot of sense, especially if your focus is going to be on upcoming class meetings. I only teach fully online courses that are not strictly paced, so different students will need to access different resources at different times. Also, our school requires us to provide links to specific information on the course home page, hence the need for the resource links.

[Stef_retired]

Links to the InstructureCon 2015 presentation by  @mlattke ​ and Deactivated user​:

(video, 27:28)

Templates, Themes, and All That Jazz! (contains links to resources used in the presentation)

[mlattke]

Thanks for the shoutout stefaniesanders​!

Our solution in the prezo combines the need for behind the scenes styling with the desire to not have teachers edit any HTML.  It's kind of an interesting approach, but not foolproof.  It's the best we've found so far though. 

[bgibson]

I've "played" with WordPress alot, and I like the formatting & ease of navigation & the extra plugin/widget functionality.  Most WP themes are already responsive.   I didn't have to learn a new tool.  I just used an iframe to embed a WP site as my home page within a course.  Note how WP and Canvas show their responsiveness between these two images:

[bgibson]

I was just saying this under the New UI Group.

[canvas_admin]

At our institution, Instructional Designers create the course homepage which uses the same basic template. Here's an example of a current home page:

However, in conjunction with the new UI, we are going to be using  @kenneth_larsen ​'s design tools, KennethWare​, to change our template to this:

We the new template, each of our online courses (~40) is going to have its own color scheme and image, which we are going to tie to that course's syllabus and course notebook, as well as trying to tie it to the dashboard panel as well.  This way, each course, is going to have its own unique packaging.  I feel like this is part of a quantum leap forward for our design.  We definitely couldn't do it without KennethWare.

[kmeeusen]

That is very nice, Bill!

Clean, neat and as you said 0 responsive!

[kmeeusen]

Mark:

I have got to make time to play with KennethWare.

One of my barriers is that we do not control our global script, it would have to be installed on our test instance, and that's wiped regularly so I would have to block out the time to test and play before it went away.

Soon!

[canvas_admin]

 @kmeeusen ,

Our main IT guy who is in Orlando used to control our CSS and it was only for branding.   I convinced him to set me up with a virtual machine so that I could take control of our CSS/JS.   One of my key points was that I wouldn't have to keep on bugging him via e-mail/phone to update the file every time I had code that I wanted to test and/or implement.     

It took some work with getting a web server set up and getting the SSL cert for our institutional website to work, but we're here and now we can take advantage of KennethWare.

With the new UI, you can now at least upload CSS and JS which means you don't have to host it yourself, although any files referenced would still need to be hosted somewhere.

[ted_curran]

Hi Stephanie (and everyone!)

I share your frustration with trying to get the Canvas WYSIWYG editor to support some of the more advanced UI features that are available to today's web designer. I know a thing or two about designing in HTML with CSS frameworks like Bootstrap and Foundation, and I have been experimenting with using Bootstrap's classes in the Canvas WYSIWYG to get nicer elements.

I notice in your button example above that the syntax is the same as Bootstrap's, meaning that there is some Bootstrap-like CSS being loaded as part of Canvas' default UI.

I've been trying to design HTML in Bootstrap and then pasting into the Canvas WYSIWYG, which produces very hit-or-miss results. I was able to add a "well" style to a page I'm working on, and I got a very nice boxy effect just using colored divs. 

Ideally, I'd like to figure out how to use a CSS grid system in the Pages tool so I could make better use of the width of the screen, using columns and rows with the same flexibility Bootstrap allows. I'd also love to be able to load FontAwesome icons into my designs -- that's next on my list.

Has anyone else looked into this further than I have? The last time I designed a course in Canvas, I ended up creating some hacky HTML page templates using inline styles. As a matter of fact, the code snippets are online if anyone can get some use out of them. I just wish there were a more modern way to do this kind of work in Canvas (short of just designing outside of the LMS and uploading pages).

Thanks, and happy designing!
Ted

[Stef_retired]

 @ted_curran ​, those snippets (in Evernote link) are neat! Thanks for sharing.

[cwendt]

Glad I found this group (hi, Stefanie). I've really been looking to upgrade my "looks" from last year. I have both plain, tacky ones and attractive ones. For example, here's something I did for my freshmen last year, in pretty much of a hurry (no html). What I *really* want to do is create something that looks like a newsletter.

And no, we don't get much (any?) training on design—just "here's how to add text/pics/a page/a quiz". LOL

[cwendt]

And we get no templates, even to use optionally. Maybe that's something I could do  . . . has anyone done their school's template?

[bgibson]

Another idea, is to use Expression Web 4 (free at MS) Download Microsoft Expression Web 4 (Free Version) from Official Microsoft Download Center​

and find some already existing "free" templates to modify.  The above template wasn't responsive, but I found another that was "mobile friendly".  You would be developing your pages outside of Canvas, and then zipping them up and uploading and having Canvas unpack them, then point to the start page.

[GideonWilliams]

Bill, this is amazing. How have you managed to add in images to the courses - genius!

[cwendt]

We are using Macs and aren't allowed to run other platforms....anything like this for Macs, pray tell?

[cwendt]

Nice. I've played with WP, too. Can you point me to some info on how to do this, Bill?

[ted_curran]

I'm not sure what your level of expertise or skill is, but here's the basic gist:

Step 1: Set up a Wordpress site wherever you want  -- you can get a free one at Wordpress.com or use a self-hosted WP site.

Step 2: Fill it out so it says what you want. Put a theme on it so it looks nice.

Step 3: Make a note of your blog's URL.

Step 4:  Make a Page in your Canvas course. When you get to the WYSIWYG text editor, switch it over to "HTML view" mode

Step 5: paste this HTML code snippet into your page. It uses an iframe to show another website (your blog) through a window in the page.

Step 6: change the URL in bold to the URL from your blog that you noted down in Step 3 above.

Step 7: Switch back to the visual viewer to admire your handiwork. Bask in the admiration of your peers and be happy ever after.

[ted_curran]

MS Expression Web is just a visual HTML editor -- there are many of these tools on Mac for all different skill levels. I like Pingendo.com's simple approach to building nice modern looking pages using Bootstrap elements. Atom editor is a good code editor for those who are comfortable working with HTML & CSS. OF course a lot of people like Dreamweaver but I think it's overkill and overpriced.

[cwendt]

I snagged a page off of a WP blog I no longer use. It worked . . .  sorta. Everything came through, but it gives the 404 error message instead of whatever I had typed in there.

.

[kmeeusen]

erinbreaux​:

Your home page is beautiful!

Great job!

[cwendt]

This might be a basic question with an easy answer, but I don't know much about coding or HTML. I found a site that has templates that can be downloaded, but is it possible to use one of these on Canvas? The site is here.

If someone can point me to a tutorial that would allow me to upload a template that is saved locally, that might do the trick. Or do I just upload it as a file? 😕  

I know there's hope for me!