Responsive eLearning Development - Challenges & Considerations

1,194
-1

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,194
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
46
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Add elearningAge awards
  • 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).
  • 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

    ×