Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive eLearning Development - Challenges & Considerations

1,804 views

Published on

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

Published in: Technology
  • Be the first to comment

Responsive eLearning Development - Challenges & Considerations

  1. 1. Responsive eLearning Development Challenges and Considerations Amit Gautam @ amitgautam James Rasmussen @JimRasmussen4 #ulwebinar
  2. 2. US Middle East New Zealand S.Africa Nigeria Kenya Singapore Venezuela 13 165+ clients in countries India Established in 2004 Australia UK
  3. 3. Custom/ Bespoke eLearning Custom/Bespoke mLearning Our learning solutions
  4. 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. 5. Presenters Amit Gautam James Rasmussen Area VP Sales – Americas Founder & Director – Technology Solutions
  6. 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. 7. • The Multi-Device World • Why Responsive eLearning? • What is Responsive eLearning? • Challenges and Key Considerations • FRED is Born… Agenda
  8. 8. Multi-Device World
  9. 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. 10. http://services.google.com/fh/files/misc/multiscreenworld_final.pdf Multi-Device World
  11. 11. Multi-Device World http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
  12. 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. 13. What is Responsive?
  14. 14. Questions Are you already building responsive eLearning? Are you planning to or would you like to? Is it inevitable?
  15. 15. What is Responsive eLearning? eLearning that responds to device size
  16. 16. Questions For what kind of eLearning would you use a responsive approach? Do you think a responsive design would make it better?
  17. 17. Why Responsive eLearning? • Enhanced reach – higher uptake • Single source • Cost effectiveness • Easy Maintenance • Content Consistency • Track across devices • Allow sequencing
  18. 18. Our Solution Upside Team Our journey (so far…)
  19. 19. • Browser-OS-Device Combinations • Usability • Content Display and Treatment • Development Process Key Considerations & Challenges Creating Responsive eLearning
  20. 20. Key Considerations & Challenges Creating Responsive eLearning Browser-OS-Device Combinations
  21. 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. 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. 23. Creating Responsive eLearning Key Considerations & Challenges Browser-OS-Device Combinations
  24. 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. 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. 26. • Use HTML4 and HTML5 • Include a system check Creating Responsive eLearning Key Considerations & Challenges Browser-OS-Device Combinations
  27. 27. Creating Responsive eLearning Key Considerations & Challenges Browser-OS-Device Combinations
  28. 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. 29. Creating Responsive eLearning Key Considerations & Challenges Browser-OS-Device Combinations
  30. 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. 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. 32. Usability Creating Responsive eLearning Key Considerations & Challenges
  33. 33. Touch friendliness: • Large • Far apart • Gestural navigation Usability Creating Responsive eLearning Key Considerations & Challenges
  34. 34. Usability Creating Responsive eLearning Key Considerations & Challenges
  35. 35. Touch friendliness: • Large • Far apart • Gestural navigation • Layout Usability Creating Responsive eLearning Key Considerations & Challenges
  36. 36. Usability Creating Responsive eLearning Key Considerations & Challenges
  37. 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. 38. Usability Creating Responsive eLearning Key Considerations & Challenges
  39. 39. Usability Creating Responsive eLearning Key Considerations & Challenges
  40. 40. Interactivity Instructions: • Device-neutral • Device-appropriate • Task-specific Usability Creating Responsive eLearning Key Considerations & Challenges
  41. 41. Usability Creating Responsive eLearning Key Considerations & Challenges
  42. 42. Text Readability: • Common size that is comfortably readable on all devices Usability Creating Responsive eLearning Key Considerations & Challenges
  43. 43. Usability Creating Responsive eLearning Key Considerations & Challenges
  44. 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. 45. Usability Creating Responsive eLearning Key Considerations & Challenges
  46. 46. Content Display Creating Responsive eLearning Key Considerations & Challenges
  47. 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. 48. Creating Responsive eLearning Key Considerations & Challenges Content Display
  49. 49. Creating Responsive eLearning Key Considerations & Challenges Content Display
  50. 50. Creating Responsive eLearning Key Considerations & Challenges Content Display
  51. 51. Creating Responsive eLearning Key Considerations & Challenges Content Display
  52. 52. Images: • Scaling • Cropping • Dynamic scaling and cropping Content Display Creating Responsive eLearning Key Considerations & Challenges
  53. 53. Treatment restrictions and alternatives based on HTML: • Animations published as videos Creating Responsive eLearning Key Considerations & Challenges Content Display
  54. 54. Content Display Creating Responsive eLearning Key Considerations & Challenges
  55. 55. Audio Strategy: • Introductory audio • Closely-synched audios in animations published as videos Content Display Creating Responsive eLearning Key Considerations & Challenges
  56. 56. Multimedia Components: • Audio, video • Images, graphics • Animations • Sprite animations • SVG graphics/animations Content Display Creating Responsive eLearning Key Considerations & Challenges
  57. 57. Content Display Creating Responsive eLearning Key Considerations & Challenges
  58. 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. 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. 60. Process Creating Responsive eLearning Key Considerations & Challenges
  61. 61. • Fluid, iterative • Higher interdependence • Storyboard focused on core content and visuals • Higher testing time Process Creating Responsive eLearning Key Considerations & Challenges
  62. 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. 63. Advantages Customization Reliability Consistent and Complete User Experience Efficiency Cost-effectiveness Effective Content Management

×