moodle moot nz14 - designing a multi-device moodle course site: a case study

@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:

paulhibbitts.compaul@paulhibbitts.com

@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