Creating Responsive eLearning With FRED

Elearning on tablets What Why & How

Responsive eLearning

Creating With

Amit Garg @gargamit100Geera Bellare#ulwebinar

USMiddle EastNew ZealandS.AfricaNigeriaKenyaSingaporeVenezuela

13165+clients incountries

Establishedin 2004

Australia

Make the countries bluenot purple2

Custom/ BespokeeLearning

Custom/BespokemLearning

Our learning solutions

Winner of a Silver award in CLOmagazine's 'Learning In PracticeAwards 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 Listby TrainingIndustry.comWinner of Red Herring 100 Asia Award in 2008 & finalist in Red Herring Global 100 ('09)

Winner in Deloittes Technology Fast 500 Asia Pacific 2008 & 2009 program, and Fast 50 India 2008 program

30+Awards & recognitions

Winner ofeLearning Team Of The Year2013

Add elearningAge awards4

GeeraBellareAmit GargFounder & Director Custom Learning SolutionsAVP Learning Design

Presenters

The Multi-Device WorldResponsive eLearning What? Why?FREDChallenges and Key ConsiderationsAgenda

How many devices do you use in a day? (for professional and/or personal use)123More than 3

PollOn which OS do your devices run?iOSAndroidBlackBerry OSWindowsOther

Get some research on this to quote after the poll questions8

Multi Device World

Multi Device WorldJan 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.pdfMulti Device World

In his bookTapworthy: 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).

Multi Device Worldhttp://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 tabletsMulti 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 shiftin how well build websites for the decade to come.

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

What is Responsive?

PollHow 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 devicesTo allow employees to access eLearning outside office hours including during travel and waiting timesTo make (compliance) training programs more convenient to complete

What is Responsive eLearning?eLearning that responds to device size

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

PollDoes exactly the same content need to be delivered on all devices?YesNoNot sure

Does Mobile Need a Full Version

People are USED to the standard InterfacesSome people access the Internet only via their phonesWhen targeting Desktops & Tablets (not smartphones)Compliance coursesWhen focus is on providing resourcesMobile Context is important Need a lightweight solution. Software simulations

Benefits of Responsive eLearningEnhanced reach higher uptakeSingle source Cost effectivenessEasy MaintenanceContent Consistency Track across devicesAllow 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

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.

Multi-Device SupportFRED - Key Features

Multi-Device SupportTemplate LibraryFRED - Key Features

Multi-Device SupportTemplate LibraryResponsive MenuFRED - Key Features

Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportFRED - Key Features

Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportFRED - Key Features

Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportMultiple Delivery OptionsFRED - Key Features

Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportMultiple Delivery OptionsLearning Standards ComplianceFRED - Key Features

Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportMultiple Delivery OptionsLearning Standards ComplianceAccessibility SupportFRED - Key Features

Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportMultiple Delivery OptionsLearning Standards ComplianceAccessibility SupportSocial Media IntegrationFRED - Key Features

Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportMultiple Delivery OptionsLearning Standards ComplianceAccessibility SupportSocial Media IntegrationDeveloper AidsFRED - Key Features

Browser-Platform-OS-Device CombinationsUsabilityContent Display and TreatmentStandards and CompliancesDevelopment ProcessKey Considerations & ChallengesCreating Responsive eLearning

Browser-Platform-OS-Device CombinationsScope narrowed during project scoping but still a wide varietyHow to display content in the same or similar manner and achieve the same behavior?

Code differently for different browsersCreating Responsive eLearningKey Considerations & ChallengesIt should work on every possible device!

Creating Responsive eLearningKey Considerations & ChallengesProperties 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 varietyHow to display content in the same or similar manner and achieve the same behavior?

Code differently for different browsersKnow every individual user-agent string

Creating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations

It should work on every possible device!

Testing:Takes longerMore complex and intricateCostlierTest on actual target devices:Primary devicesMost popular or largest volume of devices Creating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations

Lower Browser Versions (IE):IE6 is planned to be phased out in April 2014IE7 and IE8 use is declining

But IE8 doesnt support HTML5 elements http://en.wikipedia.org/wiki/Internet_Explorer_6 || theie7countdown.com || theie8countdown.comCreating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations

FRED:Uses HTML4 and HTML5Includes a system checkCreating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations

FRED:Uses HTML4 and HTML5Includes a system checkIncludes templates whose treatment changes based on browser versionCreating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations

FRED:Uses HTML4 and HTML5Includes a system checkIncludes templates whose treatment changes based on browser versionIs tested on actual devices Creating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations

Video and audio formats loaded based on browser

Video:MP4OGV

Audio:MP3OGG

Can affect package sizeCreating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations

Touch friendliness:LargeFar apartGestural navigation

UsabilityCreating Responsive eLearningKey Considerations & Challenges

Touch friendliness:LargeFar apartGestural navigationLayout

Global Navigation:Shift it?Group it?Layer it?Are all required?Are some more common?

FRED:Responsive menuControls displayed/hidden based on device

Interactivity Instructions:Device-neutralDevice-appropriateTask-specific

Text Readability:Common size that is comfortably readable on all devices

Text Readability:Common size that is comfortably readable on all devicesDynamic sizing

Overridden by device and eLearning accessibility settings

Layout and transformation based on screen size:

Retain meaning Achieve consistent look and feelAchieve user-friendly experience

Content DisplayCreating Responsive eLearningKey Considerations & Challenges

Images:ScalingCroppingScaling pre-cropped images

Content DisplayCreating Responsive eLearningKey Considerations & Challenges

Treatment restrictions and alternatives based on HTML:Animations published as videos

Creating Responsive eLearningKey Considerations & ChallengesContent Display

Content Display

Creating Responsive eLearningKey Considerations & Challenges

Audio Strategy:Introductory audioClosely-synched audio in animations published as videos

Content Display

Multimedia Components:Audio, videoImages, graphicsAnimations

Sprite animationsSVG graphics/animations

Content Display

Layering Interactivities:Levels of content chunking depending on learners comfort with scrolling on desktops and laptopsContent Display

Should these be shown on smaller devices?Application simulationsComplex technical diagramsAnimated stories / scenarios where you need to see details of the environment or objects Animated stories / scenarios where there is important text within the animationExploratory interactivities where you need to identify or locate areas to exploreContent Display

SCORM or Tin Can compliance for LMS delivery

SCORM or Tin Can compliance for apps (with customization for SCORM)

Accessibility provisions

Standards and Compliances

Fluid, iterative

Higher interdependence

Storyboard focused on core content and visuals

Higher testing timeProcess

Thank You!

Amit Garg@gargamit100amitgarg@upsidelearning.comwww.upsidelearning.comwww.upsidelearning.com/blog

Geera Bellaregeera.bellare@upsidelearning.com