Designing a Multi-device Moodle Course Site

Paul D Hibbitts @hibbittsdesign #iMoot2014

A case study, presented for iMoot 2014

How many mobile devices do you use daily?

Why use Moodle in 2014?

Moodle’s Strengths (to me) !  Learning – Discussions (Forums) – Networked learning (Blogs + RSS, Twitter, etc.) – Collaborative (Glossary) – Mix of public and private (User Permissions)

!  Interface – Embedding of third-party objects, via HTML – Ability to hide/show Topics Sections – Language Pack customizations – The easy “hackability”of PHP

Moodle 2.5 was a true milestone release… why?

The Bootstrap Framework !  Grid-based layout !  Support for responsive design !  Interface components (e.g. tabs) !  Javascript snippets (e.g. dialog boxes)

Aardvark Theme

Aardvark Theme

Elegance Theme

Elegance Theme

Are you currently supporting multi-device friendly courses?

Multi-device delivery is now easy, but doing it well is not

Creating a Multi-device Learning Strategy Foundation

!  Why? (i.e. problem, opportunity, etc.) !  Who? (i.e. audience, setting, etc.) !  What? (i.e. learner goals, organization goals, etc.) !  Where? (i.e. context, devices supported, etc.) !  When? (i.e. learner intent, off-line access, etc.) !  How? (i.e. organizational support and capabilities,

existing or new content, etc.)

Redefining “Mobile Learning” in a Multi-device World

!  Ubiquitous !  Situational !  Connected !  Personal

Multi-device Experience Goals !  Conceptual and visual consistency !  Content and functionality parity !  Seamless task transferability !  Think ecosystem, not isolated devices !  Optimize physical interactions on every device

Multi-device Learner Experience Goals

!  Engaging !  Organized !  Relevant !  Appealing

Time for Questions or Comments

!  What we’ve covered so far – Why use Moodle in 2014? – Multi-device support is now easy,

but doing it well is not – Creating a multi-device learning strategy foundation – “Mobile Learning” in a multi-device world – Multi-device experience goals – Multi-device learner experience goals

!  Coming up – A guided tour of a multi-device Moodle site

A guided tour of a multi-device Moodle course site...

University of British Columbia (UBC) Continuing Studies,

part of the largest university in Western Canada.

http://iy103-w14.hibbittsdesign.com/ (built with Moodle 2.6.1)

Bootstrap (2.x) HTML Snippet

<div class="media"> <a class="pull-left" href="#"> Media thumbnail object </a> <div class="main-body"> Descriptive text for media </div>

</div>

Media Thumbnail with Descriptive Text

Bootstrap (2.x) HTML Snippet

<div class="row-fluid"> <div class="span6"> Column one content </div> <div class="span6"> Column two content </div>

</div>

Two Column Layout

Next Steps (besides getting v2.7) !  Try out the included Bootstrap theme Clean (v2.5+) –  docs.moodle.org/dev/Clean_theme

!  Check out Bas Brands’ Bootstrap themes –  http://theming.sonsbeekmedia.nl/

!  Learn more about the Bootstrap Framework –  getbootstrap.com/2.3.2/ (version 2.x) –  getbootstrap.com/ (version 3.x)

!  Learn more about multi-device design –  lukew.com/presos/preso.asp?28 –  blog.teamtreehouse.com/beginners-guide-to-responsive-

web-design

Thank you! Any questions? !  Contact Info – Web: paulhibbitts.com – Email: paul@paulhibbitts.com – Twitter: @hibbittsdesign – LinkedIn: linkedin.com/in/paulhibbitts

!  IY103-W14 Course Companion –  iy103-w14.hibbittsdesign.com – Google Chrome web app: bit.ly/1fPTBvw

Chrome App Launcher

http://chrome.blogspot.ca/2013/12/a-new-breed-of-chrome-apps-now.html