Home Sweet Homepages without Tables

[clong]

Lately I've been busy as a bee, cross pollinating between the tips stefaniesanders shared in Creating an inviting course home page and the HTML Snippets  @G_Petruzella  shared in Columns Without Tables: code-snippet. Back and forth I went until I finally had something I think is sweet as honey and ready to share. Combining all the ideas and more I came up with some new homepage designs.

Design Notes:

1. Not That Wide- When you are designing a homepage in Canvas you have to remember that you are working with less width than a page that is not set as the homepage. This is because the task bar on the right side of Canvas effectively takes up 285 pixels. Taking the left course nav into consideration as well, this leaves you with approximately 840 pixels of usable homepage space if you are designing with the WXGA (1366 x 768) screen resolution as your lowest common denominator.
2. To Banner or Not to Banner- Your course homepage is like a welcome mat. Some are utilitarian, some are over the top and have too much going on and some are just blah. As a teacher you want your homepage to say come on in and I think having a nice visual, professional looking banner at the top of the page helps to set that tone. Banners that are 760 x 100 pixels are a common size used on various websites and that size works well for Canvas homepages too. You could go a little wider or taller maybe 840 x 120, but then you are pushing it. Going no wider than 760 allows for some wiggle room.
3. Teacher Presence-  Adding a teacher's picture to your homepage with some contact information is a great way to communicate that there is a caring, passionate and approachable human being here to help you learn. To do this,  I settled on 140px wide as a good size and wanted that to look like it was right aligned to the banner image at the top of the homepage. This turned out to be tricky. Since you're not using tables and the page can be much wider than the banner image, I found that the picture was not really lining up well and looked out of sorts way over to the right or left. Ultimately, I setting the div width for the div that preceded the picture to a maximum fixed amount of pixels and discovered that this worked pretty well.
4. Breaking Buttons- Originally I was planning on using HTML generated buttons using CSS properties found in the Canvas Style Guide. However,  @dlyons  who works at Instructure cautioned us not to rely on style guide elements in the RIch Content Editor Areas of Canvas. So there was that to consider, and the buttons made this just don't have enough pizzaz for my tastes. Therefore, I used some icons from Google's Material Icons Project and one of my favorite programs OmniGraffle - diagramming and graphic design for Mac, iPhone, and iPad to break with the traditional buttons and make some buttons that pop.
5. Blurb Space- When you walk into a teacher's physical classroom 90% of the time you'll notice that they have a little message or important items written on one of their whiteboards. In Canvas we have announcements that can help with this as well as messaging but I still think homepages should have a blurb space. This is a small area that you can add a quick and timely message to and point out a few key things your students need to pay attention to. When designing your blurb space you want to increase the odds the it will actually get read and not glossed over so consider how Size Matters: Balancing Line Length And Font Size In Responsive Web Design. Is your font large enough? Are you lines 45-75 characters long?
6. Share- If you have any suggestions or any homepages without tables you'd like to share, please add them to this post.

Update: I've included a new version (v2) that lines up as 3 columns on most desktop/laptops and has the buttons aligned vertically going down the left side of the page. I think that is my favorite of the two, but I go back and forth.

v1: Laptop (WXGA 1366 x 768)

v1: Phone 6 (Mobile Browser)

v1: iPhone 6 (Mobile App)

v2: Laptop (WXGA 1366 x 768)

v2: Phone 6 (Mobile Browser)

v2: iPhone 6 (Mobile App)

Source Code:

Canvas Homepage HTML ERWC - Google Docs (shared so anyone with link can make comments on code)

[Stef_retired]

This is is fab,  @clong To close the cross pollination loop (while mixing metaphors) I'm posting a link to this in the Creating an inviting course home page​ blog. Thanks for sharing!

[awilliams]

How timely  @clong ​! We are in the process of creating some home page templates at this very moment! Thanks for sharing.

[jordan]

Strong work  @clong ​ Thanks for sharing your pointers and observations and doing such a loverly job of summing up what you took away from  @G_Petruzella  and stefaniesanders posts. And many thanks for adding the screenshots as well. That's so helpful to visualize what you are sharing, in action!

I'd love to see what you come up with as well, awilliams! 😉

[awilliams]

Loving the v2 look and design rationale. So very helpful! I need more stars for this one...

[clong]

Your [TMPLT-002] Modular Student-centric Course was an inspiration for this work as well. Deactivated user all of your work is so clean, I'm going to start addressing you as El Elegante :smileylaugh:

[clong]

:smileyblush: Thanks awilliams​

[kblack]

Thank you, Chris.  Always nice to see material like this in the community!

[jjohnson6]

Thank you Chris! This has given me some ideas for my courses.

[alorio]

This is super helpful, but in my copy and paste of version 1 my teacher portion gets shuffled and I know you said, tricky, but I am not sure where the "fix" is

LOVE the look!

[jal18]

Really functional, usable and aesthetically pleasing! Thanks for sharing.

[arovner]

This is awesome  @clong  - thank so much for taking the time to share the details!  I can't wait to use this and impress some of my faculty.  🙂

[clong]

Thanks  @alorio ​. If you have this page in a course you can make public and provide a link to it, I'd be happy to take a look and see if I can help fix it.

[Stef_retired]

For anyone interested in this topic, be sure to RSVP to the CanvasLIVE event Ask Me Anything: Kate McGee, Product Manager, Commons+Content, which is coming up on Thursday, October 20, 2016. Kate is going to be answering questions about Canvas Commons, master courses, templates, and the content authoring tools in Canvas--and, well, anything! If you’re interested, but your schedule doesn’t allow you to attend in real time, RSVP "no" or "maybe" so you can receive any post-event updates.

[katie_grubb]

Thank you  @clong  for your post!!  Have been reading all the links you provided and am excited about using <div> and buttons to make our pages more professional and responsive (we originally set up using tables - clunky!).

I have a question RE: buttons and pictures with mouse-overs - I noticed your re-designed buttons are pics with mouse overs? - are these still readable in .epub that you know of? Usually images aren't (that's what they tell me - I need to research more) so my IT department wants me to check before I re-design buttons for our homepages (I also don't love the Canvas buttons that much).  Hope my questions makes sense - If anyone knows, would love to hear from you. Thank you

[clong]

Hi  @katie_grubb ​, I've never used the ePub Course Download before, so I decided to learn how and test this out

The Answer to your question is that it looks like this screen shot below in my Apple iBook ePub reader. However, I really don't think it matters at all because the ePub format has a fully working navigation (table of contents) organized by course modules and activities so students would not need to use that homepage at all.

Here's what the homepage looks like, note that it is on page 448 (if I wanted to fix that I should put it in Module 1). Apparently it doesn't resolve the internal link to course modules so it doesn't matter what you use for a buttons here, as it will get stripped out when it goes to ePub.

Here's the first page of the ePub (which I found to be highly functional and accessible).

Hope this helps you make your decision.

[Stef_retired]

For anyone who wants to get more comfortable with HTML and <iframes> and all that good stuff that helps you build beautiful pages like these, be sure to RSVP to the CanvasLIVE event Cracking the Code: HTML for Humans! which is coming up this Monday, November 7, 2016. If you're able to attend, RSVP "Yes"--and if you're interested but your schedule doesn’t allow you to attend in real time, RSVP "No" or "Maybe" to receive any post-event updates.

[gharbor]

Would you be happy to share a version of this on Commons for people to have to play with?

[clong]

gharbor‌ I went ahead and added it to Canvas Commons.

[penny_christens]

Thanks Chris - super thoughtful and very useful.
One consideration we are working with is course which are pedagogical/content development for teachers.

We have created a staff role (based on TA) where they can copy, but not edit (delete).

Because we have "participants" looking at the smaller screen

This is because the task bar on the right side of Canvas effectively takes up 285 pixels. Taking the left course nav into consideration as well, this leaves you with approximately 840 pixels of usable homepage space if you are designing with the WXGA (1366 x 768) screen resolution as your lowest common denominator.

We need to design differently.

I appreciate you quantifying what we were trying to qualitatively explain.

[kritzerjb]

IHi, Chris. Have you got the code for this Table of Contents

[adamwarecx]

Hi @everyone,

Late last year we ran a webinar on the very topic. It's free to watch

This video is currently being processed. Please try again in a few minutes.