Responsive eLearning Development - Challenges & Considerations

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

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 Amit Gautam Founder & Director – Technology Solutions James Rasmussen Area VP Sales – Americas

6. Questions How many devices do you use in a day? • One • Two • Three • Four • What operating system(s)does/do your device(s) use? • iOS • Android • Windows • BlackBerry OS • Other

7. Agenda • The Multi-Device World • Why Responsive eLearning? • What is Responsive eLearning? • Challenges and Key Considerations • FRED is Born…

8. Multi-Device World

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

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

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

12. 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 “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/

13. What is Responsive?

14. Questions • Are you already • building responsiveeLearning? • 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. Creating Responsive eLearning Key Considerations & Challenges • Browser-OS-Device Combinations • Usability • Content Display and Treatment • Development Process

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

21. Creating Responsive eLearning Key Considerations & Challenges • Browser-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? • Know every individual user-agent string • Code differently for different browsers as required

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

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

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

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

26. Creating Responsive eLearning Key Considerations & Challenges Browser-OS-Device Combinations • Use HTML4 and HTML5 • Include a system check

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

28. Creating Responsive eLearning Key Considerations & Challenges Browser-OS-Device Combinations • Use HTML4 and HTML5 • Include a system check • Take advantage of HTML5 properties on supported browsers

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

30. Creating Responsive eLearning Key Considerations & Challenges Browser-OS-Device Combinations • Use HTML4 and HTML5 • Include a system check • Take advantage of HTML5 properties on supported browsers • Test on actual devices

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

32. Creating Responsive eLearning Key Considerations & Challenges Usability

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

34. Creating Responsive eLearning Key Considerations & Challenges Usability

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

36. Creating Responsive eLearning Key Considerations & Challenges Usability

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

38. Creating Responsive eLearning Key Considerations & Challenges Usability

39. Creating Responsive eLearning Key Considerations & Challenges Usability

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

41. Creating Responsive eLearning Key Considerations & Challenges Usability

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

43. Creating Responsive eLearning Key Considerations & Challenges Usability

44. Creating Responsive eLearning Key Considerations & Challenges Usability • Text Readability: • Common size that is comfortably readable on all devices • Dynamic sizing • Consider accessibility settings too.

45. Creating Responsive eLearning Key Considerations & Challenges Usability

46. Creating Responsive eLearning Key Considerations & Challenges Content Display

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

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