Responsive E-Learning Design (RED): E-learning that works everywhere
-
Upload
city-and-guilds-kineo -
Category
Technology
-
view
103 -
download
0
description
Transcript of Responsive E-Learning Design (RED): E-learning that works everywhere
![Page 1: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/15.jpg)
HTML 5
![Page 16: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/16.jpg)
HTML5 Interactivity
![Page 17: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/28.jpg)
![Page 29: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/34.jpg)
![Page 35: Responsive E-Learning Design (RED): E-learning that works everywhere](https://reader035.fdocuments.us/reader035/viewer/2022062617/54c83aa34a795952498b4581/html5/thumbnails/35.jpg)