creating responsive elearning with fred

Responsive eLearningCreating

With

Amit Garg @gargamit100

Geera Bellare #ulwebinar

India

UKUS

Middle East

New ZealandS.Africa

Nigeria Kenya Singapore

Venezuela

13165+

clients in

countries

Establishedin 2004

Australia

Custom/ BespokeeLearning

Custom/BespokemLearning

Our learning solutions

Winner of a Silver award in CLOmagazine's 'Learning In Practice

Awards 2011' for UpsideLMS

UpsideLMS listed as one of the 'Five Emerging LMSs to Watch'

in CLO Magazine ('10)

Winner of 7 Apex Awards of Excellence

('11, '09, '08 & '07)

Winner of 11 Brandon Hall Excellence Awards (‘12, '11, '10 & '09)

UpsideLMS featured in the '2010Top 20 Learning Portal Companies List' and

'2011 & 2012 Watch List‘by TrainingIndustry.com

Winner of Red Herring 100 Asia Award in 2008 & finalist

in Red Herring Global 100 ('09)

Winner in Deloitte’s Technology Fast 500 Asia Pacific 2008 & 2009 program,

and Fast 50 India 2008 program

30+Awards &

recognitionsWinner of

eLearning Team Of The Year2013

Geera Bellare

Amit GargFounder & Director – Custom Learning Solutions

AVP – Learning Design

Presenters

• The Multi-Device World• Responsive eLearning – What? Why?• FRED• Challenges and Key Considerations

Agenda

How many devices do you use in a day? (for professional and/or personal use)

• 1

• 2

• 3

• More than 3

Poll

Poll

On which OS do your devices run? iOS Android BlackBerry OS Windows Other

Multi Device World

Multi Device World

Jan 2014 - American Adults

cellphone

smartphone

tablet

Use ONLY mobile to access the Internet

1. http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/2. link

http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

Multi Device World

Multi Device World

http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

Eric SchmidtGartner Symposium / IT Expo 2013

"it looks to us like the majority of enterprise computing is being done on mobile devices, in particular on tablets”

Multi Device World

Why Responsive eLearning?

Source – http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

Jeffrey Veen

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”

Poll

What do you know about responsive eLearning?o Not much; have just heard the term. o Know what it is but have not had any hands-on

experience.o Have designed/developed some responsive eLearning.o Have designed/developed a lot of responsive

eLearning.

What is Responsive?

Poll

How do you think responsive eLearning can be useful in your organization? To reach out to mobile and/or shop floor workers (e.g.

sales staff, field technicians, production staff, etc) To allow employees to access eLearning on their own

devices To allow employees to access eLearning outside office

hours including during travel and waiting times To make (compliance) training programs more

convenient to complete

What is Responsive eLearning?

eLearning that responds to device size

Poll

Does exactly the same content need to be delivered on all devices?o Yeso Noo Not sure

Does Mobile Need a Full Version

• People are USED to the standard Interfaces

• Some people access the Internet only via their phones

• When targeting Desktops & Tablets (not smartphones)

• Compliance courses

• When focus is on providing resources

• Mobile Context is important

• Need a lightweight solution.

• Software simulations

Benefits of Responsive eLearning

• Enhanced reach – higher uptake• Single source

• Cost effectiveness• Easy Maintenance• Content Consistency

• Track across devices• Allow sequencing

An HTML – CSS – Javascript based framework to create

responsive eLearningeasily

Our Solution

Benefits

Customization Reliability

Consistent and Complete

User Experience

Efficiency

Cost-effectiveness

Effective ContentManagement

• Multi-Device Support

FRED - Key Features

• Multi-Device Support• Template Library

FRED - Key Features

• Multi-Device Support• Template Library• Responsive Menu

FRED - Key Features

• Multi-Device Support• Template Library• Responsive Menu• Multimedia Support

FRED - Key Features

• Multi-Device Support• Template Library• Responsive Menu• Multimedia Support• Multi-Lingual Support

FRED - Key Features

• Multi-Device Support• Template Library• Responsive Menu• Multimedia Support• Multi-Lingual Support• Multiple Delivery Options

FRED - Key Features

• Multi-Device Support• Template Library• Responsive Menu• Multimedia Support• Multi-Lingual Support• Multiple Delivery Options• Learning Standards Compliance

FRED - Key Features

• Multi-Device Support• Template Library• Responsive Menu• Multimedia Support• Multi-Lingual Support• Multiple Delivery Options• Learning Standards Compliance• Accessibility Support

FRED - Key Features

• Multi-Device Support• Template Library• Responsive Menu• Multimedia Support• Multi-Lingual Support• Multiple Delivery Options• Learning Standards Compliance• Accessibility Support• Social Media Integration

FRED - Key Features

• Multi-Device Support• Template Library• Responsive Menu• Multimedia Support• Multi-Lingual Support• Multiple Delivery Options• Learning Standards Compliance• Accessibility Support• Social Media Integration• Developer Aids

FRED - Key Features

• Browser-Platform-OS-Device Combinations• Usability• Content Display and Treatment• Standards and Compliances• Development Process

Key Considerations & Challenges

Creating Responsive eLearning

Browser-Platform-OS-Device Combinations

Scope narrowed during project scoping – but still a wide variety

How to display content in the same or similar manner and achieve the same behavior?

• Code differently for different browsers

Creating Responsive eLearningKey Considerations & Challenges

It should work on every possible device!

Creating Responsive eLearningKey Considerations & Challenges

Properties used by different browsers for box sizing:

-webkit-box-sizing: border-box; Safari, Chrome-moz-box-sizing: border-box; Mozillabox-sizing: border-box; Others

-webkit-box-sizing: content-box; Safari, Chrome-moz-box-sizing: content-box; Mozillabox-sizing:content-box; Others

Scope narrowed during project scoping – but still a wide variety…

How to display content in the same or similar manner and achieve the same behavior?

• Code differently for different browsers• Know every individual user-agent string

Creating Responsive eLearningKey Considerations & Challenges

Browser-Platform-OS-Device Combinations

It should work on every possible device!

Testing:• Takes longer• More complex and intricate• Costlier

Test on actual target devices:• Primary devices• Most popular or largest volume of devices

Creating Responsive eLearningKey Considerations & Challenges

Browser-Platform-OS-Device Combinations

Lower Browser Versions (IE):• IE6 is planned to be phased out in April 2014• IE7 and IE8 use is declining

But IE8 doesn’t support HTML5 elements…

http://en.wikipedia.org/wiki/Internet_Explorer_6 || theie7countdown.com || theie8countdown.com

Creating Responsive eLearningKey Considerations & Challenges

Browser-Platform-OS-Device Combinations

FRED:• Uses HTML4 and HTML5• Includes a system check

Creating Responsive eLearningKey Considerations & Challenges

Browser-Platform-OS-Device Combinations

Creating Responsive eLearningKey Considerations & Challenges

Browser-Platform-OS-Device Combinations

FRED:• Uses HTML4 and HTML5• Includes a system check• Includes templates whose treatment changes based on browser

version

Creating Responsive eLearningKey Considerations & Challenges

Browser-Platform-OS-Device Combinations

Creating Responsive eLearningKey Considerations & Challenges

Browser-Platform-OS-Device Combinations

FRED:• Uses HTML4 and HTML5• Includes a system check• Includes templates whose treatment changes based on browser

version• Is tested on actual devices

Creating Responsive eLearningKey Considerations & Challenges

Browser-Platform-OS-Device Combinations

Video and audio formats loaded based on browser

Video:• MP4• OGV

Audio:• MP3• OGG

Can affect package size…

Creating Responsive eLearningKey Considerations & Challenges

Browser-Platform-OS-Device Combinations

Touch friendliness:• Large• Far apart• Gestural navigation

Usability

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Touch friendliness:• Large• Far apart• Gestural navigation• Layout

Usability

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Global Navigation:• Shift it?• Group it?• Layer it?• Are all required?• Are some more common?

FRED:• Responsive menu• Controls displayed/hidden based on device

Usability

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Interactivity Instructions:• Device-neutral• Device-appropriate• Task-specific

Usability

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Text Readability:• Common size that is comfortably readable on all devices

Usability

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Text Readability:• Common size that is comfortably readable on all devices• Dynamic sizing

Overridden by device and eLearning accessibility settings

Usability

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Layout and transformation based on screen size:

• Retain meaning • Achieve consistent look and feel• Achieve user-friendly experience

Content Display

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Usability

Creating Responsive eLearningKey Considerations & Challenges

Images:• Scaling• Cropping• Scaling pre-cropped images

Content Display

Creating Responsive eLearningKey Considerations & Challenges

Treatment restrictions and alternatives based on HTML:• Animations published as videos

Creating Responsive eLearningKey Considerations & Challenges

Content Display

Content Display

Creating Responsive eLearningKey Considerations & Challenges

Audio Strategy:• Introductory audio• Closely-synched audio in animations published as videos

Content Display

Creating Responsive eLearningKey Considerations & Challenges

Multimedia Components:• Audio, video• Images, graphics• Animations

• Sprite animations• SVG graphics/animations

Content Display

Creating Responsive eLearningKey Considerations & Challenges

Content Display

Creating Responsive eLearningKey Considerations & Challenges

Layering Interactivities:• Levels of content chunking depending on learners’

comfort with scrolling on desktops and laptops

Content Display

Creating Responsive eLearningKey Considerations & Challenges

Should these be shown on smaller devices?• Application simulations• Complex technical diagrams• Animated stories / scenarios where you need to see details of the

environment or objects • Animated stories / scenarios where there is important text within

the animation• Exploratory interactivities where you need to identify or locate

areas to explore

Content Display

Creating Responsive eLearningKey Considerations & Challenges

• SCORM or Tin Can compliance for LMS delivery

• SCORM or Tin Can compliance for apps (with customization for SCORM)

• Accessibility provisions

Standards and Compliances

Creating Responsive eLearningKey Considerations & Challenges

• Fluid, iterative

• Higher interdependence

• Storyboard focused on core content and visuals

• Higher testing time

Process

Creating Responsive eLearningKey Considerations & Challenges

Thank You!

Amit Garg@gargamit100

amitgarg@upsidelearning.com

www.upsidelearning.comwww.upsidelearning.com/blog

Geera Bellaregeera.bellare@upsidelearning.com