responsive e-learning design (red): e-learning that works everywhere
DESCRIPTION
We live in a multi-device world. The growth of internet enabled devices such as smartphones, tablets and laptops means that increasingly we have to deliver learning solutions that work on all devices. This is not as simple as a desktop solution and a mobile solution, what is required is a multi-device solution. Luckily developments in HTML5 mean we can now develop a single e-learning module which will work on all devices. The solution is responsive e-learning. This presentation was produced for the E-learning in a Multi-Device World webinar by Kineo and the LSG webinar, which took place on Thursday 20th September, 2012. Contact Kineo for a further demo of RED and to find out how it can help your business.TRANSCRIPT
![Page 1: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/1.jpg)
E-Learning in a multi-device world
Steve Rayson
![Page 2: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/2.jpg)
How many devices do you use in a typical day?
(Desktop/laptop, smartphones, tablets)
1) One2) Two3) Three4) More than 3
![Page 3: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/3.jpg)
We live in a multi-device world
![Page 4: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/4.jpg)
• We live in a multi-device world
Google Survey - http://services.google.com/fh/files/misc/multiscreenworld_final.pdf
![Page 5: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/5.jpg)
• We live in a multi-device world
![Page 6: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/6.jpg)
• We live in a multi-device world
![Page 7: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/7.jpg)
Reality is not desktop v mobile but multi-device delivery
MLearning Solutions – Vendor Hype
![Page 8: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/8.jpg)
Web moving from mobile design to responsive multi-device
design
Mobile web designResponsive web design
Volume of Google searches
http://en.wikipedia.org/wiki/Responsive_Web_Design
![Page 9: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/9.jpg)
From multiple versions to a single responsive version
http://www.google.com/culturalinstitute/
![Page 11: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/11.jpg)
From multiple versions to a single responsive version
www.bostonglobe.com
![Page 12: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/12.jpg)
New Scrolling Navigation
Driven by scrolling on phones and tabletsMore elegantMore exploratoryNo navigationBecoming a web norm
![Page 13: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/13.jpg)
Scrolling Designs
http://www.dangersoffracking.com/ http://titanic.q-music.be/
![Page 14: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/14.jpg)
Scrolling AdvocatesAmazon. Each product has a single page. The Kindle, the product page was 17,244 pixels long. Amazon clearly does not have a problem with using long pages to sell its best selling product.
Amaze redesigned Volvo site using long single section pages. Whilst not all people scroll all the way down, 46% of users see the majority of the content. In the past, the typical user only saw 18% of the content of the relevant car chapter.
![Page 15: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/15.jpg)
HTML 5
![Page 16: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/16.jpg)
HTML5 Interactivity
![Page 17: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/17.jpg)
Implications for E-Learning
![Page 18: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/18.jpg)
Do you need to deliver e-learning that only
works on one device?
![Page 19: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/19.jpg)
Do you need to deliver e-learning that only
works on one device or on
multiple devices?
![Page 20: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/20.jpg)
Old World Delivering to
Multiple Devices
Publish to or produce:- native iPhone app- native Blackberry app- native Android app- Flash version- HTML version for iPads
Even single source publishing still means different versions to update and track. Can be further complicated with languages.
![Page 21: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/21.jpg)
New world is responsive e-learning design“One version that works on all devices”
Why publish multiple versions?Why develop a version that works only on one
device?
![Page 22: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/22.jpg)
One version that respondsnot multiple versions
Fluid design, not fixed screen sizesIs it a dream? Let’s see a demo
![Page 23: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/23.jpg)
Kineo’s Adapt FrameworkIntelligent Responsiveness
![Page 24: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/24.jpg)
Intelligent Responsiveness• Simplifies content for smartphone• Extra content for phone only• Changes interaction for smaller screens• Reduces image size or removes for Smartphone
![Page 25: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/25.jpg)
Kineo’s Adapt Framework
![Page 26: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/26.jpg)
Rethinking E-Learning Design
Shorter but deeper learner journeysMaking navigation a meaningful part of the journeySearchable and reusable content objectsBuilding content in small blocksRethinking the journey on different devices – different content and content types
![Page 27: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/27.jpg)
Benefits of Responsive E-Learning
One version works on all devicesOne version to track and maintainDistribute from a single LMSAccessible contentSearchable contentMore cost effectiveAllows sequential screening
![Page 28: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/28.jpg)
![Page 29: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/29.jpg)
Common Questions
Offline version – yesIE6 – needs fallback html versionAccess to phone functions – more limitedRole of native apps – performance support, less tracking, updating
![Page 30: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/30.jpg)
The Future?
Old World
• Mobile authoring & Flash authoring
• Multiple versions
New World
• Responsive authoring
• Single version
![Page 32: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/32.jpg)
Links
http://services.google.com/fh/files/misc/multiscreenworld_final.pdf http://www.amazon.com/Kindle-Paperwhite-Resolution-Display-Built-/dp/B007OZNZG0/ref=sr_tr_sr_1?ie=UTF8&qid=1347890370&sr=8-1&keywords=kindle
www.bostonglobe.com http://www.google.com/culturalinstitute/
www.shell.com www.beetle.com
http://www.dangersoffracking.com/http://titanic.q-music.be/
![Page 33: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/33.jpg)
HTML5 – Apps Debate http://mashable.com/2012/09/12/web-vs-native-apps/
http://www.businessinsider.com/html5-vs-apps-why-the-debate-matters-and-who-will-win-2012-8#ixzz24yUXunf2
http://learningandskillsgroup.ning.com/events/e-learning-in-a-multi-device-world
![Page 34: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/34.jpg)
![Page 35: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.vdocument.in/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/35.jpg)