Image-heavy banners
Text may be locked inside images, harder to resize, harder to translate, and harder for assistive technology.
The Current Challenge
Designed pages can still be hard to use
Many course pages rely on custom visual decisions, text embedded in images, and page-by-page formatting. That can look designed in one context but become fragile across devices, zoom levels, accessibility needs, and future course updates.
Real HTML + CSS
Course titles, headings, labels, and instructions stay readable, responsive, searchable, and maintainable.
Research Backing
The direction is supported by accessibility and UX standards
Use real text instead of images of text
WCAG Images of Text guidance supports using CSS-styled text instead of bitmap text when technology can achieve the presentation.
SourceImage text is not responsive
web.dev recommends placing text in markup rather than embedding it in images because image text is not screen-reader friendly or responsive.
SourcePages should adapt without two-way scrolling
Responsive grids, stacked layouts, and real text help learners use content at mobile sizes and browser zoom.
SourceReduce visual noise
Aesthetic and minimalist design focuses attention on what users need, rather than adding unnecessary decorative complexity.
SourceNeed the shareable research version?
Open the research foundation brief for a source-backed handout that others can use without presenting the full deck.
The Design Move
From one-off pages to a course design system
1
Centralize
→
CSS, JavaScript, snippets, and assets hosted once.
2
Standardize
→
Components use shared names, styles, and behavior.
3
Author Faster
→
Reusable snippets and generator patterns reduce formatting work.
4
Improve Globally
Future fixes can ship through the central assets.
31
Snippet Components
1
Central CSS
1
Central JS
∞
Reusable Pages
What We Built
Reusable components learners can recognize
Knowledge Check
What is the preferred way to render a course banner title?
Semantic markup and ARIA patterns create a stronger foundation for keyboard and assistive technology use.
Cards, grids, tables, and media blocks adapt across screen sizes instead of depending on fixed image layouts.
Shared snippets allow authors to reuse proven patterns rather than rebuilding page sections manually.
Learn
Reusable
Component Library
Live reference examples show what each pattern looks like and how it should be used.
Centralized
Open
Demo
Templates
Template Hub
Use the main prototype page to navigate through components, page templates, generator, and course examples.
Presentation Path
Open
Lesson
Live Page
Lesson Example
Show the learner-facing course flow in context, starting with the Week 1 overview and objectives page.
Course View
Open
Authoring Workflow
The system also changes how we create pages
The generator prototype shows the long-term authoring direction: structured fields in, centralized HTML out. That reduces formatting guesswork and keeps course production aligned to the design system.
- Authors enter course title, description, objectives, and resources.
- The tool outputs semantic HTML with centralized classes.
- Shared CSS and JavaScript handle the look and behavior.
Generator Prototype
Structured content becomes reusable page sections.
Centralized styles keep visual quality consistent.
Copy-ready output supports D2L authoring without manual reconstruction.
Open GeneratorRecommendation
What we can say with confidence
Validated Direction
The redesign is aligned with WCAG guidance, responsive design, usability heuristics, and design-system practice.
Safer Claim
This creates a stronger accessibility foundation. It should not be called fully WCAG-compliant until formally audited.
Next Step
Use this presentation to explain the rationale, then show the live course examples and component library in D2L context.
Share The Research Foundation
Use this brief as the companion link for stakeholders who want the rationale, source list, and careful claims in one place.