3 R's of Responsive Learning
•Download as PPTX, PDF•
1 like•478 views
Presentation delivered by Dr.Maureen Murphy at World of Learning, Learning Design Live session on 18 October 2017. In this presentation, you will learn how to design rich content that really teaches, how to be realistic on what you can design and build using the tools and time available to you and how to implement robust and accessible content that works now and into the future.
Report
Share
More Related Content
What's hot
What's hot (19)
Similar to 3 R's of Responsive Learning
Similar to 3 R's of Responsive Learning (20)
More from Aurion Learning
More from Aurion Learning (20)
Recently uploaded
Recently uploaded (20)
3 R's of Responsive Learning
- 1. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS THE 3xRs OF RESPONSIVE LEARNING Dr Maureen Murphy Hello Visit us at stand #B80 Share with us: @aurionlearning
- 2. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Full Service Learning and Development Company. We use a range of creative techniques to deliver a solution that fully meets your learning and development needs.
- 3. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Rich content that teaches Realistic use of resources Robust design & build
- 4. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Take a moment What is responsive design?
- 5. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Responsive design makes use of flexible layouts, flexible images and flexible style sheets. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly. Non-responsive Responsive
- 6. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Example – SSSC Step into Leadership Portal http://www.stepintoleadership.info/
- 7. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Take a moment Why use responsive design for learning content?
- 8. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS supports mLearning m = mobile / multi platform interoperable & accessible at point of ‘need’ Pure HTML 5 Authoring Tool
- 9. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS mLearning eLearning Main Objective Knowledge distribution / Application of knowledge / Just-in-Time – Ideal for Performance Support Knowledge presentation / Retention / Just-in-Case – Ideal for deeper Learning Approach Flexible / Informal / Structured & Unstructured Formal / Structured Content Type Concise / Micro-lessons / Search- enabled – balance of push/pull Comprehensive, typically covering: Topic concepts, principles, processes, procedures and facts – mostly push Typical Content Images / Videos / Animations / Guides / Social Media Animated slides / Voiceovers / Videos / Scenarios / Case studies User Access Anywhere, anytime at the point of need At the desk or in static environment Time Spent 3 - 10 minutes 20 minutes - 1 hour
- 10. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Is a responsive / mLearning solution needed? Changes the way you design the learning
- 11. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS 1. Who are the learners? 2. What ..content do they need? ..devices will they use? 3. Where will they access the content? 4. When will they access the content? 5. Why are they accessing the content? Whatever…what will keep them engaged? 5 W’s can help…
- 12. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Rich content that teaches
- 13. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Example – Cancer Research UK
- 14. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS 1. Know the devices you are designing for 2. Design for the smallest device...mobile first 3. Keep content & navigation simple & quick • Nuggets of content, micro lessons (5 mins) • Blocks of content, animations, infographics • Use simple, direct language (distraction factor) • Crisp images, bulleted lists • 6 items in menu • 3 items in header 4. Design for non linear access - embrace the scroll bar 5. Segment your learning content – core and extended
- 15. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Example – Queen’s University Belfast
- 16. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Example – Tourism Ireland
- 17. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Realistic use of resources Pure HTML 5 Authoring ToolGeneral
- 18. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS General
- 19. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS 1. Drop large images that aren’t necessary – screen fillers 2. Select suitable interaction types • Accordions for further information • Tabs, Click reveals, modal windows • Dropdown list • Avoid drag and drop • Refine instructions to reflect multi device access 3. Use Big Buttons with padding around 4. Minimise file sizes to reduce download size: images & video 5. Plan out your content: use colour & graphics to draw the eye down the page (image save as double size under 1Mb so still good resolution when resized)
- 20. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS 1. Quick to build mLearning/responsive content without coding 2. Select an authoring tool that’s right for you e.g. Storyline, Captivate, Evolve, Gomo, Elucidat, Adapt framework 3. Different approaches - scalable vs fully responsive 4. Look for variety in screen layouts / templates - some so limited - no need to storyboard 5. Test outside the tool’s preview functionality Authoring Tool www.coursekit.co.uk
- 21. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS 1. Use a CSS framework – we use the Bootstrap framework – code you can reuse (bootstrap.com) • inbuilt components eg tabs, accordions, buttons, list items, check boxes – widely supported 2. Use a hierarchy of CSS on page load • Bootstrap styles • Main (custom styles), • Responsive 3. Substituting graphical icons for textA-based icons (font awesome) and style using CSS 4. Audio - by default – doesn’t play to minimise data usage • Include a play button on page or open in modal window (stops when close the modal window or doesn’t continue as you scroll). 5. Video – host in Vimeo or YouTube (compression, CC) Pure HTML 5
- 22. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Robust design & build
- 23. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS 1. Use Inspector Tool browser plugin • Chrome – Inspector Tool & window resizer • Firefox – Firebug • Safari – Inspector tool 2. Use Browserstack 3. Use Adobe xd or Marvelapp.com 4. Prototype and carry out UX Workshops as needed 5. Ensure works as planned in LMS (tracking, new page, not a container)
- 24. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS Rich content that teaches Realistic use of resources Robust design & build Take a moment Review, Revisit & Ramp up
- 25. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS