This document provides best practices for course development in Moodle 2.x. It discusses using files and repositories, media like images and video, responsive design, and backups. For files, it recommends reusing files through aliases and using repositories. For media, it suggests using streaming video services and optimizing image sizes. Responsive design ensures layout adjusts for different devices. Backups should be site-wide but limit included data to save space, while instructors backup major changes and remove files.

1. BEST PRACTICES IN
COURSE
DEVELOPMENT
Using Moodle 2.x

2. Overview
 Use of Files in Moodle
 Reusing Files- Alias Shortcut Method
 Repositories
 Using Media in Moodle
 Images
 Video
 Course Layout
 Responsive Design
 Backups
 Site-wide vs Individual

3. Use of File in Moodle
 Many types
of files can
be used in
Moodle.
 Moodle
uses a
system that
allows files
to be used
from many
different
places.

4. Use of Files in Moodle
 You can
reuse files
in Moodle
by
choosing
the add
alias or
shortcut
method.

5. Alias/Shortcut Method
 This is an image of
the File picker.
 Notice how the
option to “create an
alias/shortcut to file”
is selected.
 This links to the file
and does not copy
the file into Moodle.
 This also allows for
any changes made
in the original file to
show in the alias
file.

6. Repositories
 Repository access is one of the great features
in Moodle 2+ versions.
 This allows the Moodle Site Administrator to
set up File Storage areas that users can use in
and outside of Moodle.
 There are multiple repositories that can be
enabled.
 A short list is: Google Drive, Dropbox, Picasa,
Alfresco, Amazon S3, YouTube, Flickr, Merlot,
and many more.

7. Repositories
 By enabling a repository outside of your Moodle
site and using the alias/shortcut method, you can
use files without storing them in Moodle.
 Things to consider:
 The backup file of a Moodle course that uses this
method will not contain a copy of that file. So if you
share your course backup with someone, they will
need to have access to the repository you used as
well.
 If the file is on a repository that allows public sharing,
such as Google Drive, then those files will still be
accessible in the backup/restored course.
 The alias /shortcut method allows you to change a
document in one place for all.

8. How to Set-up a Repository
 To enable a repository, you must have Moodle
admin rights.
 Go to: Site Administration (Block) -> Plugins ->
Repositories -> Manage Repositories
 Some repositories also require unique settings.
For example, to set-up the Google Drive
repository you must have Admin access to your
Google Apps account and visit the Google Apps
API Console to create a web app and receive a
client ID and secret.
 For Google Drive, once this has been established,
users can log into Google and have access to
their Drive files.

9. Using Media in Moodle
 Media is a great medium for teaching and
learning. Images, video, and audio files enrich
the learning experience.
 It is important to remember some best
practices, however, when choosing and using
media in Moodle.
 This will enrich the user experience as well as
the resource load on your Moodle site.

10. Using Media in Moodle
 Images
Using images in Moodle is a must to break up the
monotony of text. Here are a few tips to decrease file
size and or need of storing files in Moodle.
 Use a image repository like Flikr or Picasa Web
Albums.
 If you want to use your own images, you must get
them internet ready. You can do this with any image
manipulation software such as the MS bundled Paint
program.
 You need to reduce the file size. This can be done by
making the image smaller, no larger than 600 px is
usually necessary.
 Some programs also help you compress the image by
removing extraneous pixels and using a more
compact file type. GIF, JPG and PNG are standard

11. Images
 Raw image in MS Paint Program (3.4 MB)

12. Images
 Same image
resized to
600px wide,
now 326.7
KB. This is a
90%
reduction in
file size!

13. Images
 Now we will compare the
size of each file type.
 GIF uses the least at 120
KB, but quality is poor at
least for a photo.
 JPG only slightly higher at
157 KB but much better
quality
 PNG is largest with 615KB
(this type is great for
illustrations or images
needing a transparent
background, but not needed
for photos.
We have reduced the size of the
original image file anywhere from
81% - 97% !

14. Video
 Video and Audio are wonderful teaching tools;
But… take up a lot of file space and can be
frustrating to the user if they have to download
the video/audio file first before using, or if their
device is not compatible with the file type
 It is important to keep these things in mind
when choosing how to use video in your
Moodle course.

15. Video
 Video should ALWAYS be streamed. This
means that the video is stored in a place that
allows streaming through a video player.
 This means DO NOT upload your recorded
video to Moodle, use a service like YouTube or
similar video streaming service.
 Using a video streaming service ensures that
the file is stored in multiple file “flavors”, and
generally it will have a player that detects the
device viewing it and chooses the appropriate
flavor for that device.

16. Video
 Why is this important!
 iPads and iPhones do not have the ability to play
Flash files. This is a common format for some
types of video creator software.
 You want your video accessible from any device.
This requires different formats and decoders
depending on the device viewing it.
 You do not have time to transform and encode
files and players for each device that may view
your course.

17. Video
 How to use video-
 When choosing a service,
 Make sure that the service will transcode the original
video into several formats/flavors that work on all
devices.
 Make sure the service supplies a option to view it
using a HTML5 enabled player for device detection
and streaming
 Make sure it supplies an embed code (or URL) with
these options for putting it into your Moodle course.
 Optional but desirable, see if it is already compatible
in Moodle. That way you can use videos inside
Moodle without leaving.

18. Video
 Example
 YouTube is an available
repository in Moodle.
 You can use this repository when
adding a video to any page or
label in Moodle.


19. Video
 When selecting the
YouTube repository
you can search
YouTube by
keywords

20. Video
 After selecting
a video you
can see a
preview before
inserting into
your page or
label.

21. Video
 When inserted the video will look like text with
a link. This is normal. The video will not embed
until saved as it needs a player to view.

22. Video
 Saved view in resource

23. Video
 In order for this method to work in all devices,
the Moodle administrator must select the
HTML5 player option in
Make sure that the following are checked

24. Responsive Design
 Responsive design simply means adjusting the layout
according to the environment viewing it. Simply put
the smaller the screen, the more rearranging that
needs to be done.
 In web design this typically means using a
combination of HTML and CSS to adjust containers,
images, and locations so that it adjusts to a pleasing,
easy to use page. In an online learning environment
there is more to consider. Things such as resource
types (i.e. flash movie on and iPad) may not work at
all on the device viewing it. Navigation is also a big
consideration. Some of those fancy pull down menus
do not always work correctly on a mobile phone,
causing user frustration.

25. Responsive Design
 When designing for an online learning
environment, one must consider:
 navigation,
 resources used, and
 view-ability.

26. Responsive Design
 Moodle has many tools that will help you design
a course that will work on any device. Starting
with version 2.x, Moodle has built in device
detections to assign appropriate themes. The site
administrator can choose different themes
according to the device viewing it. Moodle allows
different themes for default, tablet, and mobile
devices.

27. Responsive Design
 Starting with version 2.5,
Moodle now offers a
theme called Clean
theme that uses a
bootstrap base for
a responsive design.
This theme is designed to
de-clutter the page and to
adjust navigation and
content based on the size
of the screen viewing it.
This theme has built in
style sheets that detect
and adjust added content
automatically, without the
content creator having to
know any coding.

28. Responsive Design
 Beyond what Moodle has to offer there are things that the course
designer can do as well. A course designer should also consider the
content that they are using in a course. Many of these pieces have
various settings and forms that are friendlier for mobile devices.
 Video – Using video is a great learning tool. However, course
designers should consider the user experience when choosing video
content.
 Streaming is the preferred method of video delivery. Uploading a video to
use as content can cause user frustration because a) they have to
download the entire thing before they can view it, b) some video “flavors”
such as flash do not work on some devices (they have no built in tools to
view it.), and c) Moodle is not designed to be a video repository (storage
locker) for large files. It uses too many valuable resources and disk
space, causing courses to be too large to backup and restore in some
Moodle sites.
 Choosing a video service is very important. At minimum the video service
should be able to take most video formats (.flv, .mov, .mpeg-4, .avi) and
convert it into multiple “flavors” for internet streaming via any device. The
service should also have a player that adjusts the “flavor” depending on
the device being used. HTML5 is becoming a common standard used for
delivering content on the web to multiple devices. Look for video services
that include this format in their players. YouTube is a good place to start.

29. Responsive Design
 Files – When attaching files it is a good idea to think about the
devices that may use them and make sure that the device has
a built in tool to view it. For instance, a PDF is a common
standard and most mobile devices have apps that will support
viewing them if installed. Include links for downloading apps
for android and apple that will support the file types used. This
guides users to the tools they will need on their device to view
your resources properly.
 Adobe Mobile Download Apps -
http://www.adobe.com/products/reader-mobile.html
 Tables, Images, and Layout – When using the built in Moodle
Editor tools, a course creator should keep in mind responsive
techniques. By default, the Moodle editor will assign a width
and height based on the image size or on the content placed.
Using a % value instead of a fixed number in pixels or adding
a max-width and min-width will help the screen layout the
content according to the size of the screen. See the next
pages for examples of how to use custom tools to aid in this
process.

30. Responsive Design
 A responsive image means that the size of the image will
adjust with the size of the viewing screen. There is a few
different ways to make an image responsive depending
on the placement of the image.
 The best way to make images responsive is to use a
percentage based on the amount of screen space you
would like it to occupy. Below is two versions of one
image. The original file is the same. I have not created
another image using different sizes. The only difference
between the two images is different style values.

31. Responsive Design
• The first copy has a
max-width of 100% in
relation to the container
it is in.
• The second is at a max-
width of 50%.
• For both the height is set
to auto.

32. Responsive Design
Moodle Settings for the Responsive Images
 To apply the settings to the images on the last page, I did
the following:
 I clicked the Image Icon in the Moodle Text Editor
 Locate the image you would like to use by selecting
Find or Upload Image and locating it in the File picker.

33. Responsive Design
Moodle Settings for the Responsive Images
 Once selected, your Image properties box will display
and click the Appearance Tab
 In the Appearance Tab, clear any number values from
the Dimensions Boxes

34. Responsive Design
Moodle Settings for the Responsive Images
 Fill in the Style field with your max- and min-width
values and height: auto.
 For Example: max-width: 90%; min-width: 35%;
height: auto;

35. Responsive Design
Using Responsive Tables
Sometimes it becomes necessary in Moodle to
use a table as a container to lay things out. I see
this done many times to make a course more
compact.
Here is an example: using a table with icons and
links to different parts of the course to streamline
the look of Moodle. This is a great design idea,
but can give headaches when portions of the table
do not show up for smaller screens or even in
Moodle if the theme is changed. Here is a way to
make a responsive table to adapt to any device

36. Responsive Design
Using Responsive Tables
By default, the table will automatically fill a space in
Moodle as content is added. The table becomes a problem
when content is added like an image that has a specific
width that is larger than the screen width. Here's what it
looks like and on the following page, how to fix it.
Here is a Icons Table in Moodle in a standard window.

37. Responsive Design
Using Responsive Tables
 Here it is what happens if the screen size is less than
the total accumulated value of the pictures + cell-space
combined. Notice the Scroll Bar appears and an image
is missing from view. This can become an issue on
mobile devices. Sometimes the scroll bar will not be
accessible.

38. Responsive Design
Making a Responsive Table with Images
To fix this scroll in our table we must first assign a
responsive value to the table itself. To do this:
1. Right Click on your table and choose table properties,
or select your table and click the table icon.

39. Responsive Design
Making a Responsive Table with Images
2. In the Table Properties box, click Advanced tab. In the
style field type the following:
table-layout: fixed; width: 100%;
3. Click Update

40. Responsive Design
Making a Responsive Table with Images
Now we have a responsive table. Next we have to make
each image responsive as well. We will use the same
method as before; clearing the number value in pixels and
using max-width set to 100% and min-width set to 45% in
the style field.

41. Responsive Design
Making a Responsive Table with Images
Now our table and images will shrink and grow with the
screen size.

42. Backups
Site-wide vs Individual
 Backing up your courses is an important step. It
can save you many agonizing hours of work.
 Backing up Moodle courses can take quite a bit of
room. Here is a few things to consider in creating
a back-up plan for your site.

43. Backups
Site-wide
 A site-wide back-up
should be in place;
however there are a few
important settings that
should be configured so
as not to eat up valuable
disk space.

44. Backups
 When setting up
automated
backups, make
sure to keep
settings as low as
possible. Keeping
10 course backups
is unnecessary and
eats up your disk
space quickly!!
Think all your
courses x ten,
that’s almost 10x
your moodle site in
storage space.

45. Backups
 Including users
should only be
done in one place.
 If you decide that
users are going to
be included in the
automated backup,
then teachers
should not include
it in their individual
backups.
 See Admin settings
on next page of
defaults

46. Backups
 If you include
users on the
Automatic
Backups, then go
to General backup
settings and
uncheck the
“Include users” box
and click save.
 This way when a
teacher makes a
backup, by default,
(they can change
it) users will not be
included.

47. Backups
Individual
 Teachers should also make
backups of their courses
when they have made major
design changes.
 They should then download
these versions and keep a
local copy outside of
Moodle.
 This can be considered a
clean course to start fresh
from and should be done
after every major grading
period.
 Once downloaded the
backup can be deleted from

48. Backups
Individual
 To delete a backup file, Click restore from the
Course Administration Block to access course
backup files
 Then click manage backup files

49. Backups
Individual
 Click the file you
would like to delete
and a pop-up box
appears.
 Click the delete
button