Formatting and Enhancing Your Moodle Materials: Part 1

Exclusive offer: get 50% off this eBook here
Moodle 1.9 for Second Language Teaching

Moodle 1.9 for Second Language Teaching — Save 50%

Engaging online language learning activities using the Moodle platform

$29.99    $15.00
by Jeff Stanford | October 2009 | Moodle Open Source

This article by Jeff Stanford provides some guidelines for making your language learners' experience more effective by checking the quality of text, images, and audio. It also considers the importance of clear navigation paths.

You can use Moodle as it comes without having major design problems, but it's well worth paying attention to a few design principles that will enhance your users' language-learning Moodle experience. Before you begin, why not take a look at other Moodle sites and see what you like or don't like. Look at things such as layout, ease of navigation, use of color, and images. You'll find a list of thousands of registered Moodle sites at http://moodle.org/sites/.

There are three main types of Moodle pages to consider when it comes to design:

  • Moodle front pages
  • Moodle course pages
  • Moodle activities

Before we go into detail about design considerations, let's look at examples of each of these to see how we can improve them with a few basic steps.

Moodle front page

If we take Moodle straight out of the box, set up some blocks for the main menu, provide some useful links, and set the front page settings to show a list of courses, we could have something like this:

BEFORE

Formatting and Enhancing Your Moodle Materials: Part 1

It's functional enough, but not very engaging. Just by making a few changes, we can make the front page much more interesting and readable:

AFTER

Formatting and Enhancing Your Moodle Materials: Part 1

What's changed?

  • There's a new theme (Moodle speak for the color scheme and automatic font choices). As we'll see in a bit, some themes also include tabs and drop-down menus.
  • There's an appropriate image in the top-center of the screen to draw users in.
  • The About this site block has a photo of the administrator, which provides a personal touch.
  • There's an easily-identifiable "start here icon"—another helpful feature that guides your users in the right direction.

Moodle course page

Like the Moodle front page, a standard course page automatically creates three columns for us to fill with text. If we choose a topics format from the Settings menu and write out a list of activities and links for our course, it could look something like this:

BEFORE

Formatting and Enhancing Your Moodle Materials: Part 1

The problem here is that it's difficult to distinguish important information from unimportant information. There's a lot of scrolling to be done, and there are no visual clues as to what the course page is about. Here's one way of transforming the page:

AFTER

Formatting and Enhancing Your Moodle Materials: Part 1

What's changed?

  • There's a new theme.
  • The theme includes tabs with links to key parts of the site.
  • There's an image related to the course topic (teaching) at the top of the course page.
  • The long list in the previous version has been reduced to a more manageable size.
  • Important information is at the top of the page, and is in a larger font size. It contrasts with less important information, which has a smaller font size.
  • Lines are used to separate different sorts of information.
  • There is more color harmony—at attempt to get the colors to blend.
  • There's an avatar introduction in the left block for new users.

Moodle activity

When we're pushed for time, it's all too tempting just to set out a list of references without paying due attention to instructions and a helpful hierarchy of information, as in the following example:

BEFORE

Formatting and Enhancing Your Moodle Materials: Part 1

There's a lot of information here. We can use the Book module to organize the information, and make the page more readable, as in the following transformation:

AFTER

Formatting and Enhancing Your Moodle Materials: Part 1

What's changed?

  • The previous list has been divided into sections in the Book module
  • There's a "how-to" section at the beginning of the Table of Contents
  • Graphics from the target websites have been included as visual clues
  • The Tool labels such as Audacity and Findsounds are in a larger font size to make them stand out
  • An action girl icon indicates task instructions
  • Task instructions are in bold blue to make them stand out
  • A grid is used to separate sections

As we can see, by enhancing the visual design of our sites we can make our materials more engaging and effective. We can also make them more attractive by improving the quality of the audio, images, and video that we use. Here are some principles we could take on board:

Contrast

Consider hierarchies of importance in your materials. The default font size on HTML pages is 12 points, similar to what you're reading now. Vary the size to make more important information stand out. You can also use images, buttons, and navigation signs to help users see the function of pages and content more quickly and remember it.

Consistency

Being consistent in your use of fonts for certain sorts of information, font sizes for ranking information, and navigation links will make it easier for users to understand the site and will make it more aesthetically pleasing. It's also better not to use too many different fonts or make your site too fancy or you will end up with a dog's breakfast. As a rule, it'll look better if you use different sizes of a limited number of fonts, rather than including lots of different fonts.

To promote design consistency on your Moodle site, consider setting up a style guide so that all teachers use the same design framework.

Alignment

A basic principle of graphic design is to make sure that the objects on your page are aligned with each other. Imagine a grid that they stick to. Aligned objects look more professional and enhance contrast within pages. Moodle organizes that automatically for us with front pages and course pages, but when we set up instruction pages for activities, we need to keep alignment principles in mind, as we have more design freedom.

Quality

Aim for the best quality audio recordings and images. It is likely to make a big difference to language learners if they can listen to clear recordings and easily identify the content of images.

This article

Each of the following sections in this article contributes to the above principles by demonstrating some of the tools available in Moodle that help you with your design. You'll find a consideration of these and other website design issues at http://www.asktog.com/basics/firstPrinciples.html.

Here are the main topics covered in this article:

  • Text
  • Images
  • Videos
  • Sound
  • Navigation
  • Blocks
  • Layout
  • Style guide
  • Accessibility
  • Feedback

Text

There are two main ways of entering text in Moodle:

  • Adding text pages
  • Adding web pages using the HTML editor

The most common way is by using the HTML editor. Most of this section on text will look at formatting options using that.

Adding text pages

When you select Add a resource... and then Compose a text page, you get a choice of formatting options for your page.

Formatting and Enhancing Your Moodle Materials: Part 1

You might find it useful to use the Moodle auto-format, as it automatically creates emoticons, paragraphs, and hyperlinks for you if you write in web addresses. Creating hyperlinks is a little more time-consuming if you choose the HTML format, as you have to create all hyperlinks manually. Markdown format is also useful if you want to create a structured document with lists and emphasis. You can, of course, produce all these in the HTML format, using the editing menu. The following options are available when you select Add a resource... and then Compose a text page.

Formatting options

Details

Moodle auto-format

This has limited formatting options, but will automatically turn URLs like http://moodle.org into hyperlinks and will include emoticons like J when you type :). It keeps line breaks and converts blank lines into new paragraphs.

HTML format

This does not automatically format text, but gives you a wide range of possibilities for editing your text. It allows you to change font faces, font sizes, and color, as well as embed graphic images, sound, and video. Note that if you select Compose a text page and then the HTML format option, you will need to enter pure HTML-that's the code that produces web pages.

If you are not familiar with HTML, you'll be better off choosing Compose a web page and then using the HTML graphic editor.

Plain text format

This format keeps spaces and new lines, but no other formatting is available.

Markdown format

Markdown allows you to easily add emphasis (bold, italics), structure (bullet points and headings), and links (to images or other web resources). You can use Markdown in many places in Moodle. Simply select it from the formatting drop-down list, which is found below the text entry area, wherever you have the choice.

 

Moodle 1.9 for Second Language Teaching Engaging online language learning activities using the Moodle platform
Published: October 2009
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

Adding HTML pages

Most summary pages, introduction texts, and the web pages in Moodle present you with an HTML editor for editing. Let's look at some of its features. You'll find the HTML editor, for example, when you select Add a resource... and then Compose a web page.

HTML editor shortcuts

Below the HTML editor, you'll notice a shortcut icon: Formatting and Enhancing Your Moodle Materials: Part 1

. It's also present when we add web pages, which automatically use HTML formatting.

Clicking on that shortcut icon will open a pop-up window with a long list of keyboard shortcuts that you might find useful for formatting your page. For example Ctrl + O = Change the font. The Ctrl shortcuts work on both Windows and Mac systems.

Common features of the HTML editor

Since most Moodle users use the default HTML editor, let's look at the features, which might be useful. This is what the HTML editor looks like:

Formatting and Enhancing Your Moodle Materials: Part 1

Font faces

The top-left drop-down menu is for font faces—the term for typefaces when we use them on web pages. The following are available:

Formatting and Enhancing Your Moodle Materials: Part 1

Trebuchet is the default font face, but you might find that a different one suits your site more. If you do change the font face, make sure you use it consistently and with a specific goal. Otherwise, your pages could look messy. Sometimes, for example, it is appropriate to use a different font face to provide an example of text you want students to write. That way the model text will stand out better. Here's an example which uses the font face Arial for the main text and another font face called Georgia for the model letter.

Formatting and Enhancing Your Moodle Materials: Part 1

You can also add new fonts to the HTML editor. To do that, go to Site Administration | Appearance | HTML editor. Then write the name of the font face that you want to appear in the HTML menu in the left-hand column and the name of the actual font in the right-hand column. In the following example, I've added the popular font face called Comic Sans, which you're reading now. If you want a font face other than Trebuchet to be the default font, put it at the top of the list.

Formatting and Enhancing Your Moodle Materials: Part 1

A font face must be available on the user's browser and installed on each user's machine in order to work. You can find the name of the fonts in the font folder on your computer. Ask your administrator if in doubt.

Here's a list of so-called "browser-safe" font faces—in other words, font faces that work on most browsers and which you can therefore add to your HTML editor, knowing your students will be able to use them. You can find a list of names and font families at http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html.

  • Comic Sans MS
  • Impact
  • Lucida Console
  • Lucida Sans Unicode
  • Palatino
  • Symbol
  • Webdings
  • MS Sans Serif4
  • MS Serif4

Font size

The next button marked 1 (8pt) lets you change the font size.

Formatting and Enhancing Your Moodle Materials: Part 1

Default is 3 (12 pt), but the following sizes are also available:

Formatting and Enhancing Your Moodle Materials: Part 1

Varying the size of your font helps differentiate between headings which vary in importance and so contributes positively to the design of your information. For example, we could use 24 pt for main titles and then 14 pt for subheadings. The letter task example earlier uses the following sizes:

24 pt main title

Letter task

14 pt subheadings

Instructions, read the letter

12 pt for the instructions text

Dear Tom

Moodle 1.9 for Second Language Teaching Engaging online language learning activities using the Moodle platform
Published: October 2009
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

Styles

The third drop-down menu provides a range of styles which help you format your text.

Formatting and Enhancing Your Moodle Materials: Part 1

Normal is the default. The different heading styles relate to pre-set sizes and are useful for dividing headings into main and subcategories. Address creates an italic style and is used to mark up contact information. Preformatted text is displayed in a fixed-width font, and it preserves both spaces and line breaks. That can be very useful if you find the gaps you create on the page keep disappearing. In general, using the headings will help you organize your material in a more attractive and consistent way. Here's an example of the styles.

Formatting and Enhancing Your Moodle Materials: Part 1

Color

The HTML editor allows you to change the font color (using the T icon) and the background color (using the bucket icon):Formatting and Enhancing Your Moodle Materials: Part 1

In general, it's best to have either a light color on a dark background or a dark color on a light background. The letter example earlier has a blue font on a yellow background. If in doubt about the degree of contrast on your page, check the site http://snook.ca/technical/colour_contrast/colour.html, which will provide an analysis of and verdict on your color choices.

Consider color as part of your general design. It helps with both contrast and consistency, making navigation easier. For example, if the general color scheme of your site is light blue, consider using dark blue for headings in the topic sections of your pages. This helps create color harmony and reconfirms the importance of the headings. You might find this website useful for experimenting with color combinations: http://www.colorcombos.com/.

>> Continue Reading Formatting and Enhancing Your Moodle Materials: Part 2

[ 1 | 2 ]

 

If you have read this article you may be interested to view :

 

About the Author :


Jeff Stanford

Jeff Stanford is from London, UK, and has worked in over 20 different countries. He has more than 20 years experience as a language teacher and teacher trainer, which he has applied with abundant enthusiasm to ICT for the last ten years. He is a portfolio worker and each of the strands of his professional life have contributed to this book: as an associate tutor on the MA TEFL course at Leicester University; as a communication skills tutor; as a web site designer; and as a teacher trainer. Since doing a diploma in Interactive Multimedia in 2002 he's been particularly keen on demystifying technology, and helping teachers make the most of the rich world of internet language learning applications. He has been working with Moodle for the last 5 years, setting up Moodle installations for schools and companies and advising on best practice for administrators and teachers. You can visit his free Moodle try-out site at http://moodleflair.com.

Books From Packt

Ext JS 3.0 Cookbook
Ext JS 3.0 Cookbook

Joomla! 1.5 SEO
Joomla! 1.5 SEO

eZ Publish 4: Enterprise Web Sites Step-by-Step
eZ Publish 4: Enterprise Web Sites Step-by-Step

jQuery 1.3 with PHP
jQuery 1.3 with PHP

Moodle 1.9 Multimedia
Moodle 1.9 Multimedia

Moodle 1.9 for Teaching 7-14 Year Olds: Beginner's Guide
Moodle 1.9 for Teaching 7-14 Year Olds: Beginner's Guide

Moodle Course Conversion: Beginner's Guide
Moodle Course Conversion: Beginner's Guide

Moodle 1.9 Math
Moodle 1.9 Math

Your rating: None Average: 3 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
a
S
Q
V
b
q
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software