Making Moodle Multi-device Friendly with Bootstrap

Dressing for success in a Multi-Device World, Twitter: @basbrands

Making Moodle Multi-device Friendly with Bootstrap

Use Spacebar / swipe to go to the next slide, press n to view my notes

What do we all have in common?

Firefox OS phones Photo Credit: d_vdm cc

You (often) interact differently on each device

  • Your read texts on your mobile while traveling
  • You write on you laptop
  • You watch youtube on your tablet
  • You game on your gaming console

Your LMS is already being used on multiple devices.

But the results are not always a success

A sample picture of a Moodle login page in the Old days
  • Pinching and Zooming
  • Clicking tiny links
  • Hard to read

Choosing the right theme is a first step

A sample picture of Moodles login page with Bootstrap
  • No Zoom
  • Focused on most important element
  • Easy to read

Jacob Thornton

Fat Picture of @fat on twitter

Mark Otto

Mark Otto Mark Otto on Youtube
Bootstrap CSS Image by Bas Brands
Bootstrap Javascript Image by Bas Brands

It's simple right?

Bootstrap Javascript Moodle themeing factory

Okay maybe not, a team was needed

Obiwan
  • Developers
  • Testers
  • Moodle HQ
  • Github and the Moodle tracker
Github Octodex

The early adopters

City University London


The Grid

The City Universite Bootstrap 2 theme

The Grid

The City Universite Bootstrap 2 theme

The Grid

The City Universite Bootstrap 2 theme on an Ipad

Navbars

The City Universite Bootstrap 2 theme on an Iphone

Navbars

The Moodle theme selector

A few themes onward

King Faisal University / Shabaka Training


The King Faisal Bootstrap 2 theme
The King Faisal Bootstrap 2 theme

Mobile

The Moodle theme selector

Try Bootstrap 3 on Moodle.moodlemoot.ie


The Edinburgh Moodle Moot theme
The Edinburgh Moodle Moot theme, a course view
The Moodle theme selector
The Moodle theme selector
The Moodle theme selector

The new Bootstrap 3 theme.

Moodle Bootstrap theme
  • Complete rewrite
  • New settings
  • Auto generated CSS
  • Bootswatches

command line

        LUNA$ grunt swatch --name=lumen

Bootswatches

Bootswatches Lumen and Superhero

Bootswatches

Bootwatches Cupid and Shamrock

Beyond theming: Multi Device plugins

The Moodle theme selector Photo Credit: tulensrma

The webvideo Activity

Plugin webvideo in action

The HTML5video filter

Plugin webvideo in action

The responsive images filter

Moodle Bootstrap theme Photo Credit: marcoderksen

Thank you!

Sonsbeekpark Photo Credit: Bas Boerman cc

@basbrands / theming.sonsbeekmedia.nl

Twitter
Image by Bas Boerman