1 / 74

Creating Responsive eLearning With FRED

Responsive eLearning for Multi-Devices is growing rapidly. Presentation gives you behind the scenes look at FRED, our Framework for Responsive eLearning Development.

upsidelearning
Download Presentation

Creating Responsive eLearning With FRED

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating Responsive eLearning With Amit Garg @gargamit100 #ulwebinar Geera Bellare

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

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

  4. 30+ Awards & recognitions Winner of eLearning Team Of The Year 2013 Winner of 7 Apex Awards of Excellence ('11, '09, '08 & '07) Winner of a Silver award in CLO magazine's 'Learning In Practice Awards 2011' for UpsideLMS 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 UpsideLMS listed as one of the 'Five Emerging LMSs to Watch' in CLO Magazine ('10) Winner in Deloitte’s Technology Fast 500 Asia Pacific 2008 & 2009 program, and Fast 50 India 2008 program Winner of Red Herring 100 Asia Award in 2008 & finalist in Red Herring Global 100 ('09)

  5. Presenters Geera Bellare AVP – Learning Design Amit Garg Founder & Director – Custom Learning Solutions

  6. Agenda • The Multi-Device World • Responsive eLearning – What? Why? • FRED • Challenges and Key Considerations

  7. Poll How many devices do you use in a day? (for professional and/or personal use) • 1 • 2 • 3 • More than 3

  8. Poll On which OS do your devices run? • iOS • Android • BlackBerry OS • Windows • Other

  9. Multi Device World

  10. Multi Device World smartphone cellphone tablet Use ONLY mobile to access the Internet Jan 2014 - American Adults 1. http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/ 2. link

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

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

  13. Multi Device World "it looks to us like the majority of enterprise computing is being done on mobile devices, in particular on tablets” Eric Schmidt Gartner Symposium / IT Expo 2013

  14. Why Responsive eLearning? “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.” Jeffrey Veen Source – http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

  15. Poll What do you know about responsive eLearning? • Not much; have just heard the term. • Know what it is but have not had any hands-on experience. • Have designed/developed some responsive eLearning. • Have designed/developed a lot of responsive eLearning.

  16. What is Responsive?

  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

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

  19. Poll Does exactly the same content need to be delivered on all devices? • Yes • No • 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 • Mobile Context is important • Need a lightweight solution. • When targeting Desktops & Tablets (not smartphones) • Compliance courses • When focus is on providing resources • 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. Our Solution An HTML – CSS –Javascript based framework to create responsive eLearning easily

  23. Benefits Customization Reliability Effective Content Management Efficiency Consistent and Complete User Experience Cost-effectiveness

  24. FRED - Key Features • Multi-Device Support

  25. FRED - Key Features • Multi-Device Support • Template Library

  26. FRED - Key Features • Multi-Device Support • Template Library • Responsive Menu

  27. FRED - Key Features • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support

  28. FRED - Key Features • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support • Multi-Lingual Support

  29. FRED - Key Features • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support • Multi-Lingual Support • Multiple Delivery Options

  30. FRED - Key Features • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support • Multi-Lingual Support • Multiple Delivery Options • Learning Standards Compliance

  31. FRED - Key Features • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support • Multi-Lingual Support • Multiple Delivery Options • Learning Standards Compliance • Accessibility Support

  32. FRED - Key Features • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support • Multi-Lingual Support • Multiple Delivery Options • Learning Standards Compliance • Accessibility Support • Social Media Integration

  33. FRED - Key Features • 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

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

  35. Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations It should work on every possible device! 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

  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. Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations It should work on every possible device! 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

  38. Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations • Testing: • Takes longer • More complex and intricate • Costlier • Test on actual target devices: • Primary devices • Most popular or largest volume of devices

  39. Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations • 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

  40. Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations • FRED: • Uses HTML4 and HTML5 • Includes a system check

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

  42. Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations • FRED: • Uses HTML4 and HTML5 • Includes a system check • Includes templates whose treatment changes based on browser version

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

  44. Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations • FRED: • Uses HTML4 and HTML5 • Includes a system check • Includes templates whose treatment changes based on browser version • Is tested on actual devices

  45. Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations • Video and audio formats loaded based on browser • Video: • MP4 • OGV • Audio: • MP3 • OGG • Can affect package size…

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

  47. Creating Responsive eLearning Key Considerations & Challenges Usability

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

  49. Creating Responsive eLearning Key Considerations & Challenges Usability

  50. Creating Responsive eLearning Key Considerations & Challenges Usability • Global Navigation: • Shift it? • Group it? • Layer it? • Are all required? • Are some more common? • FRED: • Responsive menu • Controls displayed/hidden based on device

More Related