Responsive Web Designs for Mobile Learning

Moodle Landscape

Moodle
Portrait
Mode

The default user interface for the Moodle learning management system (Version 2.9.2+) is called "Clean" theme . This is a responsive web design, which will automatically adjust from the usual three column layout used for Moodle on a desktop computer, to a one column design for a mobile device. This is triggered not by detecting a mobile device, but purely from the width (in Pixels) of the display screen. If the screen is less than 768 pixels wide, the Clean theme displays only one column of text.

The figure of 768 pixels is commonly used for what is called in web design a "breakpoint", where the layout is changed from desktop to mobile format (Natda, 2013).

You can try this with the Moodle Demo using the Mobile Browser Emulator extension for Google Chrome, or simply by making the width of your web browser window smaller until the columns disappear. Try your own installation of Moodle and see if you get the same result (there are many non-responsive Moodle themes still in use).  


The Mahara e-Portfolio has a similar responsive design by default, you can try this with the Mahara Demonstration.

Reference

Natda, K. V. (2013). Responsive Web Design. Eduvantage, 1(1). Retrieved from http://cms.omvvim.ac.in/index.php/eduvantage/article/viewFile/18/pdf