Creating Responsive eLearning With FRED

  • Published on
    16-Apr-2017

  • View
    2.550

  • Download
    2

Transcript

Elearning on tablets What Why & HowResponsive eLearningCreating WithAmit Garg @gargamit100Geera Bellare#ulwebinar1IndiaUKUSMiddle EastNew ZealandS.AfricaNigeriaKenyaSingaporeVenezuela13165+clients incountriesEstablishedin 2004AustraliaMake the countries bluenot purple2Custom/ BespokeeLearningCustom/BespokemLearningOur learning solutions3Winner of a Silver award in CLOmagazine's 'Learning In PracticeAwards 2011' for UpsideLMSUpsideLMS 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 program30+Awards & recognitionsWinner ofeLearning Team Of The Year2013Add elearningAge awards4GeeraBellareAmit GargFounder & Director Custom Learning SolutionsAVP Learning DesignPresenters5The Multi-Device WorldResponsive eLearning What? Why?FREDChallenges and Key ConsiderationsAgendaHow many devices do you use in a day? (for professional and/or personal use)123More than 3Poll7PollOn which OS do your devices run?iOSAndroidBlackBerry OSWindowsOtherGet some research on this to quote after the poll questions8Multi Device World Multi Device WorldJan 2014 - American AdultscellphonesmartphonetabletUse ONLY mobile to access the Internet1. http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/2. link10http://services.google.com/fh/files/misc/multiscreenworld_final.pdfMulti Device WorldIn 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).11Multi Device Worldhttp://services.google.com/fh/files/misc/multiscreenworld_final.pdfEric 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 World13Why 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.14PollWhat 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.Get some research on this to quote after the poll questions15What is Responsive?16PollHow 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 completeGet some research on this to quote after the poll questions17What 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.18PollDoes exactly the same content need to be delivered on all devices?YesNoNot sure19Does Mobile Need a Full VersionPeople 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 simulations20Benefits of Responsive eLearningEnhanced reach higher uptakeSingle source Cost effectivenessEasy MaintenanceContent Consistency Track across devicesAllow sequencing 21An HTML CSS Javascript based framework to create responsive eLearningeasilyOur SolutionBenefits CustomizationReliabilityConsistent and Complete User ExperienceEfficiencyCost-effectivenessEffective ContentManagementFRED 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.23Multi-Device SupportFRED - Key Features24Multi-Device SupportTemplate LibraryFRED - Key Features25Multi-Device SupportTemplate LibraryResponsive MenuFRED - Key Features26Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportFRED - Key Features27Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportFRED - Key Features28Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportMultiple Delivery OptionsFRED - Key Features29Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportMultiple Delivery OptionsLearning Standards ComplianceFRED - Key Features30Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportMultiple Delivery OptionsLearning Standards ComplianceAccessibility SupportFRED - Key Features31Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportMultiple Delivery OptionsLearning Standards ComplianceAccessibility SupportSocial Media IntegrationFRED - Key Features32Multi-Device SupportTemplate LibraryResponsive MenuMultimedia SupportMulti-Lingual SupportMultiple Delivery OptionsLearning Standards ComplianceAccessibility SupportSocial Media IntegrationDeveloper AidsFRED - Key Features33Browser-Platform-OS-Device CombinationsUsabilityContent Display and TreatmentStandards and CompliancesDevelopment ProcessKey Considerations & ChallengesCreating Responsive eLearning34Browser-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!35Creating 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; Others36Scope 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 CombinationsIt should work on every possible device!37Testing: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 Combinations38Lower Browser Versions (IE):IE6 is planned to be phased out in April 2014IE7 and IE8 use is decliningBut IE8 doesnt support HTML5 elements http://en.wikipedia.org/wiki/Internet_Explorer_6 || theie7countdown.com || theie8countdown.comCreating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations39FRED:Uses HTML4 and HTML5Includes a system checkCreating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations40Creating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations41FRED:Uses HTML4 and HTML5Includes a system checkIncludes templates whose treatment changes based on browser versionCreating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations42Creating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations43FRED: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 Combinations44Video and audio formats loaded based on browserVideo:MP4OGVAudio:MP3OGGCan affect package sizeCreating Responsive eLearningKey Considerations & ChallengesBrowser-Platform-OS-Device Combinations45Touch friendliness:LargeFar apartGestural navigationUsabilityCreating Responsive eLearningKey Considerations & Challenges46UsabilityCreating Responsive eLearningKey Considerations & Challenges47Touch friendliness:LargeFar apartGestural navigationLayoutUsabilityCreating Responsive eLearningKey Considerations & Challenges48UsabilityCreating Responsive eLearningKey Considerations & Challenges49Global Navigation:Shift it?Group it?Layer it?Are all required?Are some more common?FRED:Responsive menuControls displayed/hidden based on device UsabilityCreating Responsive eLearningKey Considerations & Challenges50UsabilityCreating Responsive eLearningKey Considerations & Challenges51UsabilityCreating Responsive eLearningKey Considerations & Challenges52Interactivity Instructions:Device-neutralDevice-appropriateTask-specificUsabilityCreating Responsive eLearningKey Considerations & Challenges53UsabilityCreating Responsive eLearningKey Considerations & Challenges54Text Readability:Common size that is comfortably readable on all devicesUsabilityCreating Responsive eLearningKey Considerations & Challenges55UsabilityCreating Responsive eLearningKey Considerations & Challenges56Text Readability:Common size that is comfortably readable on all devicesDynamic sizingOverridden by device and eLearning accessibility settingsUsabilityCreating Responsive eLearningKey Considerations & Challenges57UsabilityCreating Responsive eLearningKey Considerations & Challenges58Layout and transformation based on screen size:Retain meaning Achieve consistent look and feelAchieve user-friendly experience Content DisplayCreating Responsive eLearningKey Considerations & Challenges59UsabilityCreating Responsive eLearningKey Considerations & Challenges60UsabilityCreating Responsive eLearningKey Considerations & Challenges61UsabilityCreating Responsive eLearningKey Considerations & Challenges62UsabilityCreating Responsive eLearningKey Considerations & Challenges63Images:ScalingCroppingScaling pre-cropped imagesContent DisplayCreating Responsive eLearningKey Considerations & Challenges64Treatment restrictions and alternatives based on HTML:Animations published as videosCreating Responsive eLearningKey Considerations & ChallengesContent Display65Content DisplayCreating Responsive eLearningKey Considerations & Challenges66Audio Strategy:Introductory audioClosely-synched audio in animations published as videosContent DisplayCreating Responsive eLearningKey Considerations & Challenges67Multimedia Components:Audio, videoImages, graphicsAnimationsSprite animationsSVG graphics/animationsContent DisplayCreating Responsive eLearningKey Considerations & Challenges68Content DisplayCreating Responsive eLearningKey Considerations & Challenges69Layering Interactivities:Levels of content chunking depending on learners comfort with scrolling on desktops and laptopsContent DisplayCreating Responsive eLearningKey Considerations & Challenges70Should 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 DisplayCreating Responsive eLearningKey Considerations & Challenges71SCORM or Tin Can compliance for LMS deliverySCORM or Tin Can compliance for apps (with customization for SCORM)Accessibility provisionsStandards and CompliancesCreating Responsive eLearningKey Considerations & Challenges72Fluid, iterativeHigher interdependenceStoryboard focused on core content and visualsHigher testing timeProcessCreating Responsive eLearningKey Considerations & Challenges73Thank You!Amit Garg@gargamit100amitgarg@upsidelearning.comwww.upsidelearning.comwww.upsidelearning.com/blogGeera Bellaregeera.bellare@upsidelearning.com74