The presentation takes a look into the world of Responsive eLearning and shares challenges and considerations in developing responsive eLearning courses.
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
6. How many devices do
you use in a day?
Questions
What operating system(s)
does/do your device(s) use?
• One • Two
• Windows
• BlackBerry OS
• iOS
• Android
• Three • Four
• Other
7. • The Multi-Device World
• Why Responsive eLearning?
• What is Responsive eLearning?
• Challenges and Key Considerations
• FRED is Born…
Agenda
9. 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
12. 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
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.”
Source – http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
21. 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?
• Know every individual user-agent string
• Code differently for different browsers as required
Key Considerations & Challenges
Browser-OS-Device Combinations
It should work on every possible device!
Creating Responsive eLearning
22. 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
Browser-OS-Device Combinations
24. 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-OS-Device Combinations
25. 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-OS-Device Combinations
26. • Use HTML4 and HTML5
• Include a system check
Creating Responsive eLearning
Key Considerations & Challenges
Browser-OS-Device Combinations
28. • Use HTML4 and HTML5
• Include a system check
• Take advantage of HTML5 properties on supported browsers
Creating Responsive eLearning
Key Considerations & Challenges
Browser-OS-Device Combinations
30. • Use HTML4 and HTML5
• Include a system check
• Take advantage of HTML5 properties on supported browsers
• Test on actual devices
Creating Responsive eLearning
Key Considerations & Challenges
Browser-OS-Device Combinations
31. Video and audio formats loaded based on browser – for example:
Video:
• MP4
• OGV
Audio:
• MP3
• OGG
Can affect package size…
Creating Responsive eLearning
Key Considerations & Challenges
Browser-OS-Device Combinations
37. Global Navigation:
• Shift it?
• Group it?
• Layer it?
• Are all required?
• Are some more common?
Usability
Creating Responsive eLearning
Key Considerations & Challenges
• Responsive menu
• Controls displayed/hidden
based on device
42. Text Readability:
• Common size that is comfortably readable on all devices
Usability
Creating Responsive eLearning
Key Considerations & Challenges
44. Text Readability:
• Common size that is comfortably readable on all devices
• Dynamic sizing
Consider accessibility settings too.
Usability
Creating Responsive eLearning
Key Considerations & Challenges
53. Treatment restrictions and alternatives based on HTML:
• Animations published as videos
Creating Responsive eLearning
Key Considerations & Challenges
Content Display
58. Layering Interactivities:
• Levels of content chunking depending on learners’
comfort with scrolling on desktops and laptops
Content Display
Creating Responsive eLearning
Key Considerations & Challenges
59. 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
61. • Fluid, iterative
• Higher interdependence
• Storyboard focused on core content and visuals
• Higher testing time
Process
Creating Responsive eLearning
Key Considerations & Challenges
62. FRED - Key Features
Multi-Device Support
HTML 4/5 architecture supports a variety of
devices, platforms, and lower browser
configurations.
Multiple Delivery Options
Supports both online and offline delivery.
Social Media Integration
Can be easily configured to include social
media, such as Facebook Share, Facebook
Like, and Twitter Share.
Responsive Menu
Navigation adapts to platform/device/
browser.
Platform-specific features are auto-enabled
or disabled.
Learning Standards Compliance
Can be configured to support SCORM 1.2, SCORM 2004,
AICC, and TIN CAN API at any one time.
Developer Aids
• Helps developers debug output with the help of:
System log, Communication log with
LMS/LRS/Cookies
Configuration window to test courses against
test cases
Accessibility Support
• Web Content Accessibility Guidelines (WCAG 2.0)
• Section 508 compliance
• Assistive features like keyboard shortcuts, JAWS
screen reader, options to increase font size, and
options to change font and background colours
Multilingual Support
In addition to all languages using the Latin script, FRED
also supports double byte character sets (Japanese,
Simplified Chinese, Korean, Traditional Chinese) and
RTL languages like Arabic and Hebrew.
Template Library
20 easily customizable templates including
interactivities and quizzes for creating engaging
learning.
Multimedia Support
Can support audio, video, and animations
like SVG and Sprite.
Background, past experience, specific role at Upside
Last three years –consulting, development and implementation of mobile learning
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).