moodle moot nz14 - designing a multi-device moodle course site: a case study
TRANSCRIPT
@hibbittsdesign #MootNZ14
Designing aDesigning aMulti-device MoodleMulti-device Moodle
Course SiteCourse Site A case study, presented for Moodle Moot NZ14
Paul D Hibbitts
Are you currently deliveringAre you currently deliveringmulti-device friendly Moodle courses?multi-device friendly Moodle courses?
Moodle 2.5 was aMoodle 2.5 was atrue milestone release… why?true milestone release… why?
The Bootstrap Framework(!)The Bootstrap Framework(!)
Grid-based layoutSupport for responsive designInterface components (e.g. tabs)Javascript snippets (e.g. dialog boxes)
Responsive Web Design (RWD)Responsive Web Design (RWD)
http://www.paulolyslager.com/responsive-design-hype-solution/
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...
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.)
Example RWD Design ProcessExample RWD Design Process
http://viljamis.com/blog/2012/responsive-workflow/
RWD SketchingRWD Sketching
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets/
Content InventoriesContent Inventories
A standard IA technique - even more essential for RWDInventory a first step, but prioritization is the keyPlays a key role when deciding upon RWD breakpoints
Redefining “Mobile Learning”Redefining “Mobile Learning”in a Multi-device Worldin a Multi-device World
Ubiquitous Situational Connected Personal
Multi-device Experience GoalsMulti-device Experience Goals
Conceptual and visual consistencyContent and functionality paritySeamless task transferabilityThink ecosystem, not isolated devicesOptimize physical interactions on every device
Multi-deviceMulti-deviceLearning ExperienceLearning Experience Goals Goals
Learner-driven Valuable Streamlined Collaborative Open Integrated Available Multi-device (goes without saying...)
So, What's the So, What's the RealReal Story StoryAbout 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
Time for Questions or CommentsTime for Questions or Comments
What we’ve covered so far Why version 2.5 was a true milestone releaseMulti-device support is now easy, but doing it well is notCreating a multi-device learning strategy foundationResponsive Web Design as a process“Mobile Learning” in a multi-device worldMulti-device experience goalsMoodle course site learner experience goalsThe real story about multi-device learning
Coming upA guided tour of a multi-device Moodle course site
A guided tour of aA guided tour of amulti-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/
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>
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>
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_aardvarkmoodle.org/plugins/view.php?plugin=theme_elegancemoodle.org/plugins/view.php?plugin=theme_decafgithub.com/gjb2048/moodle-theme_shoehorn
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:
@hibbittsdesignlinkedin.com/in/paulhibbitts
1drv.ms/1qYSWke1drv.ms/1yvdNSP
iy103-w14.hibbittsdesign.combit.ly/1fPTBvw
Chrome App LauncherChrome App Launcher
http://chrome.blogspot.ca/2013/12/a-new-breed-of-chrome-apps-now.html