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: [email protected] – 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