imoot 2013 - building with bootstrap: using moodle for blended mobile learning

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

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