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.
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. 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.
20.
21.
22.
23.
24.
25.
26.
27.
28. 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
29.
30. 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
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48. 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
49. 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