[ARCHIVED] Homepage Design with Simple Tables

[lethbri2]

I've been feeling adventurous and decided to see what tables can do on the Canvas homepage (and yes, I’m aware of the complications and frustrations of tables on Pages). I found an easy method that works well with a few simple tables and a little work in Illustrator (for the images / banner).

1. Create a table [1x1] and set the width to 100%. If you do this and put in larger images, it should shrink to a size that accommodates both the right and left hand menus. This also works in mobile browsing. In order to remove the white space between the tables, you may need to go into the HTML code and remove some paragraph tags (<p> and </p>)
2. Add a bit of padding – 15 px and change the background colour to create sections. I always forget to add the # symbol. If you miss this and put in just the numbers, it doesn't work!
3. Add content. Decide on the content and some of the buttons that are essential for students to get started. Typically, this includes a button to an introduction and links to the content or schedule.
   
   
4. Create another table (Repeat step 1 to 3)

I’m wondering who else has explored different homepage setups with sections or new ways to set up navigation. I’m also planning to explore if the homepage (with a few links or additional pages) can be robust enough to be the only page required for a blended course based on the infographic design / layout. 

Looking forward to hearing your ideas and thoughts on what else can be done with a Canvas homepage! I’ll attach the ones I’ve been playing around with.

[sohaljs]

This a great effort to make something with very little tools. Like you said about tables. The only worry is accessibility - but I'm sure with some alt text you can get away with it. Just imagine you have a set of 'themes' to choose from in modular format. Blocks for each section (i.e. a table) with pre coded elements and PNG images ready to go...but that be too easy

[lethbri2]

ANDDDD add that idea to a template in a Blueprint course and it could have a huge impact on the way students view content and learn!

[kmeeusen]

Absolutely  @lethbri2 !

This, for me, is one of the huge advantages of Blueprint courses - the development of accessible templates. Unfortunately, and instructor-added content could subsequently be inaccessible, but one battle at a time!

Kelley

[kmeeusen]

Hi  @lethbri2 ‌

Great looking pages!

I will echo sohaljs‌ Accessibility concerns. You can learn more at https://community.canvaslms.com/docs/DOC-2060-general-accessibility-design-guidelines 

Keep rockin'!

Kelley

[lethbri2]

Accessibility is something I need to do a little more testing on. With tables set to 100% and text set as text (not locked in an image), it views well on any screen resolution and in the browser-mobile devices; however, I haven't tried it with a screen-reader yet or access it on the Canvas app. It may need a little additional work once that is complete! I'll do an update here once I have a little more time to explore!

[jenny_millea]

The University of Canberra is in the process of moving from Moodle to Canvas. Our Moodle supported a range of templates, some of which included graphics.

However, for Canvas, we created a course with suggested content, using the Syllabus as the home page and saved this site to the Commons. We have then imported this site (a shell site) to all the sites that have been auto-created to provide a consistent user experience for students. We have moved away from supporting images on the home page because of the wide range of devices used by students, and because of our desire to ensure accessibility, and fast page loading. 

[kmeeusen]

Bravo,  @jenny_millea ‌!

Kelley

[d_ellis]

That is really visually appealing - nice work!

Could you achieve the same effect by using divs set at 100% width? That might be friendlier to screen readers than 1x1 tables.

[awilliams]

I was wondering this same thing and thinking of  @clong 's Home Sweet Homepages without Tables. It's not hard to get the basic row with colored backgrounds accomplished (Note: I adjusted the font color for WCAG AAA guidelines😞

<div style="color: #303030; background: #33D4D2; height: 150px; width: 100%; padding: 15px;">Example of a DIV element with a background color</div>‍‍

It's definitely going to take a bit more work to get it mobile responsive. I'm going to keep poking but I wanted to leave what I had here in case anyone else was curious about a <div> equivalent.

[awilliams]

So, this actually turned out to be a pretty fun and straightforward way to learn how to play with divs. Trying to replicate single column tables instead of multi-column responsive layout is much much easier. Disclaimer: I'm an amateur in Instructional Design, nothing I say should be considered gospel or even necessarily right for that matter.

 @lethbri2 , I really like the visual communication style of what you showed off. It definitely implements some of what is becoming more common place. 1) Single responsive column so mobile-ready from the start, 2) Alternating back ground colors to break up text into sections, 3) Simple graphics that convey just enough meaning, but not too much.

If I were to offer some constructive feedback from my limited knowledge, it would be:

1) Regardless of your layout technique, always check for contrast of FG/BG colors. WebAIM: Color Contrast Checker 

2) Give divs a shot! Everything I can learn from looking around the internet says tables (Edit: tables for anything other than tabular data like layout) are a big no-no for accessibility. I enjoyed poking around at this last night so I went further and did a proof of concept of how your page could work with divs. 

You can see this page in action (and view it's source code) in my FFT sandbox. It definitely still needs some design touch ups and probably some optimization of the div setup, but it should give you some confidence divs can do it without that much scary code.

Here's a side-by-side of your image and a screenshot of my divs version:

Here's a shot of it on my Android device in the app (it also looked good on the developer tools device previews for iPhone/iPad):

Here's a quick look at the source code if you just want to grab it and try it out (images are likely to break and I'm sure it's far from perfect):

<div style="max-width: 660px;">
<div style="color: #303030; background: #33D4D2; width: 100%; padding: 15px; min-height: 220px; overflow-x: hidden;">
<p><img style="float: left;" src="https://canvas.instructure.com/courses/1182151/files/53560896/download?wrap=1" alt="computer in circles with clouds" width="162px" height="162px" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1182151/files/53560896" data-api-returntype="File" /></p>
<p>How's this for a bright idea? All of your PD in One Place?</p>
<p>This course provides you with information and access to a large assortment of PD opportunities, all in the convenience of one location. Educational technology, New Instructor Support and Open Door Classrooms are just a few of the many things you will find here.</p>
<p style="padding-left: 60px;"><img style="float: left;" src="https://canvas.instructure.com/courses/1182151/files/53561358/download?wrap=1" alt="button_get-started.png" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1182151/files/53561358" data-api-returntype="File" /></p>
</div>
<div style="color: #303030; background: #72e3de; width: 100%; padding: 15px; overflow-x: hidden;"><img style="float: right;" src="https://canvas.instructure.com/courses/1182151/files/53561843/download?wrap=1" alt="rocketship" width="159" height="237" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1182151/files/53561843" data-api-returntype="File" />
<p> </p>
<p>We define professional development (PD) as activities instructors engage in to develop their teaching skills. This includes formal and informal methods that assist instructors in developing insights into their own teaching as well as develop new skills and methods. Examples include attending an LMS or Smartboard training session, going to a conference, taking an Instructional Skills Workshop (ISW) or an Instructor Certification Program course, and participating in the Refresh Conference sessions. Within this context, the terms Faculty Development and Professional Development (PD) are used synonymously.</p>
</div>
<div style="color: #303030; background: #33D4D2; width: 100%; padding: 15px; overflow-x: hidden;"><img style="float: left; padding-right: 60px;" src="https://canvas.instructure.com/courses/1182151/files/53562003/download?wrap=1" alt="clock with words upcoming events" width="192" height="156" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1182151/files/53562003" data-api-returntype="File" />
<p><span style="font-size: 18pt;">Upcoming events:</span></p>
<ul>
<li>Instructional Skills Workshop (ISW) (Learn more)</li>
<li>Drop-In Canvas Support (Aug. 27 9 - 10am in TE 3218)</li>
<li>Submissions for NISOD Deadline Approaching (Nominate Leader)</li>
</ul>
<p> </p>
</div>
<div style="color: #ffffff; background: #606060; width: 100%; padding: 15px; overflow-x: hidden;"><img style="float: left; width: 30%; max-height: 46px; margin-right: 5%;" src="https://canvas.instructure.com/courses/1182151/files/53562301/download?wrap=1" alt="announcements" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1182151/files/53562301" data-api-returntype="File" /> <img style="float: left; width: 30%; max-height: 46px; margin-right: 5%;" src="https://canvas.instructure.com/courses/1182151/files/53562302/download?wrap=1" alt="resources" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1182151/files/53562302" data-api-returntype="File" /> <img style="float: left; width: 30%; max-height: 46px;" src="https://canvas.instructure.com/courses/1182151/files/53562304/download?wrap=1" alt="meet the team" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/1182151/files/53562304" data-api-returntype="File" /></div>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[lethbri2]

This is tremendously helpful! Thanks! I'll give it a go! 

[bkrisenhoover]

Hello Adam and Rebecca,

Thanks for all your hard work and generosity.  I just wanted to share a work in progress.  There are still some organizational issues when viewing from a handheld device, but it is manageable.  I'm going to give the few "problems" I have to our comp sci department to have the students work them out :-).

I've wanted to do something like this for some time now.  Thanks for giving us all a huge jump start on this project.

Let me know what you think:-)).

The Canvas community is the best,

Brandon

[sbridge]

I LOVE what you'd done but as an instructor who has multiple preps and is super busy, I find it a bit frustrating that I have to know HTML code and "divs" (which I think means divisions of space?) to create a visually appealing page.  There are so many other LMS systems where you just "what you see is what you get" and have themes, etc.  WHY is Canvas so code heavy?

[bkrisenhoover]

Hello Stephanie,

Thanks for the love.  I understand your sentiment about how little "free" time teachers have once school begins.  For me, this homepage was a summer project.  It would be nice to have more push button/drag and drop design elements in pages; however, I do appreciate the flexibility and openness of the platform.  I'm currently working on a page template which can be reused.  I would be happy to share it to the Commons once it is complete :-).

One thing I really appreciate about Canvas is its robustness.  I believe I've put the platform through the paces.  I've tried to break it, but have been unsuccessful thus far.  There is always an easy fix or somebody (an actual person) ready to listen and help.

What new professional learning challenges are you taking on this year?

All the very best,

Brandon 

[christopher_phi]

Lots of feedback and comments about the accessibility of using tables for layout on this thread that I wanted to chime in on. Creating templates that are accessible is a tremendous opportunity to make sure your templates start accessible for everyone who uses them. 

Although you can create a template with a table that is accessible, if you decide to go that route make sure that you are very aware of what some of the challenges can be - WebAIM has a helpful article on accessible layout tables. 

Using CSS for your layout provides a number of advantages including the ability to create responsive designs for mobile, baked in accessibility, semantic structure and following general best practices for web design. 

awilliams‌ did a great job of showing how that might work. 

All that said - I love the idea of creating some solid options for home pages. At Utah State we use Design Tools that has a number of different home page templates built in with some options for faculty to customize them as needed.