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.

Responsive eLearning - An eBook by Upside Learning

2,888 views

Published on

All you need to know about Responsive eLearning. Explained.

Published in: Technology
  • Be the first to comment

Responsive eLearning - An eBook by Upside Learning

  1. 1. RESPONSIVE eLEARN| NG DESIGN 8: DEVELOPMENT V UPSIDE
  2. 2. The world of _ connechng devices has increased exponentially!
  3. 3. of our dailymedia interactions are gm‘ — ‘IW/ . of all media interactions are non-screen based v I‘? —-A »‘ I g . . 4‘ - .4 u :2‘ .7 at 2 t. ‘b~ 3 5 . 3 / , i l l l ‘ '-— fair Television On average we spend A3-.4:} hours of our leisure time in front of screens each day gc 5.355;! _ I
  4. 4. A Responsive World popwacevwn accessthe lnternetfrorn mobile devices
  5. 5. Enter Responsive Design Responsive Design is designing for multiple screens in a manner that content responds to target environment and reflows to fit into different layouts and treatments as per display size & type.
  6. 6. Factors that Drive the Need for Responsive eLearning
  7. 7. Fluid grids For a design to ‘respond’, the site should be built on a fluid or flexible grid foundation within which on-screen elements adjust to the display area. Flexible images Images form an integral part of a site and for a design to be responsive these images should be flexible - that is, they should scale proportionately depending on the size of their display container. Media queries Media queries provide a way of detecting the device dimensions and other physical properties that then directs the fluid grids and flexible images to align appropriately to fit the device screen. ‘O04-ZON . . Lla--use
  8. 8. Multi-device Seamless No redundant ready learning flow clicks Continuity across Ease of reporting devices time-effective & tracking
  9. 9. Click and Reveal Interactivity | l 7731: L uijsiqs
  10. 10. What does Responsive Design Look Like’?
  11. 11. Designing, developing & testing responsive eLearning requires intricate planning and execution.
  12. 12. V l Tl“ ii -' i’. '?§! F'F| Layouts based on The right font breakpoints Create doodles Think device classes
  13. 13. Development Considerations 0 Browser challenges 0 Animation capability O The tale of user agents 0 Audio synching 0 Media issues
  14. 14. Text readability Content alignment Target areas for touch interactions Navigation controls User instructions Content meaning & inter-relationships
  15. 15. t z A u u i as Start preparing well in advance ~‘ ‘ I" Involve multiple teams ’ 2! Identify target devices R g‘ ‘- Understand content & context 4‘, Consider delivery & compliance 1. Do lots of testing
  16. 16. u. .-. ... -. l l the entire rJ« 1 *l7
  17. 17. Upside Learning Solutions Pvt. Ltd. info@upsideIearning. com l www. upsidelearning. com

×