Responsive Design and Moodle

This resource is intended to guide you through a few responsive web design techniques

to improve view-ability of your Moodle course on any device.

1 Responsive Course Design in Moodle

This resource is intended to guide you through designing your course using responsive

design for any device. To start we must understand what responsive design is in

general, and how it may apply to an online learning environment.

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.

When designing for an online learning environment, one must consider:

navigation,

resources used, and

view-ability.

We will keep these items in mind as we discuss laying out your course using Moodle.

2 What Moodle Offers

Let's begin with Moodle. 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.

The built in MyMobile theme was the first approach to laying an eLearning

environment differently according to devices. The MyMobile theme rearranged the

navigation structure and block layout. Blocks were put in a "menu" button to de-clutter

the page. Navigation was also put in a button. The page itself was streamlined into a

one column approach to capitalize on space.

Starting with version 2.5, Moodle now offers a bootstrap base theme that can be used as

a responsive base for any new theme developed. It also offers a theme called Clean

themethat uses this base for a responsive design. These themes are designed to de-

clutter the page and to adjust navigation and content based on the size of the screen

viewing it. These themes have built in style sheets that detect and adjust added content

automatically, without the content creator having to know any coding.

3 Adding Custom Responsive Techniques

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.

1. Video – Using video is a great learning tool. However, course designers should

consider the user experience when choosing video content.

1. 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.

2. 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.

2. 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.

1. Adobe Mobile Download Apps -

http://www.adobe.com/products/reader-mobile.html

3. 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 constant 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.

3.1 Adding a Responsive Image

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.

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.

Make your browser skinnier to see the effects of screen width on the images

below.

Notice how both proportionately shrink until they have reached the min-height

value (25% of the original value)

3.2 Moodle Settings for the Responsive Images

To apply the settings to the images on the last page, I did the following:

1. I clicked the Image Icon in the Moodle Text Editor

1. 2. Locate the image you would like to use by selecting Find or Upload Image and

locating it in the File picker.

3. Once selected, your Image properties box will display and click the Appearance

Tab

4. In the Appearance Tab, clear any number values from the Dimensions Boxes

5. Fill in the Style field with your max- and min-width values and height: auto.

1. For Example: max-width: 90%; min-width: 35%; height: auto;

6. Click Insert

3.3 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 link 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 and work with any theme.

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.

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.

3.4 Making a Responsive Table with Images

To fix this scroll in our table we must first assign a responsive value to our table itself. To

do this:

1. Right Click on your table and choose table properties

2. In the Table Properties box, click Advanced tab. In the style field type the

following:

table-layout: fixed; width: 100%;

3. Click Update

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.

Now our table and images will shrink and grow with the screen size.