Click here to load reader
View
2.553
Download
2
Embed Size (px)
Citation preview
Responsive eLearningCreating
With
Amit Garg @gargamit100
Geera Bellare #ulwebinar
India
UKUS
Middle East
New ZealandS.Africa
Nigeria Kenya Singapore
Venezuela
13165+
clients in
countries
Establishedin 2004
Australia
Custom/ BespokeeLearning
Custom/BespokemLearning
Our learning solutions
Winner of a Silver award in CLOmagazine'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 '2010Top 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 &
recognitionsWinner of
eLearning Team Of The Year2013
Geera Bellare
Amit GargFounder & 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://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/2. link
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 SchmidtGartner 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
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.”
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.
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 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
What is Responsive eLearning?
eLearning that responds to device size
Poll
Does exactly the same content need to be delivered on all devices?o Yeso Noo Not sure
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
Benefits of Responsive eLearning
• Enhanced reach – higher uptake• Single source
• Cost effectiveness• Easy Maintenance• Content Consistency
• Track across devices• Allow sequencing
An HTML – CSS – Javascript based framework to create
responsive eLearningeasily
Our Solution
Benefits
Customization Reliability
Consistent and Complete
User Experience
Efficiency
Cost-effectiveness
Effective ContentManagement
• 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 Features
• Multi-Device Support• Template Library• Responsive Menu• Multimedia Support• Multi-Lingual Support• Multiple Delivery Options
FRED - Key Features
• Multi-Device Support• Template Library• Responsive Menu• Multimedia Support• Multi-Lingual Support• Multiple Delivery Options• Learning Standards Compliance
FRED - Key Features
• Multi-Device Support• Template Library• Responsive Menu• Multimedia Support• Multi-Lingual Support• Multiple Delivery Options• Learning Standards Compliance• Accessibility Support
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
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
FRED - Key Features
• Browser-Platform-OS-Device Combinations• Usability• Content Display and Treatment• Standards and Compliances• Development Process
Key Considerations & Challenges
Creating Responsive eLearning
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 eLearningKey Considerations & Challenges
It should work on every possible device!
Creating Responsive eLearningKey Considerations & Challenges
Properties used by different browsers for box sizing:
-webkit-box-sizing: border-box; Safari, Chrome-moz-box-sizing: border-box; Mozillabox-sizing: border-box; Others
-webkit-box-sizing: content-box; Safari, Chrome-moz-box-sizing: content-box; Mozillabox-sizing:content-box; Others
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 eLearningKey Considerations & Challenges
Browser-Platform-OS-Device Combinations
It should work on every possible device!
Testing:• Takes longer• More complex and intricate• Costlier
Test on actual target devices:• Primary devices• Most popular or largest volume of devices
Creating Responsive eLearningKey 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
Creating Responsive eLearningKey Considerations & Challenges
Browser-Platform-OS-Device Combinations
FRED:• Uses HTML4 and HTML5• Includes a system check
Creating Responsive eLearningKey Considerations & Challenges
Browser-Platform-OS-Device Combinations
Creating Responsive eLearningKey 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
Creating Responsive eLearningKey Considerations & Challenges
Browser-Platform-OS-Device Combinations
Creating Responsive eLearningKey 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
Creating Responsive eLearningKey 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…
Creating Responsive eLearningKey Considerations & Challenges
Browser-Platform-OS-Device Combinations
Touch friendliness:• Large• Far apart• Gestural navigation
Usability
Creating Responsive eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
Touch friendliness:• Large• Far apart• Gestural navigation• Layout
Usability
Creating Responsive eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
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 eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
Interactivity Instructions:• Device-neutral• Device-appropriate• Task-specific
Usability
Creating Responsive eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
Text Readability:• Common size that is comfortably readable on all devices
Usability
Creating Responsive eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
Text Readability:• Common size that is comfortably readable on all devices• Dynamic sizing
Overridden by device and eLearning accessibility settings
Usability
Creating Responsive eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
Layout and transformation based on screen size:
• Retain meaning • Achieve consistent look and feel• Achieve user-friendly experience
Content Display
Creating Responsive eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
Usability
Creating Responsive eLearningKey Considerations & Challenges
Images:• Scaling• Cropping• Scaling pre-cropped images
Content Display
Creating Responsive eLearningKey Considerations & Challenges
Treatment restrictions and alternatives based on HTML:• Animations published as videos
Creating Responsive eLearningKey Considerations & Challenges
Content Display
Content Display
Creating Responsive eLearningKey Considerations & Challenges
Audio Strategy:• Introductory audio• Closely-synched audio in animations published as videos
Content Display
Creating Responsive eLearningKey Considerations & Challenges
Multimedia Components:• Audio, video• Images, graphics• Animations
• Sprite animations• SVG graphics/animations
Content Display
Creating Responsive eLearningKey Considerations & Challenges
Content Display
Creating Responsive eLearningKey Considerations & Challenges
Layering Interactivities:• Levels of content chunking depending on learners’
comfort with scrolling on desktops and laptops
Content Display
Creating Responsive eLearningKey Considerations & Challenges
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 eLearningKey Considerations & Challenges
• 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 eLearningKey Considerations & Challenges
• Fluid, iterative
• Higher interdependence
• Storyboard focused on core content and visuals
• Higher testing time
Process
Creating Responsive eLearningKey Considerations & Challenges
Thank You!
Amit Garg@gargamit100
www.upsidelearning.comwww.upsidelearning.com/blog
Geera [email protected]