Presented at Moodle Moot New Zealand, 2014.

1. @hibbittsdesign #MootNZ14
Designing aDesigning a
Multi-device MoodleMulti-device Moodle
Course SiteCourse Site
A case study, presented for Moodle Moot NZ14
Paul D Hibbitts

2. Are you currently deliveringAre you currently delivering
multi-device friendly Moodle courses?multi-device friendly Moodle courses?

3. Moodle 2.5 was aMoodle 2.5 was a
true milestone release… why?true milestone release… why?

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

5. Responsive Web Design (RWD)Responsive Web Design (RWD)
http://www.paulolyslager.com/responsive-design-hype-solution/

9. Multi-device delivery is now easy.Multi-device delivery is now easy.
Creating great multi-deviceCreating great multi-device
learning experiences? Not so much...learning experiences? Not so much...

10. Creating a (Multi-device)Creating a (Multi-device)
Learning Strategy FoundationLearning Strategy Foundation
Why? (i.e. problem, opportunity, etc.)
Who? (i.e. audience, setting, etc.)
Where? (i.e. context of use, devices to be supported, etc.)
When? (i.e. learner intent, off-line access, etc.)
What? (i.e. learner goals, organization goals, etc.)?
How? (i.e. organizational support and capabilities,
existing or new content, etc.)

11. Example RWD Design ProcessExample RWD Design Process
http://viljamis.com/blog/2012/responsive-workflow/

12. RWD SketchingRWD Sketching
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets/

13. Content InventoriesContent Inventories
A standard IA technique - even more essential for RWD
Inventory a first step, but prioritization is the key
Plays a key role when deciding upon RWD breakpoints

14. Redefining “Mobile Learning”Redefining “Mobile Learning”
in a Multi-device Worldin a Multi-device World
Ubiquitous
Situational
Connected
Personal

15. Multi-device Experience GoalsMulti-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

16. Multi-deviceMulti-device
Learning ExperienceLearning Experience GoalsGoals
Learner-driven
Valuable
Streamlined
Collaborative
Open
Integrated
Available
Multi-device (goes without saying...)

17. So, What's theSo, What's the RealReal StoryStory
About Multi-device Learning?About Multi-device Learning?
The unparalleled opportunity to enhance,
or replace, formal learning with elements of:
Performance support
Informal learning
Social networking
Real-time coaching/mentoring

18. Time for Questions or CommentsTime for Questions or Comments
What we’ve covered so far
Why version 2.5 was a true milestone release
Multi-device support is now easy, but doing it well is not
Creating a multi-device learning strategy foundation
Responsive Web Design as a process
“Mobile Learning” in a multi-device world
Multi-device experience goals
Moodle course site learner experience goals
The real story about multi-device learning
Coming up
A guided tour of a multi-device Moodle course site

19. A guided tour of aA guided tour of a
multi-device Moodle course site...multi-device Moodle course site...
University of British Columbia (UBC) Continuing Studies,
part of the largest university in Western Canada.
(built with Moodle 2.6.1)http://iy103-w14.hibbittsdesign.com/

29. Bootstrap (2.x) HTML SnippetBootstrap (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>

31. Bootstrap (2.x) HTML SnippetBootstrap (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>

45. Multi-device Moodle ResourcesMulti-device Moodle Resources
Try out the included Bootstrap theme Clean (v2.5+)
Learn more about the Bootstrap Framework
(version 2.x)
(version 3.x)
Download and install a Moodle Bootstrap add-on Theme
docs.moodle.org/dev/Clean_theme
getbootstrap.com/2.3.2/
getbootstrap.com/
moodle.org/plugins/view.php?plugin=theme_aardvark
moodle.org/plugins/view.php?plugin=theme_elegance
moodle.org/plugins/view.php?plugin=theme_decaf
github.com/gjb2048/moodle-theme_shoehorn

48. Thank you! Any Questions?Thank you! Any Questions?
Contact Info
Web:
Email:
Twitter:
LinkedIn:
Additional multi-device design resources
OneNote notebook:
Worksheets:
IY103-W14 Course Companion
Google Chrome web app:
paulhibbitts.com
paul@paulhibbitts.com
@hibbittsdesign
linkedin.com/in/paulhibbitts
1drv.ms/1qYSWke
1drv.ms/1yvdNSP
iy103-w14.hibbittsdesign.com
bit.ly/1fPTBvw

50. Chrome App LauncherChrome App Launcher
http://chrome.blogspot.ca/2013/12/a-new-breed-of-chrome-apps-now.html