![Page 1: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/1.jpg)
Built with Bootstrap Using Moodle for Blended Mobile Learning
Paul D. Hibbitts Interaction Design | Multi-device Experience | Education
![Page 2: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/2.jpg)
Topics for Today Blended mobile learning My key design approaches Twitter Bootstrap overview Mobile course companion demo
![Page 3: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/3.jpg)
Mobile Moodle access poll
![Page 4: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/4.jpg)
Blended Mobile Learning http://www.flickr.com/photos/realtingley/4467469704/
![Page 5: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/5.jpg)
http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6
![Page 6: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/6.jpg)
“The ability to learn independently of place and time, facilitated by a
range of mobile devices.”
– Ufi/learndirect and Kineo, 2007
![Page 7: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/7.jpg)
More Than Just Courses
http://mlearnopedia.com/mlearncon/
![Page 8: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/8.jpg)
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)
![Page 9: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/9.jpg)
What’s the impact of
mobile access on blended learning?
![Page 10: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/10.jpg)
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
![Page 11: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/11.jpg)
Mobile blended learning provides more opportunities
for performance support, social networking,
and informal learning
![Page 12: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/12.jpg)
My Design Approach and Tools iStockphoto.com
![Page 13: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/13.jpg)
Key Design Approaches
![Page 14: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/14.jpg)
Mobile First
http://www.abookapart.com/products/mobile-first
![Page 15: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/15.jpg)
What Exactly is “Mobile”?
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
![Page 16: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/16.jpg)
User-Centered Design
http://www.sapdesignguild.org/resources/ucd_process.asp
![Page 17: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/17.jpg)
More Prototyping, Less Wireframing
http://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/
![Page 18: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/18.jpg)
Immersion
http://www.uselog.com/2005_10_01_archive.html
![Page 19: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/19.jpg)
Multi-device Content and Design Parity
="
![Page 20: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/20.jpg)
“Frictionless” User Experience
http://www.apple.com/iphone/features/siri.html
![Page 21: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/21.jpg)
My Mobile/Multi-device Delivery Tool of Choice
(you know this already)…
![Page 22: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/22.jpg)
http://twitter.github.io/bootstrap/
![Page 23: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/23.jpg)
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
![Page 24: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/24.jpg)
http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand
![Page 25: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/25.jpg)
http://theming.sonsbeekmedia.nl/
![Page 26: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/26.jpg)
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
![Page 27: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/27.jpg)
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
![Page 28: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/28.jpg)
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
![Page 29: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/29.jpg)
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
![Page 30: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/30.jpg)
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
![Page 31: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/31.jpg)
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
![Page 32: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/32.jpg)
http://uxfundamentals.com/moodle/ Hand: iStockphoto.com
![Page 33: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/33.jpg)
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
![Page 34: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/34.jpg)
![Page 35: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/35.jpg)
![Page 36: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/36.jpg)
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?
![Page 37: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/37.jpg)
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
![Page 38: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/38.jpg)
Moodle + Twitter Bootstrap Course Demo
![Page 39: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/39.jpg)
Wrap-up http://www.flickr.com/photos/thefinned1/504651585/
![Page 40: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/40.jpg)
Summary Blended mobile learning My key design approaches Twitter Bootstrap overview Mobile course companion demo
![Page 41: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/41.jpg)
Where to Next? 2013.imoot.org – Course page with open session 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!
![Page 42: iMoot 2013 - Building with Bootstrap: Using Moodle for Blended Mobile Learning](https://reader033.vdocuments.us/reader033/viewer/2022060108/554e684fb4c90545698b456b/html5/thumbnails/42.jpg)
Thank You! Further Questions? Contact Info Web: paulhibbitts.com Email: [email protected] Twitter: @hibbittsdesign LinkedIn: linkedin.com/in/paulhibbitts
Moodle Bootstrap Course Site Demo uxfundamentals.com/moodle