Upload
paul-hibbitts
View
308
Download
0
Embed Size (px)
DESCRIPTION
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.
Citation preview
Built with Bootstrap Using Moodle for Blended Mobile Learning
Paul D. Hibbitts Interaction Design | Multi-device Experience | Education
Topics for Today Blended mobile learning My key design approaches Twitter Bootstrap overview Mobile course companion demo
Mobile Moodle access poll
Blended Mobile Learning http://www.flickr.com/photos/realtingley/4467469704/
http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6
“The ability to learn independently of place and time, facilitated by a
range of mobile devices.”
– Ufi/learndirect and Kineo, 2007
More Than Just Courses
http://mlearnopedia.com/mlearncon/
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)
What’s the impact of
mobile access on blended learning?
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
Mobile blended learning provides more opportunities
for performance support, social networking,
and informal learning
My Design Approach and Tools iStockphoto.com
Key Design Approaches
Mobile First
http://www.abookapart.com/products/mobile-first
What Exactly is “Mobile”?
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
User-Centered Design
http://www.sapdesignguild.org/resources/ucd_process.asp
More Prototyping, Less Wireframing
http://www.cennydd.co.uk/2012/why-i-dont-wireframe-much/
Immersion
http://www.uselog.com/2005_10_01_archive.html
Multi-device Content and Design Parity
="
“Frictionless” User Experience
http://www.apple.com/iphone/features/siri.html
My Mobile/Multi-device Delivery 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 Key elements – CSS media queries – Fluid grid layouts – Flexible images and media
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 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
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?
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
Moodle + Twitter Bootstrap Course Demo
Wrap-up http://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 – 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!
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