Presentation delivered by Dr.Maureen Murphy at World of Learning, Learning Design Live session on 18 October 2017. In this presentation, you will learn how to design rich content that really teaches, how to be realistic on what you can design and build using the tools and time available to you and how to implement robust and accessible content that works now and into the future.

1. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
THE 3xRs OF
RESPONSIVE
LEARNING
Dr Maureen Murphy
Hello
Visit us at stand #B80
Share with us: @aurionlearning

2. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Full Service Learning and
Development Company.
We use a range of creative
techniques to deliver a solution
that fully meets your
learning and development
needs.

3. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Rich content that teaches
Realistic use of resources
Robust design & build

4. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Take a moment
What is responsive design?

5. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Responsive design makes use of flexible layouts, flexible
images and flexible style sheets.
The goal of responsive design is to build web pages that
detect the visitor’s screen size and orientation and
change the layout accordingly.
Non-responsive Responsive

6. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Example – SSSC Step into Leadership Portal
http://www.stepintoleadership.info/

7. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Take a moment
Why use responsive design
for learning content?

8. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
supports
mLearning
m = mobile / multi platform
interoperable & accessible at point of ‘need’
Pure HTML 5 Authoring Tool

9. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
mLearning eLearning
Main Objective Knowledge distribution / Application
of knowledge / Just-in-Time – Ideal
for Performance Support
Knowledge presentation / Retention
/ Just-in-Case – Ideal for deeper
Learning
Approach Flexible / Informal / Structured &
Unstructured
Formal / Structured
Content Type Concise / Micro-lessons / Search-
enabled – balance of push/pull
Comprehensive, typically covering:
Topic concepts, principles, processes,
procedures and facts – mostly push
Typical Content Images / Videos / Animations /
Guides / Social Media
Animated slides / Voiceovers / Videos
/ Scenarios / Case studies
User Access Anywhere, anytime at the point of
need
At the desk or in static environment
Time Spent 3 - 10 minutes 20 minutes - 1 hour

10. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Is a responsive / mLearning
solution needed?
Changes the way you
design the learning

11. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
1. Who are the learners?
2. What ..content do they need?
..devices will they use?
3. Where will they access the content?
4. When will they access the content?
5. Why are they accessing the content?
Whatever…what will keep them engaged?
5 W’s can help…

12. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Rich content that teaches

13. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Example – Cancer Research UK

14. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
1. Know the devices you are designing for
2. Design for the smallest device...mobile first
3. Keep content & navigation simple & quick
• Nuggets of content, micro lessons (5 mins)
• Blocks of content, animations, infographics
• Use simple, direct language (distraction factor)
• Crisp images, bulleted lists
• 6 items in menu
• 3 items in header
4. Design for non linear access - embrace the scroll bar
5. Segment your learning content – core and extended

15. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Example – Queen’s University Belfast

16. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Example – Tourism Ireland

17. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Realistic use of resources
Pure HTML 5 Authoring ToolGeneral

18. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
General

19. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
1. Drop large images that aren’t necessary – screen fillers
2. Select suitable interaction types
• Accordions for further information
• Tabs, Click reveals, modal windows
• Dropdown list
• Avoid drag and drop
• Refine instructions to reflect multi
device access
3. Use Big Buttons with padding around
4. Minimise file sizes to reduce download size: images & video
5. Plan out your content: use colour & graphics to draw the eye
down the page (image save as double size under 1Mb so still good
resolution when resized)

20. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
1. Quick to build mLearning/responsive
content without coding
2. Select an authoring tool that’s right for
you e.g. Storyline, Captivate, Evolve,
Gomo, Elucidat, Adapt framework
3. Different approaches - scalable vs fully
responsive
4. Look for variety in screen layouts /
templates - some so limited - no need to
storyboard
5. Test outside the tool’s preview
functionality
Authoring Tool
www.coursekit.co.uk

21. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
1. Use a CSS framework – we use the Bootstrap framework – code you
can reuse (bootstrap.com)
• inbuilt components eg tabs, accordions, buttons, list items, check
boxes – widely supported
2. Use a hierarchy of CSS on page load
• Bootstrap styles
• Main (custom styles),
• Responsive
3. Substituting graphical icons for textA-based icons
(font awesome) and style using CSS
4. Audio - by default – doesn’t play to minimise data usage
• Include a play button on page or open in modal window (stops
when close the modal window or doesn’t continue as you scroll).
5. Video – host in Vimeo or YouTube (compression, CC)
Pure HTML 5

22. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Robust design & build

23. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
1. Use Inspector Tool browser plugin
• Chrome – Inspector Tool & window resizer
• Firefox – Firebug
• Safari – Inspector tool
2. Use Browserstack
3. Use Adobe xd or Marvelapp.com
4. Prototype and carry out UX Workshops
as needed
5. Ensure works as planned in LMS
(tracking, new page, not a container)

24. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS
Rich content that teaches
Realistic use of resources
Robust design & build
Take a moment
Review, Revisit & Ramp up

25. www.aurionlearning.comE-LEARNING | TRAINING AND SUPPORT | PLATFORMS