imoot 2014 - designing a multi-device moodle course site: a case study

51
Designing a Multi-device Moodle Course Site Paul D Hibbitts @hibbittsdesign #iMoot2014 A case study, presented for iMoot 2014

Upload: paul-hibbitts

Post on 19-May-2015

812 views

Category:

Design


0 download

DESCRIPTION

Regardless of the device ― smartphone, desktop, tablet ― today’s networked learners deserve an exceptional user experience. Based on his first-hand experience of creating multi-device course companions for both his university (SFU) and continuing studies (UBC) courses, Paul will guide you through his key design considerations. During the session he will also provide an “under-the-hood” look at his most recent effort, a multi-device Moodle 2.6.1 implementation for his course on designing multi-device learning experiences at UBC.

TRANSCRIPT

Page 1: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Designing a Multi-device Moodle Course Site

Paul D Hibbitts @hibbittsdesign #iMoot2014

A case study, presented for iMoot 2014

Page 2: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

How many mobile devices do you use daily?

Page 3: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Why use Moodle in 2014?

Page 4: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

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

Page 5: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Moodle 2.5 was a true milestone release… why?

Page 6: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

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

Page 7: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Aardvark Theme

Page 8: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Aardvark Theme

Page 9: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Elegance Theme

Page 10: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Elegance Theme

Page 11: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Are you currently supporting multi-device friendly courses?

Page 12: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Multi-device delivery is now easy, but doing it well is not

Page 13: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

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.)

Page 14: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Redefining “Mobile Learning” in a Multi-device World

!  Ubiquitous !  Situational !  Connected !  Personal

Page 15: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

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

Page 16: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Multi-device Learner Experience Goals

!  Engaging !  Organized !  Relevant !  Appealing

Page 17: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

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

Page 18: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

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)

Page 19: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 20: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 21: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 22: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 23: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 24: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 25: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 26: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 27: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 28: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

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

Page 29: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 30: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

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

Page 31: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 32: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 33: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 34: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 35: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 36: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 37: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 38: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 39: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 40: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 41: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 42: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 43: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 44: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 45: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 46: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 47: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 48: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

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

Page 49: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

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

Page 50: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Page 51: iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study

Chrome App Launcher

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