cancel
Showing results for 
Search instead for 
Did you mean: 
jbeyer1
Learner II

Customizing a Content Page (Not Home Page)

I want to know how people are customizing and organizing information for students on content pages (not a home page).  This is material specifically on a page.  My understanding is that

  • Canvas does not recommend the use of tables except for numerical information
  • Canvas no longer supports the use of accordians and has deprecited the html code
  • Canvas is threatening to no longer support tabs and plans to depreciate the html code. I know the code for tabs still works for now but I don't want to have to redesign everything when it's depreciated.

So what are the design recommendations?  At my community college, lecture and lab sections are kept together.  Thus, I have to organize information for both lecture and lab in the same course.  In addition, I have contacted Canvas support about organization but there are no suggestions.  It's becoming quit frustrating that Canvas is not creating training materials or giving faculty ways to chunk information on a content page. 

Please share your ideas, pictures or links to training materials on customizing a content page for use in your class. If any special HTML code is required, would you share that as well? Thanks in advance. 

25 Replies
9927744
Community Member

Welcome, Joressia.  In my courses, I utilize Modules as much as I can.  I've got them separated by the main focus.  To these modules, I add my class notes, assignments and labs.  You could easily set up 2 modules -- 1 for your course work and 1 for labs -- if you want to keep it easy.

Thanks for the reply but I am looking to feedback specially about design of pages to organize information within a page.  Putting pages into modules is more about organization of multiple pages not design of a specific page. 

chofer
Community Coach
Community Coach

Hello there,  @jbeyer1 ...

I wanted to share a few things with you related to your question:

  • First, I've converted your topic from a "Question" to a "Discussion".  I did this because you may get several different kinds of responses, and there wouldn't be one that is more "correct" than another.  A "Discussion" is more open-ended, and so it's better for this kind of topic.  A "Question" usually has one "correct" answer.
  • Second, I wanted to let you know that I have shared your question with the Instructional Designers‌ group here in the Canvas Community in hopes that your question will get some additional exposure.  If you are not following this group, you can use the link that I have provided, and then click on the "Follow" button at the top right corner of the screen.  Also, near this "Follow" button, there is an "Actions" button.  Click that button, and then choose "Join group".
  • Third, have you checked out all the shared resources in Canvas Commons?  Recently, Instructure made it possible for us to preview content in Commons prior to importing it into our own courses.  There are literally thousands of resources available out there that people have shared, and so you might use the keyword search to find examples that may work for your needs.

Please let me know if you have any questions about anything I've shared above...thanks!

Thanks Chris and you are right, this is a discussion question.  I have tried to find things in the Canvas commons but I don't have a good key word(s) for the search.  Thanks for sharing this with the instructional designers as well. 

lph
Surveyor

Hi

I break the no table rule for my two major courses. The table has two major columns and is set to 100%. The right side column is for navigation. The bottom left cell is for content, which has been chunked for quick scanning or embedding videos. 

309180_98B3F5BF-9392-4EE7-837D-C992D07160E8.jpeg

On a newer course (only 10% completed), I vowed to only use div tags instead of one main table. Here’s the table of contents page.

309181_2AC470F3-811D-473C-84F6-3E433DC803F0.jpeg

Again, the page is designed with two columns, the right being navigation and the left being content. 

I hope this helps. But keep in mind, most of my attention lately is to work on the assignments and divide things out.

309197_E52CA194-5719-4AC5-9FA5-924CF2A1C637.jpeg

The above is also done using div tags. 

I hope this helps. 

It does.  It's good to see how people design their pages. 

9927744
Community Member

This is great to know and has given me something new to learn.  It also leads to 2 questions.

1. Why does Canvas discourage the use of tables?  This has been the only way I could figure out how to put pictures and information side-by-side.

2. If I use div tags, how do I put pictures and text side-by-side?  Is it possible?

Here is an example of what I've done, using a table.

309393_pastedImage_1.png

With regards to table use. This isn't just a recommendation from Canvas. This is an accessibility concern. Screen readers read tables from left to right. If you are using the table to structure the page, the information on the page may not display in linear way that makes sense to a person using a screen reader. 

https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=131#adaptable 

That said if tables are used minimally it shouldn't be an issue. The example in your post is probably going to be understood because it is a picture (make sure the picture has alt text) and some text. 

https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=131#text-alternatives

Last year my college decided to purchase cloud version of Design Tools which integrates with Canvas. It is worth every penny because it allows you to do all things mentioned in this thread without really needing to know the HTML code. It also helps to speed up course development as well. 

https://cidilabs.com/

Here is the page on my Canvas tutorial site about Design Tools. I used accordions to keep the page simple. 

https://lakeland.instructure.com/courses/1455362/pages/design-tools

Using the div tag is extremely easy if you have an HTML editor such as sublime or another one of the favorites.

Here is a screenshot of three examples. I'll supply the code after the screenshot.

309379_Canvas Div Tag Examples.png

The first example is a four column, 100% width.


<div style="width: 100%;">

<div style="float: left; width: 25%; text-align: center; margin-bottom: 5px;"><a class="btn btn-primary" style="width: 60%;" title="Grades" href="https://puhsd.instructure.com/courses/4957/grades" data-api-endpoint="https://puhsd.instructure.com/api/v1/courses/8/pages/physics-agendas" data-api-returntype="Page">YOUR GRADE</a></div>

<div style="float: left; width: 25%; text-align: center; margin-bottom: 5px;"><a class="btn" style="background-color: #85144b; color: #fff; width: 67%;" title="ISN Table of Contents" href="https://puhsd.instructure.com/courses/4957/pages/isn-table-of-contents" data-api-endpoint="https://puhsd.instructure.com/api/v1/courses/4957/pages/isn-table-of-contents" data-api-returntype="Page">Science Notebook</a></div>

<div style="float: left; width: 25%; text-align: center; margin-bottom: 5px;"><a class="btn" style="background-color: #85144b; color: #fff; width: 60%;" title="Welcome to PVHS Physics " href="https://puhsd.instructure.com/courses/4957/pages/welcome-to-pvhs-physics" data-api-endpoint="https://puhsd.instructure.com/api/v1/courses/4957/pages/welcome-to-pvhs-physics" data-api-returntype="Page">Student Resources</a></div>

<div style="float: left; width: 25%; text-align: center; margin-bottom: 5px;"><a class="btn" style="background-color: #050505; color: #fff; width: 60%;" title="Practice by Topic" href="https://puhsd.instructure.com/courses/4957/pages/practice-by-topic" data-api-endpoint="https://puhsd.instructure.com/api/v1/courses/4957/pages/practice-by-topic" data-api-returntype="Page">PRACTICE</a></div>
</div>
<div style="clear: both;"></div>

There are three main parts to pay attention to in the above code. First the main div tag with a width of 100%. This is a container for the four columns. Each column is in a div tag with a width of 25%. Finally, the last line clears the style.

---

Here is an example of a two column, width: 100%

<div style="width: 100%;">

<div style="float: left; width: 50%; text-align: center; margin-bottom: 5px;"><a class="btn btn-primary" style="width: 60%;" title="Grades" href="https://puhsd.instructure.com/courses/4957/grades" data-api-endpoint="https://puhsd.instructure.com/api/v1/courses/8/pages/physics-agendas" data-api-returntype="Page">YOUR GRADE</a></div>

<div style="float: left; width: 50%; text-align: center; margin-bottom: 5px;"><a class="btn" style="background-color: #85144b; color: #fff; width: 67%;" title="ISN Table of Contents" href="https://puhsd.instructure.com/courses/4957/pages/isn-table-of-contents" data-api-endpoint="https://puhsd.instructure.com/api/v1/courses/4957/pages/isn-table-of-contents" data-api-returntype="Page">Science Notebook</a></div>

</div>

<div style="clear: both;"></div>

Again, there are three main parts to pay attention to in the above code. Notice the main difference between the first and second example is the width is set to 50% and there are only two div tag sets.

---

The above two examples now lead you to the answer to your question, an image with text to the right.

<div style="width: 100%;">

<div style="float: left; width: 50%; text-align: center; margin-bottom: 5px;"><a href="https://secure.flickr.com/photos/23307937@N04/5642073286"><img src="https://farm6.static.flickr.com/5007/5642073286_30882ef4a5.jpg" alt="bounce life" width="95%" /></a></div>

<div style="float: left; width: 50%; margin-bottom: 5px; text-align: left;"><strong>Lorem Ipsum</strong><span> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></div>


</div>

<div style="clear: both;"></div>

--

I'd love for Canvas to allow HTML syntax to show up properly in these posts so you can see the importance of indenting, etc  Smiley Happy 

Anyway -- I hope these examples are useful to anyone wishing to dive into using div tags instead of tables.