Designing a Multi-device
Moodle Course Site
Paul D Hibbitts
@hibbittsdesign #iMoot2014
A case study, presented for iMoot 2...
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.)
– Collabora...
Moodle 2.5 was a
true milestone release… why?
The Bootstrap Framework
!  Grid-based layout
!  Support for responsive design
!  Interface components (e.g. tabs)
!  Javas...
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, set...
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 tr...
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,
...
A guided tour of a
multi-device Moodle course site...
University of British Columbia (UBC) Continuing Studies,
part of the...
Bootstrap (2.x) HTML Snippet
<div class="media">
<a class="pull-left" href="#">
Media thumbnail object
</a>
<div class="ma...
Bootstrap (2.x) HTML Snippet
<div class="row-fluid">
<div class="span6">
Column one content
</div>
<div class="span6">
Col...
Next Steps (besides getting v2.7)
!  Try out the included Bootstrap theme Clean (v2.5+)
–  docs.moodle.org/dev/Clean_theme...
Thank you! Any questions?
!  Contact Info
– Web: paulhibbitts.com
– Email: paul@paulhibbitts.com
– Twitter: @hibbittsdesig...
Chrome App Launcher
http://chrome.blogspot.ca/2013/12/a-new-breed-of-chrome-apps-now.html
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
iMoot 2014 - Designing a Multi-device Moodle Course Site: A Case Study
Upcoming SlideShare
Loading in...5
×

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

842

Published on

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.

Published in: Design, Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
842
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Designing a Multi-device Moodle Course Site Paul D Hibbitts @hibbittsdesign #iMoot2014 A case study, presented for iMoot 2014
  2. 2. How many mobile devices do you use daily?
  3. 3. Why use Moodle in 2014?
  4. 4. 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
  5. 5. Moodle 2.5 was a true milestone release… why?
  6. 6. The Bootstrap Framework !  Grid-based layout !  Support for responsive design !  Interface components (e.g. tabs) !  Javascript snippets (e.g. dialog boxes)
  7. 7. Aardvark Theme
  8. 8. Aardvark Theme
  9. 9. Elegance Theme
  10. 10. Elegance Theme
  11. 11. Are you currently supporting multi-device friendly courses?
  12. 12. Multi-device delivery is now easy, but doing it well is not
  13. 13. 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.)
  14. 14. Redefining “Mobile Learning” in a Multi-device World !  Ubiquitous !  Situational !  Connected !  Personal
  15. 15. 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
  16. 16. Multi-device Learner Experience Goals !  Engaging !  Organized !  Relevant !  Appealing
  17. 17. 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
  18. 18. 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)
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. Thank you! Any questions? !  Contact Info – Web: paulhibbitts.com – Email: paul@paulhibbitts.com – Twitter: @hibbittsdesign – LinkedIn: linkedin.com/in/paulhibbitts !  IY103-W14 Course Companion – iy103-w14.hibbittsdesign.com – Google Chrome web app: bit.ly/1fPTBvw
  23. 23. Chrome App Launcher http://chrome.blogspot.ca/2013/12/a-new-breed-of-chrome-apps-now.html
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×