A beautiful, accessible, instructionally sound online course template

Presentation at D2L Fusion conference, Monday, June 22, 2015

Transcript

1. A beautiful, accessible, instructionally sound online course template John Muir | Valerie Rake | The Ohio State University
2. John Muir: muir.25@osu.edu (distance education) Valerie Rake: rake.9@osu.edu (e-learning support) All images in the presentation are included under CC0 license (deathtothestockphoto.com, unsplash.com, gratisography.com)
3. Sponsored by Feedback You can find a feedback form for this session on the Fusion mobile app.
4. Context A readymade D2L shell for online courses • Course skeleton • Template web pages Used in • 5 (soon 10) distance-education programs at Ohio State • 24 online general-education courses • ??? other courses
5. Goals 1. Talk through the why, the what, and the how of our online course template. 2. Share some resources so you can do all this and more 3. Go through our obstacles, lessons learned, and advice, and listen to your thoughts, experience, and advice
6. Why
7. Why: More distance education • Central Office of Distance Education and eLearning in 2012 • New online programs, courses, and instructors
8. Why: Quality Matters • Office of Distance Education and eLearning wanted to use QM as a baseline
9. Why: Web accessibility • Proactive Web Accessibility Center at Ohio State • Instructional designers with passion about accessibility and universal design for learning • Understanding that consistent, simple, clean web experience is usually better than stacks of different uploaded documents
10. What
11. What: Course skeleton • Quick overview of the course • Syllabus module • Weekly modules • Visual header for each week • Overview page for each week • Modeling of consistent action- centered labeling • Week 1: tech checklist, syllabus quiz • Instructor resources
12. What: HTML templates We include: - Syllabus section - Weekly/module overview - Assignment instructions - Content (blank) - Content (chock full of examples and placeholders)
13. Started with the D2L accessible HTML templates https://documentation.desire2learn.com/en/accessible-html- templates
17. What: Visual touches • Visual homepage with custom widgets (intro video, basic orientation) • Header images for modules • Icons, stock photos, and other default visual items in the templates • Big, bold text • Contemporary web layout akin to medium.com or higher- end news and magazine websites
18. How (we/faculty use it)
19. Different products and messages for different levels of users 1. Faculty with instructional designer support 2. Faculty with minimal support
20. How: Sharing with faculty
21. Copying the course/templates • We have the whole course package available as a zip file on our website. http://odee.osu.edu/distance-education- faculty-resources • We set up instructors with forum course spaces (ID and faculty both listed as instructor), and ID imports course from master shell • We work with instructional designers and local educational- technology staff in different departments and colleges to enable them to do the same
22. Getting faculty set up • ID sets the custom homepage and enable HTML templates • ID goes over the basics: • choosing a template, using the TinyMCE editor (and best practices for copying in content) • replacing photos, customizing the homepage • We've decided to embrace the fact that it's not easy to automate. Template setup is part of ID team's consultation process (we set up, meet for 1 hour, check back in later)
23. How: Ease (or not) of using
24. Faculty with instructional designer support Master forum course with IDs as instructors • a web-based job aid • built-in (standard) HTML styles (blockquote, etc.) to use • workflow for "HTML-first" workflow, training for IDs • image classes for standardizing size/layout
25. Faculty without direct support Simplified version of the course shell • templates with very obvious customization points • placeholders (e.g., images) that don't have to be replaced • fairly basic (constrained) default options (i.e., no floating divs, wrapping text around images, etc. They're there, but in the background.)
26. Power users (me and some of my ID team) • customization of templates and the the CSS file • additional Javascript libraries to call on • accordions, including nongraded multiple choice • image slideshows • Google charts
27. Our toolkit
28. Tools: templates • Get the templates: D2L accessible HTML templates: documentation.desire2learn.com/en/accessible-html- templates • Customize the CSS: Download a text editor (I use Brackets, free from Adobe)--this is easy! • Pick design elements and fonts: To be fancy, use web fonts from google.com/fonts (we use OSU's web fonts) • Create the templates your faculty need
29. Tools: ID/faculty creation • Create/customize web content: Markdown editor for advanced users, or some basics on using D2L TinyMCE. For power users, use Pandoc.org converter. • Gather images and other visual elements: Images (especially CC0): • Stock photos that don't suck • thestocks.im • Wikimedia Commons
30. Tools: ID/faculty creation (power users) • Convert and clean up content: Use Pandoc.org to go between PDF/Word/etc. to HTML/epub/etc. • Include cool javascript capabilities: See https:// dequeuniversity.com/library/
31. Our lessons learned (so far)
32. Lesson: Faculty need a lot of guidance, support, scaffolding
33. Making it easier • More just-in-time resources (links!) • For prefab/readymade content, make it as obvious as possible it's a placeholder, or make it generic enough that it's OK if it doesn't get customized! • Simpler, fewer features on the surface; cool, powerful things for the power users that can/want to find them • Basics: Push faculty to TinyMCE styles, basics of web accessibility
34. Supporting "unsupported" faculty • Went from internal DE team resource to something anyone could download (requests going to learning-systems group and ID team) • Need/needed better communication with learning-systems support group • Ongoing effort to share openly, humbly, constructively with other ed-tech staff on campus • Offer of one-hour consultations with an instructional
37. Lesson: Everyone wants to be a special flower
38. Getting buy-in • "This is what your online course must look like" is not an effective approach. ;) • Schedule a program- or department-level session to create a custom master template (look, feel, special sections in templates) • Approach individual faculty with openness to what they want: this is just a (very nice) default
39. Lesson: It's never exactly "finished" or "automated"
40. Constraints with our setup • Enrollment in D2l only at course level • not departments, programs, etc. • not feasible to share template "down" the hierarchy • Very much faculty-owned courses • Giant university with 5 campuses • Staff far outnumbered by instructors
41. Some minor D2L constraints • When copying/importing course components, need to • set homepage from list of options • enable HTML templates in Content settings • TinyMCE is great for our basic users but is missing a few things • basic styles (e.g., blockquote) • untrustworthy copy and paste
42. Ongoing improvements Some examples from our first year: • Old-school embed codes aren't good for keyboard navigation [used iframe instead] • HTTP and HTTPS aren't friends in page headers [cut them out! just start addresses with \\www.osu.edu... ] • What looks good on screen looks ridiculous on a phone or printed out [added seperate @print and mobile sections of CSS file]
43. Ongoing improvements For the future, we need to continue collaboration between - Instructional design team - eLearning support - configuration and infrastructure - Web Accessibility Center - marketing/communications - university code repository? - other instuctional/technology support units
44. Expertise and experience from colleagues in the room