Introducing the Bootstrap and Clean themes
In recent years, a mobile-friendly theme called Bootstrap was developed in the Moodle community and released as an open source theme on https://moodle.org/. Bootstrap is a responsive theme. If you haven't come across the idea of responsive web design before, it is actually very simple. It allows the developer to use the browser's built-in ability to detect the screen width and deliver different layouts for different screen widths. For example, a 1,000 pixel wide screen can support a three-column layout but this can be automatically changed to a two-column layout if the screen is under 600 pixels wide, and when it reaches the smaller smartphone width of 300 pixels then the content can be reworked into a single-column layout.
The Bootstrap theme does exactly this, and will adjust your layouts depending on the user's screen width. If you are using Moodle 2.2 through to 2.4, you can download and use the Bootstrap theme (available on https://moodle.org/); this chapter will show you how to do that.
The Bootstrap theme proved so popular within the Moodle community that it was actually included with Moodle 2.5, in the form of a theme called Clean. If you have Moodle 2.5, you simply need to enable this theme. This chapter will also show you how to do that.
Note
A little bit of mobile Moodle history
The Bootstrap and Clean themes superseded an earlier attempt at a Moodle mobile theme, which was called MyMobile, and which shipped with Moodle 2.2.
MyMobile used the browser's device detection feature and passed this information to Moodle. Moodle could then be configured to deliver different themes depending on the device type. However, this became slightly problematic over time because of the mobile device convergence issue we mentioned in Chapter 1, Developing Your Mobile Learning Strategy. For example, there are now large and small tablets, and large and small smartphones, and the largest smartphones are pretty similar to the smallest tablets. Delivering a theme using device detection forces the same theme to a particular type of device, regardless of whether it has a large or small screen.
The mobile hardware landscape is changing so fast that it is no longer realistic to expect Moodle developers to keep changing their code to keep up with the device proliferation. Responsive themes are a far more elegant solution. Developers cannot plan for new device types that may appear in future, but they can plan for different screen resolutions.
For this reason, we excluded MyMobile from this book. It was a great first attempt at mobile support in Moodle, but has now been superseded.