Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Top Tips for Responsive eLearning Design

6.255 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • How to Manifest Anything You Want in 24 hours ▲▲▲ http://ishbv.com/manifmagic/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • The Scrambler Unlock Her Legs | 95% Off by Bobby Rio-Rob Judge? ◆◆◆ http://scamcb.com/unlockher/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • How we discovered the real reason nice guys don't get laid, and a simple "fix" that allows you to gain the upper hand with a girl... without changing your personality or pretending to be someone you're not. learn more...  http://t.cn/AijLRbnO
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • lose 10 kg in 7 days without exercise - 7 days weight loss challenge ♥♥♥ http://scamcb.com/bkfitness3/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×