If you’ve used the course content tool within Desire2Learn (D2L) for any length of time, then you’re probably familiar with the D2L HTML editor. This editor, common between many content management systems, gives you a standard what-you-see-is-what-you-get (WYSIWYG) interface for creating pages for your students to view. This tool basically gives you a simple way to create HTML documents, or web pages, using an interface similar to Microsoft Word without the need to learn HTML or other web programming languages. As powerful as the tool is, it still lacks features that make it easy to create standards-based, aesthetically pleasing HTML files for your students.

Web accessibility and usability are huge subjects that I’ll try not to address too much here. However, there are a few key points worth mentioning:

  • When designing web pages that are accessible to students using screen readers, the structure of the page is extremely important. For example, the use of heading tags – H1, H2, H3,  etc. allow screen readers to navigate through the content. Although you can certainly create structured pages using the HTML editor, it may not be an intuitive process. The editor also forces you to style text based on <font> tags, which should not be used if CSS styles are available.
  • Online text is most readable when sans-serif fonts are used, when an appropriate amount of space between the lines of text is utilized, when text is easily resizable by the viewer, when the length of each line of text is limited to around 100 characters, and when text is visually “chunked” into manageable pieces. Unfortunately, the D2L HTML editor gives you little control over these aspects of page design.
  • Pages in an online course need to maintain consistent formatting and style. These conventions make it easier for students to read through the material.

I could keep going here, but I have a feeling this post is going to be rather long anyway, so let’s move onto a discussion of the actual project!

In an effort to address these shortcomings of the HTML editor within D2L (and other CMSs) I’ve created a simple set of templates that work within the LMS to create pages that are easier to read and support greater accessibility. I actually saw a similar set of templates demoed at a conference this summer, but noticed some potential problems with the framework, so I’ve decided to create my own set of files and offer them for download. It’s my hope that the templates I have created here will make it relatively easy for instructors with little or no prior knowledge of HTML and CSS to quickly and easily create web pages for online courses. I should also mention that the icons used in the templates were provided by an awesome graphic designer named Everaldo Coelho. You’ll notice links to his websites in the footer of each template, and I ask that you keep that link intact if you decide to use these templates in your own course. In addition, he has provided these icons for use by educators only, so you’ll need to send me an email from a .edu address if you would like to download the files.

Moving on …

So what do the templates do? Well, they basically let you create more accessible files for your course. A picture is worth a thousand words, so take a look at the example below to see what we’re talking about here.

Screenshot showing styled content versus non-styled content

How do I use the templates?

Good question! I’ve created a D2L course component consisting of a demo page, several different page layouts, and all the resources you’ll need to upload in order to use the files. If you’re using Desire2Learn, you should probably get started by taking a look at the instructions for importing that course component.

Instructions for importing the course component in Desire2Learn

Once you’ve imported the files into your course and created a copy of the layout that you want to use, you might want to also take a look at the Formatting Your Pages tutorial.

Please let me know if you have any questions or comments about the templates. I’m always happy to consider adding additional features that you might need. You can leave your comments below!

PS – I’ve added a link to a stand-alone version of the templates that can be viewed without requiring Desire2Learn or any other LMS. It contains all of the page layout templates as well as samples of some completed pages I’ve been created using the framework.

Update – The folks at D2L have released their own set of templates that look pretty nice. You can find out more information here – http://www.desire2learn.com/access/instructor_resources/HTML_templates/

Posted by Brandon Ballentine

My name is Brandon and I'm an iOS developer and instructional technology consultant based in Los Angeles, California.

Leave a Reply

Your email address will not be published. Required fields are marked *