Responsive eLearning for Multi-Devices is growing rapidly. Presentation gives you behind the scenes look at FRED, our Framework for Responsive eLearning Development.
4. Winner of a Silver award in CLO
magazine'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 '2010
Top 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 &
recognitions Winner of
eLearning Team Of The Year
2013
10. 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
13. Eric Schmidt
Gartner 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
14. 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.”
15. 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.
17. 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
19. Poll
Does exactly the same content need to be
delivered on all devices?
o Yes
o No
o Not sure
20. 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
21. Benefits of Responsive eLearning
• Enhanced reach – higher uptake
• Single source
• Cost effectiveness
• Easy Maintenance
• Content Consistency
• Track across devices
• Allow sequencing
22. An HTML – CSS – Javascript
based framework to create
responsive eLearning
easily
Our Solution
27. • Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
FRED - Key Features
28. • Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
• Multi-Lingual Support
FRED - Key Features
29. • Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
• Multi-Lingual Support
• Multiple Delivery Options
FRED - Key Features
30. • Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
• Multi-Lingual Support
• Multiple Delivery Options
• Learning Standards Compliance
FRED - Key Features
31. • Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
• Multi-Lingual Support
• Multiple Delivery Options
• Learning Standards Compliance
• Accessibility Support
FRED - Key Features
32. • 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
33. • 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
34. • Browser-Platform-OS-Device Combinations
• Usability
• Content Display and Treatment
• Standards and Compliances
• Development Process
Key Considerations & Challenges
Creating Responsive eLearning
35. 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 eLearning
Key Considerations & Challenges
It should work on every possible device!
36. Creating Responsive eLearning
Key Considerations & Challenges
Properties used by different browsers for box sizing:
-webkit-box-sizing: border-box; Safari, Chrome
-moz-box-sizing: border-box; Mozilla
box-sizing: border-box; Others
-webkit-box-sizing: content-box; Safari, Chrome
-moz-box-sizing: content-box; Mozilla
box-sizing:content-box; Others
37. 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 eLearning
Key Considerations & Challenges
Browser-Platform-OS-Device Combinations
It should work on every possible device!
38. Testing:
• Takes longer
• More complex and intricate
• Costlier
Test on actual target devices:
• Primary devices
• Most popular or largest volume of devices
Creating Responsive eLearning
Key Considerations & Challenges
Browser-Platform-OS-Device Combinations
39. 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 eLearning
Key Considerations & Challenges
Browser-Platform-OS-Device Combinations
40. FRED:
• Uses HTML4 and HTML5
• Includes a system check
Creating Responsive eLearning
Key Considerations & Challenges
Browser-Platform-OS-Device Combinations
42. FRED:
• Uses HTML4 and HTML5
• Includes a system check
• Includes templates whose treatment changes based on browser
version
Creating Responsive eLearning
Key Considerations & Challenges
Browser-Platform-OS-Device Combinations
44. 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 eLearning
Key Considerations & Challenges
Browser-Platform-OS-Device Combinations
45. Video and audio formats loaded based on browser
Video:
• MP4
• OGV
Audio:
• MP3
• OGG
Can affect package size…
Creating Responsive eLearning
Key Considerations & Challenges
Browser-Platform-OS-Device Combinations
46. Touch friendliness:
• Large
• Far apart
• Gestural navigation
Usability
Creating Responsive eLearning
Key Considerations & Challenges
50. 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 eLearning
Key Considerations & Challenges
55. Text Readability:
• Common size that is comfortably readable on all devices
Usability
Creating Responsive eLearning
Key Considerations & Challenges
57. Text Readability:
• Common size that is comfortably readable on all devices
• Dynamic sizing
Overridden by device and eLearning accessibility settings
Usability
Creating Responsive eLearning
Key Considerations & Challenges
65. Treatment restrictions and alternatives based on HTML:
• Animations published as videos
Creating Responsive eLearning
Key Considerations & Challenges
Content Display
70. Layering Interactivities:
• Levels of content chunking depending on learners’
comfort with scrolling on desktops and laptops
Content Display
Creating Responsive eLearning
Key Considerations & Challenges
71. 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 eLearning
Key Considerations & Challenges
72. • 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 eLearning
Key Considerations & Challenges
73. • Fluid, iterative
• Higher interdependence
• Storyboard focused on core content and visuals
• Higher testing time
Process
Creating Responsive eLearning
Key Considerations & Challenges
Notas del editor
Make the countries blue…not purple
Add elearningAge awards
Get some research on this to quote after the poll questions
In his book Tapworthy: Designing Great iPhone Apps, Josh Clark defines the three different mindsets of the mobile user: “I am microtasking,” “I am local,” and “I am bored” (see References).
Get some research on this to quote after the poll questions
Get some research on this to quote after the poll questions
Learning and performance support interventions delivered from one source on multiple devices without any content loss.Content responds to or moulds itself to the devices' dimensions and rearranges itself accordingly.Content changes its form or gets layered where required for better user experience.
FRED delivers the same – or similar – content across different devices, ensuring a consistent and complete user experience.FRED is a reusable framework with an existing library of 20+ templates, allowing for efficiency during development. At the same time, FRED is flexible enough to be customized to meet your specific requirements. And FRED is reliable, having been thoroughly tested across multiple devices.Once a single base version has been developed,content management is easier and much more effective as updates or additions need only be made once to reflect across all devices.All these combine to make FRED a cost-effective solution for responsive eLearning development.