Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning


Published on

Creating a mobile companion for a course or seminar is a great way to enhance face-to-face teaching. Join user experience consultant Paul Hibbitts as he takes you on a guided tour of his “mobile first” course companion site built using the 2.4 Twitter Bootstrap theme by Moodle developer Bas Brands. Designed from the ground up to be multi-screen friendly, Paul will share design approaches and technical challenges he encountered along the way.

Published in: Design, Education, Technology
  • Be the first to comment

iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning

  1. 1. Built with BootstrapUsing Moodle forBlended Mobile LearningPaul D. HibbittsInteraction Design | Multi-device Experience | Education
  2. 2. Topics for Today  Blended mobile learning  My key design approaches  Twitter Bootstrap overview  Mobile course companion demo
  3. 3. Is mobile learning a part ofyour education strategy?
  4. 4. Blended Mobile Learning
  5. 5.
  6. 6. “The ability to learn independentlyof place and time, facilitated by arange of mobile devices.”– Ufi/learndirect and Kineo, 2007
  7. 7. More Than Just Courses
  8. 8. Some False Mobile Assumptions  Being mobile means being in a rush  Mobile users are ok with having less  Context is king (hint: think about intent)
  9. 9. What’s the impact ofmobile access onblended learning?
  10. 10. Five Moments ofLearning Need1.  When learning for the first time2.  When wanting to learn more3.  When trying to rememberand/or apply4.  When things change5.  When something goes wrongAs defined by Bob Mosher and Conrad GottfredsonFormalLearningInformalLearning
  11. 11. Mobile blended learningprovides more opportunitiesfor performance support,social networking,and informal learning
  12. 12. My Design Approach and
  13. 13. Key Design Approaches
  14. 14. Mobile First
  15. 15. What Exactly is “Mobile”?
  16. 16. User-Centered Design
  17. 17. More Prototyping,Less Wireframing
  18. 18. Immersion
  19. 19. Multi-device Contentand Design Parity="
  20. 20. “Frictionless” User Experience
  21. 21. My Mobile/Multi-deviceDelivery Tool of Choice(you know this already)…
  22. 22.
  23. 23. Responsive Web Design (RWD)  Content/interface universal for all devices  One source of content, presented differently  Key elements– CSS media queries– Fluid grid layouts– Flexible images and media
  24. 24.
  25. 25.
  26. 26. Hand:
  27. 27. Hand:
  28. 28. Hand:
  29. 29. Hand:
  30. 30. Hand:
  31. 31. Hand:
  32. 32. Hand:
  33. 33. Twitter BootstrapHTML Examples<div class="row"><div class="span6">...</div><div class="span6">...</div></div><div class="alert alert-info">...</div>Two Column GridInformation Alert Box
  34. 34. RWD is a Method, Not Strategy  Why?– Problem to solve or opportunity to address?  What?– What value is to be provided?  Where?– Where is it to be delivered?  When?– When is it to be delivered?  How?– How is it to be created?
  35. 35. Time for Questions  What we’ve covered so far– Blended mobile learning– My key design approaches– Twitter Bootstrap overview– Responsive web design is not a strategy  Coming up– Moodle + Twitter Bootstrap Course Demo
  36. 36. Moodle +Twitter BootstrapCourse Demo
  37. 37. Wrap-up
  38. 38. Summary  Blended mobile learning  My key design approaches  Twitter Bootstrap overview  Mobile course companion demo
  39. 39. Where to Next?– Session B-25 course page with open discussion– These slides– Suggested books, articles and videos– Twitter Bootstrap framework, theme and resources…and be sure to check out Bas Brands’more technically-oriented “Building with Bootstrap:Integrating Moodle with Bootstrap” session on Sunday!
  40. 40. ThankYou! Further Questions?Contact InfoWeb: paulhibbitts.comEmail: paul@paulhibbitts.comTwitter: @hibbittsdesignLinkedIn: Bootstrap Course Site