How do I design a course for all devices?

Sheilla Norton
2013-08-27 10:00

This resource is intended to guide you through a few responsive web design techniques to improve
viewability of your Moodle course on any device.

Table of contents
1 Responsive Course Design in Moodle
2 What Moodle Offers
3 Adding Custom Responsive Techniques
3.1 Adding a Responsive Image
3.2 Moodle Settings for the Responsive Images
3.3 Using Responsive Tables
3.4 Making a Responsive Table with Images


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

To Continue Reading Open the Attachment

Attached files: Responsive Design and Moodle.pdf

Tags: design, mobile, responsive, tablet
Average rating: 0 (0 Votes)

You cannot comment on this entry