RESPONSIVEDESIGN

2014 Webinar Series

James Ballard

Victoria Simpson

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 OutlineWhat you can expect

15th

Jul - Responsive Design

29th

Jul - Open Badges

12th

Aug - ScaffoldLMS Administration

9th

Sep – LTI / TinCan (xAPI)

7th

Oct – e-Portfolios

11th

Nov - Assessment

IntroductionScaffoldLMS Webinar Series 2014

INTRODUCTION POLL

Activity 1

1. Understand Responsive Design

What is it and why is it relevant?

2. Responsive Design in e-Learning

Approaches for e-learning developersIdeas for good practice

3. Responsive Design in ScaffoldLMS

Updating our approachA new self-service theme

ObjectivesWhat we hope you will get out of the session

WHAT IS RESPONSIVE DESIGN?

Section 1

Jun-08 Jun-09 Jun-10 Jun-11 Jun-12 Jun-130102030405060708090

Percentage of Adults (over 18)

Home Internet Home BroadbandMobile Internet

Solution to device explosion since 2007Changing 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

Mobile First DesignUnderstanding the device explosion

Responsive Design PrincipleThe 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

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

Responsive DesignWhat does it look like

IMPLICATIONS FOR E-LEARNING

Section 2

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

DemandsWhy do we need learning on mobile devices

Content DevelopmentWhat will change for content developers

Good newsCurrent 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

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 GuidelinesGeneral good practice principles for responsive design

Design ProcessAdd 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

Design interactive elements – make sure touch icons are finger sized

SCAFFOLDLMS DEMO

Section 3

• Responsive grid

• Navigation bar

• Incorporating custom elements

• New HTML editor

• Course editing

• Self-service theme

Q&A DISCUSSIONActivity 2

CLOSING POLLActivity 3

THANK YOUScaffoldLMS Webinar Series 2014

More information:

http://www.ninelanterns.com.au/

@scaffoldlms

https://www.linkedin.com/company/scaffoldlms