Responsive, or Mobile, design is a hot topic in the world of eLearning right now, learners are using more devices than ever before. In this ScaffoldLMS webinar, James Ballard presents and overview of responsive design, what it is and how it works, but most importantly why it matters. He also presents a demonstration of how the new theming tool and and how responsive design will work within ScaffoldLMS.

1. RESPONSIVE
DESIGN
2014 Webinar Series
James Ballard
Victoria Simpson

2. 0-5 mins
• Welcome and Orientation
5-10 mins
• Session Introduction
10-40 mins
• Presentation
• Screen share
40-55 mins
• Questions
• Discussion
55-60 mins
• Conclusion
Session Outline
What you can expect

3. 15th Jul - Responsive Design
29th Jul - Open Badges
12th Aug - ScaffoldLMS Administration
9th Sep – LTI / TinCan (xAPI)
7th Oct – e-Portfolios
11th Nov - Assessment
Introduction
ScaffoldLMS Webinar Series 2014

4. INTRODUCTION POLL
Activity 1

5. 1. Understand Responsive Design
What is it and why is it relevant?
2. Responsive Design in e-Learning
Approaches for e-learning developers
Ideas for good practice
3. Responsive Design in ScaffoldLMS
Updating our approach
A new self-service theme
Objectives
What we hope you will get out of the session

6. WHAT IS RESPONSIVE
DESIGN?
Section 1

7. 0
10
20
30
40
50
60
70
80
90
Jun-08 Jun-09 Jun-10 Jun-11 Jun-12 Jun-13
Percentage of Adults (over 18)
Home Internet Home Broadband Mobile Internet
Solution to device explosion since 2007
Changing nature of consumer technology
Australia’s mobile digital
economy
ACMA Communications report 2012–13
62 per cent of Australians going online
used three or more devices to access
the internet in the six months to May
2013—most commonly a smartphone,
portable computer and a desktop
computer.
http://www.acma.gov.au/theACMA/Library/Corporate-
library/Corporate-publications/communications-report-
2012-13

8. Mobile First Design
Understanding the device explosion
Responsive Design Principle
The point of creating responsive sites is
to create functional (and hopefully
optimal) user experiences for a growing
number of web-enabled devices and
contexts.
~ Brad Frost

9. WE WERE KIDDING
OURSELVES THIS
WHOLE TIME.
THERE WAS ONLY
EVER ONE DEVICE
TYPE: WEB.
BBC News Reflection
http://www.creativebloq.com/web-design/responsive-web-design-tips-
bbc-news-9134667

10. Responsive Design
What does it look like

11. IMPLICATIONS FOR
E-LEARNING
Section 2

12. Flexible Delivery
• Learn on the go
• Bring your own device
• Location sensitive learning
• Placement based learning
• Augmented reality
• On demand access
• Shop-floor access
• Social/connected learning
Demands
Why do we need learning on mobile devices

13. Content Development
What will change for content developers
Good news
Current scenario is to optimise existing
tools for responsive design:
• A single source solution which is
cheaper to create and manage
• Track e-Learning completions or
results across device types
• Seamless learning experience from
one device to another through
bookmarking

14. Design in
browser
• Avoid print based design tools
• Understand user interactions
Mobile first
• Mobile is a user state, not a device
• Constraints lead to simplicity
• Value content and navigation above visual
and technical flair
Fluid Content
• Use a grid system
• Fixed width on larger devices and fluid
width for smaller
Natural user
interfaces
• Pinch, swipe, tap, hold replace point,
hover, click on smaller devices
• Avoid graphical user interfaces
Design Guidelines
General good practice principles for responsive design

15. Design Process
Add responsive design into your existing process
Design layouts based on breakpoints –
small, medium, large
Select the right fonts – check how they
scale and avoid fixed sizes
Develop responsive images – resizing
bitmaps, utilising scalar, icon based fonts
Design interactive elements – make sure
touch icons are finger sized

16. SCAFFOLDLMS DEMO
Section 3
• Responsive grid
• Navigation bar
• Incorporating custom elements
• New HTML editor
• Course editing
• Self-service theme

17. Q&A DISCUSSION
Activity 2

18. CLOSING POLL
Activity 3

19. THANK YOU
ScaffoldLMS Webinar Series 2014
More information:
http://www.ninelanterns.com.au/
@scaffoldlms
https://www.linkedin.com/company/scaffoldlms