scaffoldlms webinar 1-responsive design and theme
DESCRIPTION
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.TRANSCRIPT
![Page 1: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/1.jpg)
RESPONSIVEDESIGN
2014 Webinar Series
James Ballard
Victoria Simpson
![Page 2: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/2.jpg)
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
![Page 3: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/3.jpg)
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
![Page 4: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/4.jpg)
INTRODUCTION POLL
Activity 1
![Page 5: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/5.jpg)
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
![Page 6: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/6.jpg)
WHAT IS RESPONSIVE DESIGN?
Section 1
![Page 7: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/7.jpg)
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
![Page 8: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/8.jpg)
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
![Page 9: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/9.jpg)
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
![Page 10: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/10.jpg)
Responsive DesignWhat does it look like
![Page 11: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/11.jpg)
IMPLICATIONS FOR E-LEARNING
Section 2
![Page 12: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/12.jpg)
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
![Page 13: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/13.jpg)
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
![Page 14: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/14.jpg)
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
![Page 15: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/15.jpg)
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
![Page 16: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/16.jpg)
SCAFFOLDLMS DEMO
Section 3
• Responsive grid
• Navigation bar
• Incorporating custom elements
• New HTML editor
• Course editing
• Self-service theme
![Page 17: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/17.jpg)
Q&A DISCUSSIONActivity 2
![Page 18: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/18.jpg)
CLOSING POLLActivity 3
![Page 19: ScaffoldLMS Webinar 1-Responsive Design and Theme](https://reader038.vdocument.in/reader038/viewer/2022110301/53f28acc8d7f72104c8b4f57/html5/thumbnails/19.jpg)
THANK YOUScaffoldLMS Webinar Series 2014
More information:
http://www.ninelanterns.com.au/
@scaffoldlms
https://www.linkedin.com/company/scaffoldlms