[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:

[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:

[cathyw]

Can I ask how you created the template? or was it one that can be downloaded?

[jlstalke]

We actually made the page first.  Then I took a snip of it and pasted it into Word.  I then added the instructional arrows.

We wanted our students to have a familiar feel when they swapped from class to class and we wanted them to know where to find all of their teachers' contact information.

[Bobby2]

Brilliant idea  @jlstalke . I guess for K-12 it needs to be more image linked?

[s_j_beale]

Hi @jlstalke 

Thanks for sharing this design.

As with the others on here, just curious to see how staff handle amending the banner image and whether it is fully responsive in mobile devices/on the app?

Thanks,

Steve

[Shar · Accepted solution]

Hi Emily,

We also like the Front page announcements. Here's one of our front page designs that has a larger lesson navigation area than yours but the idea is the same. Each mini card leads to the specific week on the Modules page.

• About Course is sometimes called Start Here but either way leads to the Course Overview.
• Resources contains information about the syllabus and textbook.
• Study Hall Cafe is the pinned general discussion.
• Teaching Team contains the instructor contact information; when there is no TA, that link is called Instructor.

We've got some custom CSS involved suppressing the underlines on those links otherwise the whole page would show up too underlined.

Cheers - Shar

[tlesteves]

ishar-uw Is this available in the Commons?

[s_j_beale]

Hi @Shar 

This looks nice - just curious how the design performs on mobile devices or with any assistive technology?

Looks like it might use Bootstrap for the table design - if so, how do staff with no coding knowledge handle adapting/customising it?

Thanks for your input!

Steve

[Stef_retired]

 @franke , I'm not currently teaching. If I were, I'd join you in rethinking how I configure my course home page in light of the new announcements feature, because I have always used the Syllabus page as my course home page; currently, the announcements feature can only be used on a page of one's own design.

[awilliams]

We are using Certified Partner - Cidi Labs‌ Design Tools for our course design and template management. Here's an example of one of our courses that is using that as well as the new announcements on homepage feature.

[franke]

Thanks awilliamsI like this homepage design.  With the image, does that change depending on the course or do you always use the same one?  Never heard of Cidi Labs, will have to check them out.

[elearning]

This is a little late... but we have a selection of banners to pick from, have added ones that are specific to our area, and there is also an option to use whatever you like.

[awilliams]

Hey  @franke ‌. There is going to be a demo of Design Tools by Florida State and Embry-Riddle in just a little bit. Check it out over here and if you miss it there may be a recording. https://community.canvaslms.com/events/2465-partner-webinar-design-tools-introduction-featuring-flor... 

[jblumberg]

Hey Emily,

I can catch you up on CIDI labs.  You saw the early demos of Kennethware from Utah State... it has evolved into CIDI labs. Give me a call.

[traciebosket]

Hi awilliams‌,

Do you know how they did that transparent left side of the page? 

[awilliams]

Hey Tracie. I don't know much about how it was done, just it was some combination of CSS and JS. This was one of the provided themes that was available to choose from and not having to know the specifics of how any of it worked was part of the beauty of having that tool

[traciebosket]

You used something named "Design Tools"? Do you happen to have a link to it?

[Stef_retired]

traciebosket, here's the link my Google search unearthed: https://cidilabs.com/ 

[traciebosket]

Great, thanks Stefanie

[873179959]

@awilliams I love the look of this homepage example, with the links menu overlaying the Banner image. We have CIDI Design Tools, but I can't figure out how to recreate what you did there. Do you have a template in Commons or have a some tips on how to create something like that?

Thanks!

Chelsie 

[rmthomas]

I appreciated getting to see some of the designs from the reply posts. Also, I like the idea of linking from the Home (Front) page to a "about me" page.

[sonya_mcchristi]

We have repurposed the Syllabus tool to serve as our default home page which we apply to all newly created modules. It's pretty simple and generic, with a welcome message and a couple of buttons taking students into the 'Units / Modules' tool and a pre-prepared page about study skills.

[Boekenoogen]

Here is a template that we use in our college...

[franke]

Thanks for the example  @jrboek ‌.  Do you use the same images in each course for each unit?  Where is the Instructor contact info/Syllabus?

[Boekenoogen]

We use different images for the different courses and different colors for our different degree programs. The instructor information is in the course menu.  I will add an image to this site later.  

[rebecca_lambert]

Nicely done. This template looks fantastic. I’m a Canvas ‘Newb’ but would love to test something similiar. Where do you put announcements? 

[natalie_norton1]

Each of our depts has their own template for their courses, with slight variations of colour/content but many have opted for variations on the design below. We use the syllabus page as the homepage, with tables, as this seems to resize better in the app and we know a lot of students are using the app extensively. Each course will replace the homepage image, which will also match the dashboard image. (Should explain in UK module = programme unit, so each course is a 'module'!)

eg1 in web and app

              

eg2 

[Shar]

Hi Natalie,

I like the fresh colors and the graphic layout for your links. Does the Weekly Resources link lead to the Canvas Modules page? And I'm guessing as the term progresses, all of the upcoming assignments are first in the Course Summary list?

Cheers - Shar

[natalie_norton1]

Hi - yes, exactly that! 'Weekly resources' links to the modules page (which has templated Week 1, week 2 etc blocks) and  'general resources' also links to a module block. Assignment due dates show in the course summary. We use images for all our buttons to make sure they can be seen in the app.

[canvas18]

Lots of great examples here showing announcements ABOVE the HTML field, so this may be an odd question....

How would I adjust code (css?) to move the announcements page BELOW the HTML field?  I know it isn't the optimal place, but I'm looking to fill a specific requirement.

[mmitchell]

Hey Mike,

In this scenario, I think JavaScript would need to do the heavy lifting rather than CSS. The Canvas front page section that is editable is situated beneath the Announcements component in the DOM. The Announcements component has this ID:

<div id="announcements_on_home_page">.

It's possible you could target that specific ID with custom JavaScript at the account level and switch its position in the DOM but you'd need to be sure to target only the course you're changing, unless you want to move it globally for every course.

The thing I'd be most worried about with this route is Instructure changes Canvas components so often that it might be something you're constantly having to fix.

Not the most helpful answer here but something to think about.

[canvas18]

Mike,

Thanks for your response.  The idea of globally moving the announcements has been gaining steam with our design team.  Any idea how we could implement this for all accounts using custom javascript inside a theme?  None of our folks have a coding background. 

[mmitchell]

I know how to do this with jQuery but I have to warn you that Canvas is planning on phasing out jQuery in the future so this might break later. Here's a quick discussion on what that means and some ideas on how to keep your Canvas functioning p....

So this code works if you add it to your global JS file:

$("#announcements_on_home_page").insertAfter("#course_home_content");

And here's a pic of what it looks like in our test environment:

Have fun!

Mike

[canvas18]

Mike,

This is outstanding!  Exactly what I was looking for...until I started to play with it.  Your code gave me what I needed to change our approach.  I have now adapted it to always show announcements in the sidebar.

In my theme's custom JS, I added:

$("#announcements_on_home_page").insertAfter("#course_show_secondary");

And it looks great, too!

[mmitchell]

Looks good Mike! Well done.

[vj221]

How did you add the recent announcements to the bottom of your page?

[vj221]

How did you get your recent announcements at the bottom of the page?

[mmitchell]

We gravitate toward squares and tiles in our front page designs. Some have large images with buttons beneath. Here's an example Art 1010 course front page. It's responsive and collapses down to two columns on smaller screens. I've also thrown in our Canvas Training front page with extra Panda awesomeness and a cool hover tile effect.

[veronica_armour]

Hi  @mmitchell , I really like the templates you created - are they available through the Commons?

Thank you!

Veronica