Designing a
Multi-device Moodle Course Site

A case study, presented for iMoot 2014

Paul D Hibbitts 
          @hibbittsdesign  #iMoot2014 

How many mobile devices do you use daily?

A) One
B) Two
C) Three
D) Four or more
E) None

Why use Moodle in 2014?

Moodle’s Strengths (to me)


  • Learning
    • Discussions (Forums)
    • Networked learning (Blogs + RSS, Wikis, 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)



Does your Learning Management System (LMS)
support multi-device friendly courses?

Yes
No

Multi-device delivery is (or soon will be) 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 of use, devices to be 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 course 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


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


Bootstrap (2.x) HTML Snippet

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















Next Steps (besides getting v2.7)




Thank you! Any Questions?


 


Chrome App Launcher


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

Made with Slides.com