Formatting and Enhancing Your Moodle Materials: Part 2


If you've taken digital images, or scanned images onto your computer, it's likely that they'll be high resolution images, ready for printing. We don't need high resolution images on our computer screens for two good reasons: screen resolutions can't show so much detail and they take up a lot of storage space.

There's a process called optimization which you can use to make your images more usable for your language learning activities. You can either use a program like Photoshop Elements (commercial), or Google's Picasa, which is free from These will enable you to edit your pictures and get the best quality with the smallest storage size.

Let's look at a few things you can do to enhance your images using Picasa.


Imagine we've taken this picture, but we're only interested in using the picture of the mug for a vocabulary exercise.

  1. Open up Picasa. Click on the photo we want to edit.

    Formatting and Enhancing Your Moodle Materials: Part 2

  2. Click on Basic Fixes and then on Crop.

    Formatting and Enhancing Your Moodle Materials: Part 2

  3. Click on Manual in the drop-down menu, then select the bit of the image we want to crop (cut out).

    Formatting and Enhancing Your Moodle Materials: Part 2

  4. Then click on Apply.

    The result will be:

    Formatting and Enhancing Your Moodle Materials: Part 2

Color balance

As it stands, the picture is too dark. There is too little contrast. Picasa will also allow us to create a stronger contrast, just by clicking on Tuning and Fill light and then moving the button across to brighten up the picture.

Formatting and Enhancing Your Moodle Materials: Part 2

The final picture looks like this:

It's smaller and brighter than the original and more appropriate for our Moodle page.

Optimization and image size

The picture above is 340 kb in storage size, which is pretty big. The reason it's so big in storage size is that its real size is 837 px in width and 960 px in height. In case you're new to image measurement, px stands for pixels, which are the dots on your screen. So we have an unnecessarily large image. We can reduce the image size when we insert an image, but it's a much better idea to reduce the dimensions to what we actually need before we import the image into Moodle. That will reduce the storage size at the same time.

Another reason for resizing images is that if you're using several photos on the same page, you'll achieve a much greater sense of balance and therefore effectiveness if all your images are the same size. If we reduce the mug to 100 px in width, the final version is only 92 kb in size.

We can resize images in Picasa by exporting, emailing, or uploading our photos to Picasa Web Albums. When we select File | Export, we can select what size we want.

Formatting and Enhancing Your Moodle Materials: Part 2


One exciting way of enhancing your web pages in Moodle is to use video. You can either upload videos to your own Moodle site or upload them to a site like YouTube, or TeacherTube. Mashable at is an excellent source of ideas and resources for editing, uploading, and sharing your videos.

If you decide to upload your videos onto your Moodle site, you'll need to check their size and the upload limits on your Moodle site. The default limits are usually quite low, but you can get your administrator to change them. You can also get round this problem by uploading your videos direct to the server using an FTP program. You will need to ask your Moodle administrator for help with that.

Embedding videos will save your server's storage space and traffic.

Adding subtitles to your videos

One way of making video content more accessible for language learners is to add same-language subtitles. This would work well as an extension to the read and listen activity. Alternatively, you could get students to produce the subtitles, a rather glamorous type of dictation. If you want to add subtitles to your own videos, this is quite straightforward in free programs like Movie Maker (for Windows) or iMovie (for Macs). Look up "subtitles" in the help files. If you want to add subtitles to a YouTube video, allows you to do just that. You can then embed the final product in your website. Here's what a video with added subtitles could look like:

Formatting and Enhancing Your Moodle Materials: Part 2


If you're not happy with the quality of sound, there are various things you can do to improve it. The six examples below are created with the audio program called Audacity, but most audio editing programs will offer the same tools.

The first four edits are in the Effect menu.

Formatting and Enhancing Your Moodle Materials: Part 2

Remove noise

Effect | Noise removal

If there is an unwelcome background noise on your recording, Audacity has a tool for reducing it. Open Audacity. Open your recording. Select the whole sound track or part of the track that has too much noise by highlighting it with your mouse cursor. Select click on Effect | Noise removal to get to the noise removal tool. On-screen instructions will guide you through the rest of the process. Be careful not to reduce the noise too much, as this sometimes creates distortion.

Fade in and fade out

Effect | Fade in/out

If you want the sound to fade in and out, use your mouse to select the part of the sound track where you want the effect. Then select Effect | Fade in/out to create the effect. This could be useful for a presentation to avoid having a burst of sound at the beginning of the recording.

Change tempo without changing pitch

Effect | Change tempo

This can be very useful, particularly for lower-level learners. It's useful to create two versions of your recordings: one fast and one slow. You can upload both and give students the choice of which one they listen to. The great thing about this tool is that the pitch doesn't change.

Change pitch without changing tempo

Effect | Change pitch

Sometimes you might want to lower or raise the pitch of a voice to make it more audible. This tool lets you do that without the speed changing. It can even be used to simulate a dialog, with you speaking both parts, keeping one at your normal pitch and the other one at a higher or lower pitch.

You'll find the next two settings in the Preferences menu.

Sample rate

This helps determine the quality of your recording. You can think of it as the number of times per second you capture a snapshot of sound while you're recording. Higher sample rates give you more detail. In other words, it's a fuller sound. 8 KHz is the lowest sampling rate you should select for voice recordings. 16 KHz is more likely to produce an acceptable sound. If you have music as well, you'll need a higher sample rate, like 44 KHz.

Bit rate

This is the number of bits (digital 1s and 0s) that are used each second to represent the sound signal. The bit-rate for digital audio is represented in thousands of bits per second (kbps). The higher the bit-rate is, the larger the file size and the better the sound quality. Lower bit rates result in smaller files but poorer sound quality. A good bit rate for recording in Audacity is 32.

Audacity offers many more possibilities, and it's well worth exploring it in detail. Go to for more help.


Most of the navigation work—that is, menus and links—is done for you in Moodle. However, there are things you can do to improve it. Here's a list of tips:

Font size and color

Make consistent use of font size and color with headings so that users recognize the relative importance of different sections. For example, make topics big and bold so that they stand out. Remember that the default font and color is the same as for all other text. You have to make the difference yourself. For example:

Formatting and Enhancing Your Moodle Materials: Part 2

User control

Allow users to move ahead if necessary, so that they feel in control. You can do this by providing explicit headings in your course topics. Don't call an activity "activity". Give it a more specific name, like "Second prepositions grammar exercise". Here are some options for navigation maps:

  • Use the Topics view on your course pages
  • Use Book to organize a syllabus. There's an example of this in the introduction to this article.
  • Use a flowchart program to create a plan. Then import it into your Moodle web page. For example:

Formatting and Enhancing Your Moodle Materials: Part 2


Many flowchart programs allow you to include hyperlinks to the actual activities. To do that, first copy and paste the target web page address from the address bar.

Formatting and Enhancing Your Moodle Materials: Part 2

Then paste that address into the hyperlink in your flowchart program. Here's an example using gliffy:

Formatting and Enhancing Your Moodle Materials: Part 2

  • Create a web page with a menu on it, as in the following screenshots. To make your new web page appear with blocks to the left and right, click on Show the course blocks on the set-up page—it's at the bottom of the next screenshot.
  • Formatting and Enhancing Your Moodle Materials: Part 2

    The final page would look like this. Students will see all the other navigation blocks in the left and right-hand columns.

    Formatting and Enhancing Your Moodle Materials: Part 2

    Graphic navigation links

    Consider using clip art or pictures as navigation links to help users. This is both attractive and speeds up user recognition of signposts.

    Formatting and Enhancing Your Moodle Materials: Part 2

    It also helps students if we keep the number of visible topics on course pages to a minimum. If you have a large number of topics, you can hide them by clicking on the square in the right-hand corner of the page section.


    KISS (Keep It Short and Simple) applies here, too. A page with too much information and too many blocks open is likely to be overwhelming. Whenever possible, resist the temptation and limit the number of blocks. Once you've selected the blocks you want for your course page, think about making the organization logical. For example, put the most useful ones at the top, put blocks which are related to communication in the left column, put blocks for research in the right column, as in the screenshot below.

    Formatting and Enhancing Your Moodle Materials: Part 2

    The above screenshot is an example of My Moodle, which allows students to decide what blocks they have themselves. Once My Moodle is turned on, students will see an Edit this page button which allows them to add and delete blocks. They can also add blocks with their own texts, images, and recordings. It's well worth passing on the principles we've just discussed to students so that they can enjoy some logical organization.


    Layout is all about spacing and proportion. Achieving a balanced, harmonious page is not only pleasing to the eye, but, more importantly, also avoids ugly distractions and guides the user towards the information they need.

    Take this example of an uncomfortable layout:

    Formatting and Enhancing Your Moodle Materials: Part 2

    The gradation of font sizes is fine, but there are several things the author can do to improve it:

    • Avoid the overlap of text by including breaks in the HTML editing box
    • Include padding around the text
    • Create a space between the top heading (for example, Grammar) and the next heading Easy
    • Create style harmony by removing the background color
    • Use the same font face for the Welcome heading as for the other headings

    The next illustration shows an improved version of this page. The layout "breathes" a bit more because there's more space. It's simpler, and there is no distracting "noise".

    Formatting and Enhancing Your Moodle Materials: Part 2

    Making a point—or giving an example using nested inlines

    We can use space to make examples stand out. Take the following text:

    The preposition "at" in English is used to express time or place.

    Example using time: She was here at 3 o'clock

    We could further enhance the important information by creating a nested inline. Nested means there's an indent from the left margin. Inline means it comes between the other lines. The easiest way to do that is to insert a table. Books on web design might tell you not to use tables for positioning text elements, but for non-experts, it's a simple, effective solution.

    To make the example really stand out, we could even add a background color. You'll have more editing tools, and can achieve a better layout if you expand the HTML editing menu. To do that, click on the enlarge editor. That's last icon on the bottom row:

    This is what the enlarged editor looks like:

    Formatting and Enhancing Your Moodle Materials: Part 2

    Hovering mice

    If you hover the mouse cursor over each of the icons, you'll see what the icon's function is.

    Here's how to do it

    1. Write the first line of text ("The preposition 'at' in English", etc.).
    2. Press return twice to position the cursor below that line.
    3. Insert a table by clicking on the table icon:
    4. Complete as below.

      Formatting and Enhancing Your Moodle Materials: Part 2






    Write 1.


    Write 1.


    Use 80 Percent. This means that the table will not occupy the whole width.


    Use Middle. This will create margins on either side of the table.

    Border thickness

    Write 1. This refers to the thickness of the line around the table.


    Write 1. This is the distance between each cell of the table. As we only have one cell, that doesn't concern us here.


    Write 1. This is the distance between the inside of the line around the cell and the text. Leave it on 1 for now. We'll increase it in the next step.

  • Now write in your example text. Select the whole text and make sure it is aligned to the center.

    Make sure the cursor is inside the table cell, then click on the table properties icon (the first icon on the bottom row) to get the following box:

    Formatting and Enhancing Your Moodle Materials: Part 2







    Caption and Summary

    Leave these blank unless you want your table to be labeled in the text.


    Leave this blank. We've already set the alignment to Middle.


    Write: 5 pixels. This will create a cushion between the text and the edge of the table.


    Use All four sides.


    Select a light background color by clicking on the color square.

    FG Color

    Here we can change the font color by clicking on the square.


    Here we can change the table border color by clicking on the square.

    Image URL

    We could also include an image as a background if appropriate.


  • Click on OK to save the changes.
  • Then click on the minimize editor icon to get back to the normal editing screen.
  • Finally, click on Save changes. You should now have something like this:

    Formatting and Enhancing Your Moodle Materials: Part 2

  • Style guide

    Once you've worked out how you want to achieve contrast, consistency, alignment, and control layout, it's a good idea to summarize this in a style guide document, which you should then give to all course creators and teachers on your Moodle site. Of course, it's possible that your Moodle courses are living along side other Moodle courses in your organization, in which case you'll need to make sure you follow your organization's style guide.


    Don't forget that some users are visually impaired. Here are a few tips you can follow to make life easier. In fact they're good practice even for users who aren't visually impaired.

    Alt tags

    Alt stands for Alternative text. If you use images, use the Alt tag to provide a clear text alternative. An alternative text should let the user know what an image is and the purpose of that image; in this example, we have This is a picture of our dog, Rover, when he was 6 months old..

    Formatting and Enhancing Your Moodle Materials: Part 2

    Computer users with visual impairment can obtain programs that read aloud Alt tags, like the one in the screenshot below.

    Formatting and Enhancing Your Moodle Materials: Part 2

    There's more on Alt tags at If you're interested in programs that read aloud computer text, do an Internet search for "text to speech software".

    More on color

    Since some users find it hard to distinguish between colors, make sure that information conveyed by the use of color would be understandable without color.


    Every link should indicate where it is going to take the user. Specific link names and minimal instructions will help the user know what will happen when they click on the link.

    Less clear linking

    Clearer linking

    There's more information about Course 5 here.

    Click for more information about Course 5.


    Clip descriptions

    If you use audio or video files, provide a description/transcript in text form. It can be on the same page, or a hyperlink to a separate page can be placed near the clip.


    Solicit feedback on your design. You can use the Questionnaire module to design a simple survey about your website. Find out from your students and other teachers what they like and don't like about it. Do what you can to make changes.


    That's the end of a very basic coverage of some key design principles. As we saw in the introduction to this article, we can make small changes that have a big impact as far as the user's experience is concerned. These changes enhance both the site usability and the user's aesthetic experience. If you're interested in this area, it's well worth following it up on some websites that focus on information design. For example:

    [ 1 | 2 ]


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

    You've been reading an excerpt of:

    Moodle 1.9 for Second Language Teaching

    Explore Title