0
Built with BootstrapUsing Moodle forBlended Mobile LearningPaul D. HibbittsInteraction Design | Multi-device Experience | ...
Topics for Today  Blended mobile learning  My key design approaches  Twitter Bootstrap overview  Mobile course compani...
Is mobile learning a part ofyour education strategy?
Blended Mobile Learninghttp://www.flickr.com/photos/realtingley/4467469704/
http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6
“The ability to learn independentlyof place and time, facilitated by arange of mobile devices.”– Ufi/learndirect and Kineo...
More Than Just Courseshttp://mlearnopedia.com/mlearncon/
Some False Mobile Assumptions  Being mobile means being in a rush  Mobile users are ok with having less  Context is kin...
What’s the impact ofmobile access onblended learning?
Five Moments ofLearning Need1.  When learning for the first time2.  When wanting to learn more3.  When trying to remembera...
Mobile blended learningprovides more opportunitiesfor performance support,social networking,and informal learning
My Design Approach and ToolsiStockphoto.com
Key Design Approaches
Mobile Firsthttp://www.abookapart.com/products/mobile-first
What Exactly is “Mobile”?http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
User-Centered Designhttp://www.sapdesignguild.org/resources/ucd_process.asp
More Prototyping,Less Wireframinghttp://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/
Immersionhttp://www.uselog.com/2005_10_01_archive.html
Multi-device Contentand Design Parity="
“Frictionless” User Experiencehttp://www.apple.com/iphone/features/siri.html
My Mobile/Multi-deviceDelivery Tool of Choice(you know this already)…
http://twitter.github.io/bootstrap/
Responsive Web Design (RWD)  Content/interface universal for all devices  One source of content, presented differently ...
http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand
http://theming.sonsbeekmedia.nl/
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
Twitter BootstrapHTML Examples<div class="row"><div class="span6">...</div><div class="span6">...</div></div><div class="a...
RWD is a Method, Not Strategy  Why?– Problem to solve or opportunity to address?  What?– What value is to be provided? ...
Time for Questions  What we’ve covered so far– Blended mobile learning– My key design approaches– Twitter Bootstrap overv...
Moodle +Twitter BootstrapCourse Demo
Wrap-uphttp://www.flickr.com/photos/thefinned1/504651585/
Summary  Blended mobile learning  My key design approaches  Twitter Bootstrap overview  Mobile course companion demo
Where to Next?2013.imoot.org– Session B-25 course page with open discussion forumwww.paulhibbitts.com/imoot2013/– These sl...
ThankYou! Further Questions?Contact InfoWeb: paulhibbitts.comEmail: paul@paulhibbitts.comTwitter: @hibbittsdesignLinkedIn:...
iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning
iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning
Upcoming SlideShare
Loading in...5
×

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

336

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
336
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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 Learninghttp://www.flickr.com/photos/realtingley/4467469704/
  5. 5. http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6
  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 Courseshttp://mlearnopedia.com/mlearncon/
  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 ToolsiStockphoto.com
  13. 13. Key Design Approaches
  14. 14. Mobile Firsthttp://www.abookapart.com/products/mobile-first
  15. 15. What Exactly is “Mobile”?http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
  16. 16. User-Centered Designhttp://www.sapdesignguild.org/resources/ucd_process.asp
  17. 17. More Prototyping,Less Wireframinghttp://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/
  18. 18. Immersionhttp://www.uselog.com/2005_10_01_archive.html
  19. 19. Multi-device Contentand Design Parity="
  20. 20. “Frictionless” User Experiencehttp://www.apple.com/iphone/features/siri.html
  21. 21. My Mobile/Multi-deviceDelivery Tool of Choice(you know this already)…
  22. 22. http://twitter.github.io/bootstrap/
  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. http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand
  25. 25. http://theming.sonsbeekmedia.nl/
  26. 26. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  27. 27. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  28. 28. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  29. 29. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  30. 30. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  31. 31. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  32. 32. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
  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-uphttp://www.flickr.com/photos/thefinned1/504651585/
  38. 38. Summary  Blended mobile learning  My key design approaches  Twitter Bootstrap overview  Mobile course companion demo
  39. 39. Where to Next?2013.imoot.org– Session B-25 course page with open discussion forumwww.paulhibbitts.com/imoot2013/– 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: linkedin.com/in/paulhibbittsMoodle Bootstrap Course Site Demouxfundamentals.com/moodle
  1. A particular slide catching your eye?

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

×