[ARCHIVED] Template for Canvas Homepage?

[franke]

Now that the Canvas Announcements feature shows announcements on the home page (which we love by the way!), we're starting to rethink our old home page template that we use in every course.  I was wondering if anyone had any new designs they are using that they'd be willing to share?  I've attached a demo of what we currently do.  We're looking to have the instructor's contact info somewhere on the page as well, but we'd like to keep the course navigation box.  stefaniesanders your blog post (https://community.canvaslms.com/groups/designers/blog/2015/04/16/creating-an-inviting-course-home-pa... ) helped us immensely coming up with ideas for the home page in the past.  Are you using Announcements feature at all now? Does anyone have anything that they are using with success? 

[jlstalke · Accepted solution]

We also have a course home page template and I am excited to see what others are doing.  Here is our template:

[mmitchell]

Thank you Veronica! I don't have them on Commons but I do have a CodePen with all of the CSS and placeholder HTML if that's helpful. You can find it here.

[canvas18]

Mike,

Any chance I could get you to share the responsive HTML for the Art1010 homepage?  Making our templates responsive is on my list of things to do...and you will help me look like a master panda!

v/r

 MJH

[mmitchell]

Hey Mike,

I do have a CodePen with the Art 1010 homepage code. You can check it out here.

It's a flexbox element with a defined width so I don't have to worry too much about media queries.

Hope this helps!

Mike

[dholton]

We have a basic Canvas starter kit that faculty can use that avoids tables since they are tricky for most to use and inaccessible by default.  You can search Commons for 'Valencia Sample Course' to see that and some other sample courses, and preview it here: Valencia Sample Course - Weekly Modules 

Our Canvas training course is adapted from Kona Jones and others.  A screenshot is below and you can preview it here: Canvas Essentials Sandbox 

Sticking with the 'large panda' theme: 

[kbink]

Ours is less fancy but also generally unbreakable and easy for faculty to edit.  You can find it on the commons as CBS Home Page Template.

We are converting from Moodle and have been using this to create a landing page for the Canvas version of existing course site.  I link the name back to the faculty webpage and the email address autolinks.  The commons version also contains instructor information in a first module and standard course settings that include announcements on the home page set to display one.  We have academic techs doing the initial conversions from Moodle, so faculty first see this with a banner and all the links already established.  We also set up this page for instructors that want to build their own.  There are no countless variations on this basic starting point.

[traciebosket]

Hi  @kbink ‌,

Do you know what the dimensions of you banner are? I am trying to make a banner that fills the whole width of the screen, but when I do that, the height gets too large. 

[kbink]

It is the soundcloud banner from canva.com.  2480 x 520 px.  Also I cheat and go into the html after adding it and change the width to 100%.  That will make it expand an contract to fit the size of the screen.

Kalli

[traciebosket]

Thanks Kalli!

[miranda_marshal]

Here's what I use in my Intermediate/Advanced ESL class.  It makes it easy for the students to navigate pieces they need and the visual helps.

For our TEAS Math class, we need a new design.  Any ideas?  This one is plain...

[debra_russell]

Here's an example of the Home page of one of our courses.

I would like to have the option to make the page title visible or not, while still be accessible by e Readers, because sometimes it is not required.

This links to a number of modules.

[jonesn16]

We generally encourage faculty to use Modules as the home page for the course. If you're using weeks or topics to divide your course into chunks of content, we've found Modules to be the most effective home page. It lets students get in, do what they need to, and get out as quickly as possible, because that's what they'll try to do anyway. It also helps provide a quick overview of what's happening that week. Most of what people create links for on other home pages already exist in Canvas, and are generally more efficient. For example, making a syllabus button on your home page is less efficient than the built-in Syllabus course navigation. The course navigation is available from every page, while the syllabus button on the home page is only available by clicking Home first. There are plenty of opportunities to create engaging, visually appealing learning moments in the rest of the course while keeping the navigation simple and flat.

[rlbrown21]

As a graphic designer I want to have a nice looking informational homepage. 

But the reality of Canvas is, many of my students have NEVER seen my home page.  If they use the ToDo list, they bypass the home page AND modules, the same goes for the new list view for the dashboard.

Canvas gives us tools as instructors to make all this "cool" stuff, and organize our classes in meaningful ways, then gives students the tools to bypass ALL of it.  

At this point I am not spending any more time working on my hope page for my class and am tempted to go to modules only as well.

[jonesn16]

My degree is in graphic design, so when I first started at instructional design I had the same starting point, it sounds like. I would go all out making banners and buttons and this and that. The mental shift that happened for me was from trying to make a course that was aesthetic or cool to a course that was, before anything else, effective at its primary task - connecting students to content. Besides, there are lots of ways to make a visually appealing course that doesn't make it more inefficient for students to navigate. We can still make cool images that go on the assignments themselves or in announcements. Any Page can become a visually rich experience. And Canvas supports a decent amount of HTML if someone wants to go there.

Speaking from the other side, I'm currently a grad student finishing up a MS in instructional systems design. One of my instructors has this 3 x 3 grid of photos and illustrations, each of them a button to a different module. As a student, I ignore it. I'm not going to waste any time finding the correct button to click when I know I can always go to Modules, which will always be in the same place in the sidebar, and go directly to the thing I need to do.

[Stef_retired]

As both a teacher and a student, I have been involved in courses that switch the home page from a custom design to the Modules list usually no later than the end of Week 2 (preceded by an announcement stating such). I rather like the idea.

[debra_russell]

I'm a graphic designer too. With the cohort of student we have, we find using a clear visual pathway from a homepage is the best way. If we don't do this, there is some confusion. It follows a pathway they are used to from using our previous LMS. Providing consistency makes it work well and we are working to strengthen that. 

[Bobby2]

I totally agree  @debra_russell  that consistency really helps. From there it is a breath of fresh air when a teacher uses the LMS to really enrich the learning experiences with the students. Hopefully colleagues could share ideas and build on/create consistencies across your school. After all you and your colleagues know your cohort of students best. 

[debra_russell]

Thanks Bobby. I find the Modules display is not that inviting particularly for younger students or for some of our students who have difficulties navigating online.

[Bobby2]

I'm with you on that one  @debra_russell !

Let's get together and share some ideas. 

[chalupa]

I have created an interactive home page.  Students can navigate all the important items from that one page just by clickling on the boxes on the home page.  They never have to search for anything.

[kate_mcdill]

Emily,

I would love to have a copy of the template shown in the Canvas Community Update dated 4/26/18, and shows  a course home page for ACT-540-DEV-2016. I looked in the Commons and was unable to locate it.

Thank you in advance.

Kate McDill

[kate_mcdill]

I meant to include my email address: kate.mcdill@presidio.edu

[franke]

Hi Kate,

Do you know what school had this template home page?  I don't think it was ours so I can't get you the copy.  Maybe one of the Canvas Coaches can help you get this.   @kona ‌ do you know?  Thanks!

-Emily

[awilliams]

There's some hot new homepage templates located at Teacher Appreciation 2018 | Home Page Templates. Check them out!

[mhegg1]

Sorry to sound like an idiot, but how do I add an announcements banner to the home page. Somehow I missed it and I also can't find it when I search for it now. TIA

[sharon_kitching]

In your site, go to 'settings', go to bottom of page, under 'More options' is the option to turn announcements on. Will appear on whatever is nominated as front page. 2 is a good number. 

[mhegg1]

Thanks so much! This is great!

[Bobby2]

I love how different all of these are, yet all so effective. Thanks for the discussion starter  @franke 

Some other examples got shared here. https://community.canvaslms.com/groups/k12/blog/2018/04/08/primaryelementary-home-pages-examples-ple... 

[tom_gibbons]

I did a workshop a few months back talking about homepage options (not just the pages front page). You can find a recording of the workshop here. The next pages in the module provide a few simple models that instructors can do themselves, and include txt files of the html. There's a simple list, a table with buttons, divs with buttons, and a large video tour. 

[timothy_maw]

Here is an example of our homepage template. It is catered more to our needs as a competency based institution and gives the students a lot of information they may need in their current course or during their time at the college in their specific program. Each button links to the various needs of the student from a link to instructor info for all instructors who teach in that program to a list of digital resources students may need as well as the syllabus for the course.

[heatherlbrown77]

What is on the course navigation menu in this course? Just curious.

[franke]

Thanks for all the examples everyone has shown on this page!  Our team just went back through and looked at everything and it was very helpful.  Attached is one of our designs we might go with.  Has anyone found an easy way to link to the Instructor's info (and photo)?

[heatherlbrown77]

I create a page for the instructor's info and then link one of my buttons to that page. Here is an example:

[franke]

Thanks Heather!  That makes sense to link to a seperate page.  I think we might add a button that leads to the Instructor's Bio, but show their contact info on the home page.  Trying to figure out how to bring in the image too, which we might have to run a script to do this.

[ysmalls]

This is the homepage of the Arc intro course I created for my district.

[gailc]

Hi Yaddira,

Is it possible to view/have access to this course?

Thank you,

Gail

[oltsupport]

Here is a homepage we worked on for our First Year Composition course.

[vrs07nl]

Our programme home page   ( banner using ppt images, buttons and css code for top banner auto colouring)

and our module home page  (originally top level module info in tabs across scene but now prefer this design using navigation block on right with static links to related pages that navigate back to module home page as displays similarly in canvas apps) 

[qusay_mahmoud]

Hi, we're migrating to Canvas and I am experimenting in my sandbox with a home page for one of the courses I will be teaching in Fall 2020. I created the following page, which looks good on desktop but much better on mobile -- love how Canvas adjusts the format for mobile displays.

[s_j_beale]

Any new or updated designs to share since the last post? We are currently looking into this but for reasons of accessibility and making things easy for staff to use, it can be quite tricky.

Curious to hear from you all.

Thanks.

Steve