Course Design Tips

coverimage2Managing an online course can range from straightforward to complicated, and can become overwhelming at times. It is also uncommon to receive a manual when you are tasked with developing an online course. Not to worry – help is here! As learning technologies staff, we live and breathe the CLE!

With a little planning and development, we can build the foundation of a great CLE course. Below are just a few CLE course design tips and resources we identify as valuable. We hope these generate conversation and new ideas within your course, school, and department.


Design for mobile

images-01The number one tip for this blog post is… design CLE courses for students using both laptops and mobile devices! Data shows students are accessing CLE courses using mobile devices more and more. This means we need to rethink the way we design courses in the CLE, specifically how we format images and text.

The CLE 2014 Refresh brought responsive design to the CLE. The CLE now responds and displays according to the device being used by the student. This means no more small, unreadable text when accessing the CLE from a mobile device such as an iPhone or Galaxy.

Here is a practical tip for improving the learning experience for students accessing the CLE from either a mobile device or a desktop computer – remove tables from CLE courses that are being used to format text and images. Replace these tables with images and text wraps that are designed to properly respond to students’ devices. Sound complicated? Maybe a little, but not to worry, we are simply replacing tables with images and text to create better designed, more user-friendly CLE courses!

For the purposes of this example, we will add a Label to a course to display an image and a summary of the week’s learning as seen below.

Screen Shot 2014-10-24 at 5.00.11 PM

In the past we would have used a table to keep the image and text aligned in the label. This works well when viewed on a laptop or desktop computer, but once the content is accessed from a mobile device, the text does not display correctly on the smaller screen (in other words, the text does not “respond”). When tables are used for formatting text and images, students using mobile devices may experience cumbersome horizontal scroll bars (see images below), text that runs off the screen, and images that do not display correctly.

So how do we fix this? Just remove the tables that are used to format images and text in CLE courses and replace these with image wraps. Below is a side-by-side comparison of the two design workflows, as well as screenshots of how the two will display on a mobile device:


And here is a comparison of how both will display on a mobile device:

Screen Shot 2014-11-20 at 10.19.20 AM

Here is how to apply an image wrap in a Label. Add a Label to a CLE course and insert text and an image into the text editor. While adding the image, navigate to the Appearance tab in the Insert/edit image pop-up (shown in the image to the right). From the Alignment drop down menu, choose Left to align the image to the left of the text (there are other alignment options available). From the Horizontal space field (how much space is added between the image and text), I entered 10 (pixels) for this example, which worked well. Click Update to continue.

That is it! You can now replicate this design workflow in other labels in your CLE course – creating a consistent learning experience for students. Questions? Comments? Post a comment below and let us know if students in your course are using mobile devices to access the CLE and if you have design tips of your own!

Block Management

images-02The second course design tip is better Block Management. Blocks are items that can be added to the left or right column of any CLE course. There are a number of different types of Blocks in the CLE and some may already be used in your course.

The first step to good Block management is understanding the different types of Blocks. Take a look at the Standard Blocks via Moodle Docs and explore the different types of Blocks available in the CLE (with editing turned on!).

The next step is to add only the Blocks that add value to the online experience. If a Block is not used, or has little value, consider removing it from the CLE course to conserve space for learning. Spend 10-15 minutes before each quarter reviewing your Blocks, as well as considering how different types of Blocks can be used to improve the online Screen Shot 2014-11-04 at 9.11.10 AMlearning experience for both students AND faculty.

CLE courses are divided into three columns and Blocks are typically located in the left and/or right columns. The middle column is where the course content is displayed and where students spend the majority of their time learning while in the course. To maximize the amount of real estate in this middle column, consider moving all of your Blocks to the left column. Once all of the Blocks have been moved from the right column to the left, the middle column becomes wider, extending to the end of the right column and providing more space for learning. See the images below for a visual comparison of the impact of better Block management:Screen Shot 2014-11-20 at 10.19.25 AM

Screen Shot 2014-11-20 at 10.19.37 AM Have questions about managing Blocks? Visit the Learning Tech Support Center for more information!


So you are probably thinking, “this is useful information, but I need CLE course design support now!” Not to worry, below is a list of resources that we find helpful when creating CLE courses:

find examples of well-designed online courses

The best to way to be motivated and inspired to improve your CLE course is took look at examples of other well-designed online courses. These courses do not need to be in the CLE, or even Moodle courses necessarily. By getting a better understanding of the successes that other educators have had with online course design, we can create better online learning environments for students. Below are resources with good examples of online course design:

Attend a Tech Clinic

2Need one-on-one support? Attend a Tech Clinic held on the second and fourth Friday of every month. We also offer a CLE Basics training at the start of each Clinic that we highly recommend new faculty and staff attend. Register today!

Create a CLE Test Course

Not quite ready to test the course design tips in an active CLE course, but want to get a head start on next quarter? Request a CLE test course where you can test design workflows and tryout new CLE activities.

LTG consultation using WebEx

webexWhether you are a rookie or a veteran of the CLE, questions come up! The Learning Technologies Group can setup a WebEx session to help troubleshoot CLE related issues and assist in course design suggestions – all from the comfort of you own office. Contact the Learning Technologies Group to schedule a CLE WebEx consultation.

Have fun designing your CLE course and please share you successes and challenges in the comment section below!

Image Credits:

Blocks” designed by Lukasz M. Pogoda from the Noun Project.
Responsive-Design” designed by Pham Thi Dieu Linh from the Noun Project.
Graphic-Design” designed by Anna Weiss from the Noun Project.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.