Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Top Tips for Responsive eLearning Design

5,983 views

Published on

Responsive web design? What is it and how does it apply to eLearning? What can it look like? Check out examples of eLearning created in Adapt, an open-source responsive eLearning authoring framework.

Published in: Design

Top Tips for Responsive eLearning Design

  1. 1. Top Tips for Responsive eLearning Instructional Design Cammy Bean DevLearn 2014
  2. 2. How many devices do you use in a typical day? (Desktop, laptop, smartphone, tablets) 1) One 2) Two 3) Three 4) More than 3
  3. 3. We live in a multi-device world. Deal with it.
  4. 4. What is this word “Responsive?”
  5. 5. Content that responds to your screen size. www.bostonglobe.com
  6. 6. “A web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).” http://en.wikipedia.org/wiki/Responsive_web_design
  7. 7. How do you build responsive sites? Think WEB DESIGN tools. HTML, jQuery, CSS, JSON…and other things I can’t explain…
  8. 8. ≠ Responsive
  9. 9. Responsive web design can take more time…and budget. But it can be worth it.
  10. 10. From web design to eLearning design…
  11. 11. Consider first: Do you need to deliver eLearning that only works on one device or on multiple devices?
  12. 12. are you creating content?
  13. 13. http://cammybean.kineo.com/2014/05/whats-your-technology-mix-for-learning.html
  14. 14. How will your audience use their devices? Know your use cases.
  15. 15. It’s a grand convergence: smart phones, large phones (phablets), tablets with keyboards, laptops with touch screens.
  16. 16. “Making mLearning Usable: How We Use Mobile Devices”, Steven Hoober with Patti Shank, PhD, CPT, eLearning Guild Research Report, 2014.
  17. 17. What is responsive eLearning? Single version of your course delivered to multiple devices Built in everyday web technology (HTML, JavaScript, CSS)
  18. 18. • One version works on all devices • One version to track and maintain • Distribute from a single LMS or source • Accessible content • Searchable content • More cost effective • Allows sequential screening
  19. 19. So let’s change how we think about eLearning design.
  20. 20. Just because you can, doesn’t mean you should. Making the entire course available on mobile may not be the best approach…. Think through your use cases!
  21. 21. Put scrolling at the heart of your design. Your learners are already doing it! Make the navigation meaningful! Liberate yourself from the fold!
  22. 22. Let them scroll. Amazon does.
  23. 23. Scrolling Works Volvo site had car model information using click to go to next page Users only saw 18% of the content Changed to one long scrolling page 46% of users now view the content
  24. 24. Web designers have transformed the page with the scroll. http://www.dangersoffracking.com/
  25. 25. They’ve found ways to set their content free. http://titanic.q-music.be/
  26. 26. We can do the same with eLearning!
  27. 27. Side bar note…
  28. 28. Adapt: An eLearning authoring tool designed so a single version of content can be viewed seamlessly across a range of devices Open Source & Free
  29. 29. Finally, responsive web design for eLearning! • Responds to screen size • Reduce image size/remove for Smartphone • Change interactions for smaller screens
  30. 30. Back to our tips…
  31. 31. Control the scroll. We’ve unlocked the scroll bar, but keep a “page” to a single learning objective or activity.
  32. 32. Think mobile first. Think about how your design and learning model will work on mobile.
  33. 33. Same content, different presentation? OR Different content on different devices?
  34. 34. Visualize the big picture. Think about how the layout and the visual treatment of the entire page can be used to support the content.
  35. 35. Pull them down the page. Tell a story by weaving the content, the graphics, and the navigation together.
  36. 36. Remember the people, man! Create well-structured content that follows a solid learning model. Don’t forget the instructional design!
  37. 37. A I D A
  38. 38. Gain Attention & Set Direction Introduce the content and create curiosity by turning learning objectives into questions: “Do you know how to….” Create increasing levels of Interest by illustrating the importance of the topic Make it personal and create the Desire by getting the learner to see what they will gain from learning this topic. Explain how the rest of the programme is organised and provide links to what they should do next A I D A
  39. 39. Attention
  40. 40. Interest
  41. 41. Desire
  42. 42. Action
  43. 43. Set Direction for the section: (Say what it will cover and what the learner will get from it) Summarize the key points via ‘Recap’ block Present Exemplify & Explore Present Information: (e.g. Hot Graphic Text and Graphic Accordion Give Examples or let the learner Explore the key learning points (DON’T introduce new learning points here). Set Direction Summarize Knowledge & Skill Builder
  44. 44. Observe and Analyze Audio to introduce a Case Study Narrative presents the example or case study M/C Question based on the case study Observe Analyze/Rate Decide/Reflect Your possible options here:
  45. 45. Learn and Apply…Challenge and Support
  46. 46. Consider the graphics. If you shrink that image down for mobile will it still be meaningful? Create separate versions of images – not just different sizes of the same image.
  47. 47. Consider the download time. No matter the device, a responsive site always downloads the entire CSS file. ALL images!
  48. 48. Plan your time and budget accordingly. It may take more time to design…and more testing!
  49. 49. Wireframe it. Work out your layout ideas early… …and then share them.
  50. 50. Prototype, test and share. Talk to your Front End Developers. Early proof of concept and full QA on all target devices. Engage your learners. Share and seek feedback.
  51. 51. ??? @steverayson
  52. 52. Hey, look. I wrote a book! Available now: http://www.astd.org/Publications/Books/The-Accidental-Instructional-Designer and on Amazon
  53. 53. Cammy Bean twitter: @cammybean blog: http://cammybean.kineo.com References and more on responsive design: http://www.diigo.com/list/cammybean/design The Accidental Instructional Designer: http://www.astd.org/Publications/Books/The-Accidental-Instructional- Designer
  54. 54. Want to know more about Adapt?
  55. 55. Open source & free No vendor lock-in Fully responsive Industry standards Accessible Searchable Adopts web based scrolling principles https://community.adaptlearning.org/ Adapt
  56. 56. Why Open Source? We don’t compete on authoring tool We all want a great multi-device authoring tool Share investment No single company has monopoly on best ideas Give back to wider community
  57. 57. 217 modules build and delivered 70+ organisations using Adapt content 45 plugins built and supported 94,222 lines of code that took 24 years to write 18,702 unique visitors across 145 countries 7 active partners 1,661 registered users
  58. 58. Adapt Technologies HTML5, Javascript & CSS Node.JS Bower, by Twitter Grunt.JS
  59. 59. Adapt Community Site The community site provides a place for everyone to discuss the project and discover more about using the framework.
  60. 60. Adapt Developer Site The developer site provides a place for technical discussion and access to the framework components.
  61. 61. What next… Join the Adapt Learning Community at adaptlearning.org Follow Adapt Learning on Twitter Check out our website for the latest multi-device case studies and updates

×