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