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.

1. Built with Bootstrap
Using Moodle for
Blended Mobile Learning
Paul D. Hibbitts
Interaction Design | Multi-device Experience | Education

2. Topics for Today
 Blended mobile learning
 My key design approaches
 Twitter Bootstrap overview
 Mobile course companion demo

3. Is mobile learning a part of
your education strategy?

4. Blended Mobile Learning
http://www.flickr.com/photos/realtingley/4467469704/

5. http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6

6. “The ability to learn independently
of place and time, facilitated by a
range of mobile devices.”
– Ufi/learndirect and Kineo, 2007

7. More Than Just Courses
http://mlearnopedia.com/mlearncon/

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. What’s the impact of
mobile access on
blended learning?

10. Five Moments of
Learning Need
1. When learning for the first time
2. When wanting to learn more
3. When trying to remember
and/or apply
4. When things change
5. When something goes wrong
As defined by Bob Mosher and Conrad Gottfredson
Formal
Learning
Informal
Learning

11. Mobile blended learning
provides more opportunities
for performance support,
social networking,
and informal learning

12. My Design Approach and Tools
iStockphoto.com

13. Key Design Approaches

14. Mobile First
http://www.abookapart.com/products/mobile-first

15. What Exactly is “Mobile”?
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

16. User-Centered Design
http://www.sapdesignguild.org/resources/ucd_process.asp

17. More Prototyping,
Less Wireframing
http://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/

18. Immersion
http://www.uselog.com/2005_10_01_archive.html

19. Multi-device Content
and Design Parity
="

20. “Frictionless” User Experience
http://www.apple.com/iphone/
features/siri.html

21. My Mobile/Multi-device
Delivery Tool of Choice
(you know this already)…

22. http://twitter.github.io/bootstrap/

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. http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand

25. http://theming.sonsbeekmedia.nl/

26. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

27. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

28. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

29. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

30. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

31. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

32. http://uxfundamentals.com/moodle/ Hand: iStockphoto.com

33. Twitter Bootstrap
HTML Examples
<div class="row">
<div class="span6">...</div>
<div class="span6">...</div>
</div>
<div class="alert alert-info">
...
</div>
Two Column Grid
Information Alert Box

36. 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?

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

38. Moodle +Twitter Bootstrap
Course Demo

39. Wrap-up
http://www.flickr.com/photos/thefinned1/504651585/

40. Summary
 Blended mobile learning
 My key design approaches
 Twitter Bootstrap overview
 Mobile course companion demo

41. Where to Next?
2013.imoot.org
– Session B-25 course page with open discussion forum
www.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!

42. ThankYou! Further Questions?
Contact Info
Web: paulhibbitts.com
Email: paul@paulhibbitts.com
Twitter: @hibbittsdesign
LinkedIn: linkedin.com/in/paulhibbitts
Moodle Bootstrap Course Site Demo
uxfundamentals.com/moodle