The presentation takes a look into the world of Responsive eLearning and shares challenges and considerations in developing responsive eLearning courses.

1. Responsive eLearning
Development
Challenges
and
Considerations
Amit Gautam
@ amitgautam
James Rasmussen
@JimRasmussen4 #ulwebinar

2. US
Middle East
New Zealand
S.Africa
Nigeria Kenya Singapore
Venezuela
13
165+
clients in
countries
India
Established
in 2004
Australia
UK

3. Custom/ Bespoke
eLearning
Custom/Bespoke
mLearning
Our
learning
solutions

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

5. Presenters
Amit Gautam
James Rasmussen
Area VP Sales – Americas
Founder & Director – Technology Solutions

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

8. Multi-Device World

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

10. http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
Multi-Device World

11. Multi-Device World
http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

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/

13. What is Responsive?

14. Questions
Are you already
building responsive
eLearning?
Are you planning to or
would you like to?
Is it inevitable?

15. What is Responsive eLearning?
eLearning that responds to device size

16. Questions
For what kind of
eLearning would you use a
responsive approach?
Do you think a
responsive design
would make it better?

17. Why Responsive eLearning?
• Enhanced reach – higher uptake
• Single source
• Cost effectiveness
• Easy Maintenance
• Content Consistency
• Track across devices
• Allow sequencing

18. Our Solution
Upside
Team
Our journey (so far…)

19. • Browser-OS-Device Combinations
• Usability
• Content Display and Treatment
• Development Process
Key Considerations & Challenges
Creating Responsive eLearning

20. Key Considerations & Challenges
Creating Responsive eLearning
Browser-OS-Device
Combinations

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

23. Creating Responsive eLearning
Key Considerations & Challenges
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

27. 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

29. 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

32. Usability
Creating Responsive eLearning
Key Considerations & Challenges

33. Touch friendliness:
• Large
• Far apart
• Gestural navigation
Usability
Creating Responsive eLearning
Key Considerations & Challenges

34. Usability
Creating Responsive eLearning
Key Considerations & Challenges

35. Touch friendliness:
• Large
• Far apart
• Gestural navigation
• Layout
Usability
Creating Responsive eLearning
Key Considerations & Challenges

36. Usability
Creating Responsive eLearning
Key Considerations & Challenges

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

38. Usability
Creating Responsive eLearning
Key Considerations & Challenges

39. Usability
Creating Responsive eLearning
Key Considerations & Challenges

40. Interactivity Instructions:
• Device-neutral
• Device-appropriate
• Task-specific
Usability
Creating Responsive eLearning
Key Considerations & Challenges

41. Usability
Creating Responsive eLearning
Key Considerations & Challenges

42. Text Readability:
• Common size that is comfortably readable on all devices
Usability
Creating Responsive eLearning
Key Considerations & Challenges

43. 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

45. Usability
Creating Responsive eLearning
Key Considerations & Challenges

46. Content Display
Creating Responsive eLearning
Key Considerations & Challenges

47. Layout and transformation based on screen size:
• Retain meaning
• Achieve consistent look and feel
• Achieve user-friendly experience
Content Display
Creating Responsive eLearning
Key Considerations & Challenges

48. Creating Responsive eLearning
Key Considerations & Challenges
Content Display

49. Creating Responsive eLearning
Key Considerations & Challenges
Content Display

50. Creating Responsive eLearning
Key Considerations & Challenges
Content Display

51. Creating Responsive eLearning
Key Considerations & Challenges
Content Display

52. Images:
• Scaling
• Cropping
• Dynamic scaling and cropping
Content Display
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

54. Content Display
Creating Responsive eLearning
Key Considerations & Challenges

55. Audio Strategy:
• Introductory audio
• Closely-synched audios in animations published as videos
Content Display
Creating Responsive eLearning
Key Considerations & Challenges

56. Multimedia Components:
• Audio, video
• Images, graphics
• Animations
• Sprite animations
• SVG graphics/animations
Content Display
Creating Responsive eLearning
Key Considerations & Challenges

57. Content Display
Creating Responsive eLearning
Key Considerations & Challenges

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

60. Process
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.

63. Advantages
Customization Reliability
Consistent and
Complete
User Experience
Efficiency
Cost-effectiveness
Effective Content
Management