Responsive
eLearning
Creating
With
Amit Garg
@gargamit100
Geera Bellare #ulwebinar
India
UK
US
Middle East
New Zealand
S.Africa
Nigeria Kenya Singapore
Venezuela
13
165+
clients in
countries
Established
in...
Custom/ Bespoke
eLearning
Custom/Bespoke
mLearning
Our
learning
solutions
Winner of a Silver award in CLO
magazine's 'Learning In Practice
Awards 2011' for UpsideLMS
UpsideLMS listed as one of
the...
Geera Bellare
Amit Garg
Founder & Director – Custom Learning Solutions
AVP – Learning Design
Presenters
• The Multi-Device World
• Responsive eLearning – What? Why?
• FRED
• Challenges and Key Considerations
Agenda
How many devices do you use in a day?
(for professional and/or personal use)
• 1
• 2
• 3
• More than 3
Poll
Poll
On which OS do your devices run?
 iOS
 Android
 BlackBerry OS
 Windows
 Other
Multi Device World
Multi Device World
Jan 2014 - American Adults
cellphone
smartphone
tablet
Use ONLY mobile to
access the Internet
1. http:/...
http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
Multi Device World
Multi Device World
http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
Eric Schmidt
Gartner Symposium / IT Expo 2013
"it looks to us like the majority of enterprise
computing is being done on m...
Why Responsive eLearning?
Source – http://johnpolacek.github.io/scrolldeck.js/decks/responsive/
Jeffrey Veen
“Day by day, ...
Poll
What do you know about responsive eLearning?
o Not much; have just heard the term.
o Know what it is but have not had...
What is Responsive?
Poll
How do you think responsive eLearning can be
useful in your organization?
 To reach out to mobile and/or shop floor ...
What is Responsive eLearning?
eLearning that responds to device size
Poll
Does exactly the same content need to be
delivered on all devices?
o Yes
o No
o Not sure
Does Mobile Need a Full Version
• People are USED to the
standard Interfaces
• Some people access the
Internet only via th...
Benefits of Responsive eLearning
• Enhanced reach – higher uptake
• Single source
• Cost effectiveness
• Easy Maintenance
...
An HTML – CSS – Javascript
based framework to create
responsive eLearning
easily
Our Solution
Benefits
Customization Reliability
Consistent and
Complete
User Experience
Efficiency
Cost-effectiveness
Effective Content...
• Multi-Device Support
FRED - Key Features
• Multi-Device Support
• Template Library
FRED - Key Features
• Multi-Device Support
• Template Library
• Responsive Menu
FRED - Key Features
• Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
FRED - Key Features
• Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
• Multi-Lingual Support
FRED - Key Featur...
• Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
• Multi-Lingual Support
• Multiple Delive...
• Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
• Multi-Lingual Support
• Multiple Delive...
• Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
• Multi-Lingual Support
• Multiple Delive...
• Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
• Multi-Lingual Support
• Multiple Delive...
• Multi-Device Support
• Template Library
• Responsive Menu
• Multimedia Support
• Multi-Lingual Support
• Multiple Delive...
• Browser-Platform-OS-Device Combinations
• Usability
• Content Display and Treatment
• Standards and Compliances
• Develo...
Browser-Platform-OS-Device Combinations
Scope narrowed during project scoping – but still a wide variety
How to display co...
Creating Responsive eLearning
Key Considerations & Challenges
Properties used by different browsers for box sizing:
-webki...
Scope narrowed during project scoping – but still a wide variety…
How to display content in the same or similar manner and...
Testing:
• Takes longer
• More complex and intricate
• Costlier
Test on actual target devices:
• Primary devices
• Most po...
Lower Browser Versions (IE):
• IE6 is planned to be phased out in April 2014
• IE7 and IE8 use is declining
But IE8 doesn’...
FRED:
• Uses HTML4 and HTML5
• Includes a system check
Creating Responsive eLearning
Key Considerations & Challenges
Brows...
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
versi...
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
versi...
Video and audio formats loaded based on browser
Video:
• MP4
• OGV
Audio:
• MP3
• OGG
Can affect package size…
Creating Re...
Touch friendliness:
• Large
• Far apart
• Gestural navigation
Usability
Creating Responsive eLearning
Key Considerations &...
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Touch friendliness:
• Large
• Far apart
• Gestural navigation
• Layout
Usability
Creating Responsive eLearning
Key Conside...
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Global Navigation:
• Shift it?
• Group it?
• Layer it?
• Are all required?
• Are some more common?
FRED:
• Responsive menu...
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Interactivity Instructions:
• Device-neutral
• Device-appropriate
• Task-specific
Usability
Creating Responsive eLearning
...
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Text Readability:
• Common size that is comfortably readable on all devices
Usability
Creating Responsive eLearning
Key Co...
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Text Readability:
• Common size that is comfortably readable on all devices
• Dynamic sizing
Overridden by device and eLea...
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Layout and transformation based on screen size:
• Retain meaning
• Achieve consistent look and feel
• Achieve user-friendl...
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Usability
Creating Responsive eLearning
Key Considerations & Challenges
Images:
• Scaling
• Cropping
• Scaling pre-cropped images
Content Display
Creating Responsive eLearning
Key Considerations...
Treatment restrictions and alternatives based on HTML:
• Animations published as videos
Creating Responsive eLearning
Key ...
Content Display
Creating Responsive eLearning
Key Considerations & Challenges
Audio Strategy:
• Introductory audio
• Closely-synched audio in animations published as videos
Content Display
Creating Re...
Multimedia Components:
• Audio, video
• Images, graphics
• Animations
• Sprite animations
• SVG graphics/animations
Conten...
Content Display
Creating Responsive eLearning
Key Considerations & Challenges
Layering Interactivities:
• Levels of content chunking depending on learners’
comfort with scrolling on desktops and lapto...
Should these be shown on smaller devices?
• Application simulations
• Complex technical diagrams
• Animated stories / scen...
• SCORM or Tin Can compliance for LMS delivery
• SCORM or Tin Can compliance for apps (with customization for
SCORM)
• Acc...
• Fluid, iterative
• Higher interdependence
• Storyboard focused on core content and visuals
• Higher testing time
Process...
Creating Responsive eLearning With FRED
Upcoming SlideShare
Loading in...5
×

Creating Responsive eLearning With FRED

1,481

Published on

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

Published in: Education
1 Comment
1 Like
Statistics
Notes
  • If you are interested in seeing an alternate approach to responsive elearning design, check out our Respond5: Creator Edition product. It combines responsive design with in-line editing, quiz system integration, widget-based interactivity and powerful reporting: http://www.respond5.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,481
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
115
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • Make the countries blue…not purple
  • Add elearningAge awards
  • Get some research on this to quote after the poll questions
  • 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).
  • Get some research on this to quote after the poll questions
  • Get some research on this to quote after the poll questions
  • Learning and performance support interventions delivered from one source on multiple devices without any content loss.Content responds to or moulds itself to the devices' dimensions and rearranges itself accordingly.Content changes its form or gets layered where required for better user experience.
  • FRED delivers the same – or similar – content across different devices, ensuring a consistent and complete user experience.FRED is a reusable framework with an existing library of 20+ templates, allowing for efficiency during development. At the same time, FRED is flexible enough to be customized to meet your specific requirements. And FRED is reliable, having been thoroughly tested across multiple devices.Once a single base version has been developed,content management is easier and much more effective as updates or additions need only be made once to reflect across all devices.All these combine to make FRED a cost-effective solution for responsive eLearning development.
  • Creating Responsive eLearning With FRED

    1. 1. Responsive eLearning Creating With Amit Garg @gargamit100 Geera Bellare #ulwebinar
    2. 2. India UK US Middle East New Zealand S.Africa Nigeria Kenya Singapore Venezuela 13 165+ clients in countries Established in 2004 Australia
    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. Geera Bellare Amit Garg Founder & Director – Custom Learning Solutions AVP – Learning Design Presenters
    6. 6. • The Multi-Device World • Responsive eLearning – What? Why? • FRED • Challenges and Key Considerations Agenda
    7. 7. How many devices do you use in a day? (for professional and/or personal use) • 1 • 2 • 3 • More than 3 Poll
    8. 8. Poll On which OS do your devices run?  iOS  Android  BlackBerry OS  Windows  Other
    9. 9. Multi Device World
    10. 10. 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
    11. 11. http://services.google.com/fh/files/misc/multiscreenworld_final.pdf Multi Device World
    12. 12. Multi Device World http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
    13. 13. 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
    14. 14. Why Responsive eLearning? Source – http://johnpolacek.github.io/scrolldeck.js/decks/responsive/ 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.”
    15. 15. Poll What do you know about responsive eLearning? o Not much; have just heard the term. o Know what it is but have not had any hands-on experience. o Have designed/developed some responsive eLearning. o Have designed/developed a lot of responsive eLearning.
    16. 16. What is Responsive?
    17. 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. 18. What is Responsive eLearning? eLearning that responds to device size
    19. 19. Poll Does exactly the same content need to be delivered on all devices? o Yes o No o Not sure
    20. 20. Does Mobile Need a Full Version • People are USED to the standard Interfaces • Some people access the Internet only via their phones • When targeting Desktops & Tablets (not smartphones) • Compliance courses • When focus is on providing resources • Mobile Context is important • Need a lightweight solution. • Software simulations
    21. 21. Benefits of Responsive eLearning • Enhanced reach – higher uptake • Single source • Cost effectiveness • Easy Maintenance • Content Consistency • Track across devices • Allow sequencing
    22. 22. An HTML – CSS – Javascript based framework to create responsive eLearning easily Our Solution
    23. 23. Benefits Customization Reliability Consistent and Complete User Experience Efficiency Cost-effectiveness Effective Content Management
    24. 24. • Multi-Device Support FRED - Key Features
    25. 25. • Multi-Device Support • Template Library FRED - Key Features
    26. 26. • Multi-Device Support • Template Library • Responsive Menu FRED - Key Features
    27. 27. • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support FRED - Key Features
    28. 28. • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support • Multi-Lingual Support FRED - Key Features
    29. 29. • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support • Multi-Lingual Support • Multiple Delivery Options FRED - Key Features
    30. 30. • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support • Multi-Lingual Support • Multiple Delivery Options • Learning Standards Compliance FRED - Key Features
    31. 31. • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support • Multi-Lingual Support • Multiple Delivery Options • Learning Standards Compliance • Accessibility Support FRED - Key Features
    32. 32. • Multi-Device Support • Template Library • Responsive Menu • Multimedia Support • Multi-Lingual Support • Multiple Delivery Options • Learning Standards Compliance • Accessibility Support • Social Media Integration FRED - Key Features
    33. 33. • 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 FRED - Key Features
    34. 34. • Browser-Platform-OS-Device Combinations • Usability • Content Display and Treatment • Standards and Compliances • Development Process Key Considerations & Challenges Creating Responsive eLearning
    35. 35. Browser-Platform-OS-Device Combinations 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 Creating Responsive eLearning Key Considerations & Challenges It should work on every possible device!
    36. 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. 37. 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 Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations It should work on every possible device!
    38. 38. 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-Platform-OS-Device Combinations
    39. 39. 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-Platform-OS-Device Combinations
    40. 40. FRED: • Uses HTML4 and HTML5 • Includes a system check Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations
    41. 41. Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations
    42. 42. FRED: • Uses HTML4 and HTML5 • Includes a system check • Includes templates whose treatment changes based on browser version Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations
    43. 43. Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations
    44. 44. FRED: • Uses HTML4 and HTML5 • Includes a system check • Includes templates whose treatment changes based on browser version • Is tested on actual devices Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations
    45. 45. Video and audio formats loaded based on browser Video: • MP4 • OGV Audio: • MP3 • OGG Can affect package size… Creating Responsive eLearning Key Considerations & Challenges Browser-Platform-OS-Device Combinations
    46. 46. Touch friendliness: • Large • Far apart • Gestural navigation Usability Creating Responsive eLearning Key Considerations & Challenges
    47. 47. Usability Creating Responsive eLearning Key Considerations & Challenges
    48. 48. Touch friendliness: • Large • Far apart • Gestural navigation • Layout Usability Creating Responsive eLearning Key Considerations & Challenges
    49. 49. Usability Creating Responsive eLearning Key Considerations & Challenges
    50. 50. Global Navigation: • Shift it? • Group it? • Layer it? • Are all required? • Are some more common? FRED: • Responsive menu • Controls displayed/hidden based on device Usability Creating Responsive eLearning Key Considerations & Challenges
    51. 51. Usability Creating Responsive eLearning Key Considerations & Challenges
    52. 52. Usability Creating Responsive eLearning Key Considerations & Challenges
    53. 53. Interactivity Instructions: • Device-neutral • Device-appropriate • Task-specific Usability Creating Responsive eLearning Key Considerations & Challenges
    54. 54. Usability Creating Responsive eLearning Key Considerations & Challenges
    55. 55. Text Readability: • Common size that is comfortably readable on all devices Usability Creating Responsive eLearning Key Considerations & Challenges
    56. 56. Usability Creating Responsive eLearning Key Considerations & Challenges
    57. 57. Text Readability: • Common size that is comfortably readable on all devices • Dynamic sizing Overridden by device and eLearning accessibility settings Usability Creating Responsive eLearning Key Considerations & Challenges
    58. 58. Usability Creating Responsive eLearning Key Considerations & Challenges
    59. 59. 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
    60. 60. Usability Creating Responsive eLearning Key Considerations & Challenges
    61. 61. Usability Creating Responsive eLearning Key Considerations & Challenges
    62. 62. Usability Creating Responsive eLearning Key Considerations & Challenges
    63. 63. Usability Creating Responsive eLearning Key Considerations & Challenges
    64. 64. Images: • Scaling • Cropping • Scaling pre-cropped images Content Display Creating Responsive eLearning Key Considerations & Challenges
    65. 65. Treatment restrictions and alternatives based on HTML: • Animations published as videos Creating Responsive eLearning Key Considerations & Challenges Content Display
    66. 66. Content Display Creating Responsive eLearning Key Considerations & Challenges
    67. 67. Audio Strategy: • Introductory audio • Closely-synched audio in animations published as videos Content Display Creating Responsive eLearning Key Considerations & Challenges
    68. 68. Multimedia Components: • Audio, video • Images, graphics • Animations • Sprite animations • SVG graphics/animations Content Display Creating Responsive eLearning Key Considerations & Challenges
    69. 69. Content Display Creating Responsive eLearning Key Considerations & Challenges
    70. 70. Layering Interactivities: • Levels of content chunking depending on learners’ comfort with scrolling on desktops and laptops Content Display Creating Responsive eLearning Key Considerations & Challenges
    71. 71. 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
    72. 72. • SCORM or Tin Can compliance for LMS delivery • SCORM or Tin Can compliance for apps (with customization for SCORM) • Accessibility provisions Standards and Compliances Creating Responsive eLearning Key Considerations & Challenges
    73. 73. • Fluid, iterative • Higher interdependence • Storyboard focused on core content and visuals • Higher testing time Process Creating Responsive eLearning Key Considerations & Challenges
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×