HealthStream Brands

Events & Resources

Navigate To:

HCCS Transitions to Responsive Courseware Template Design


By Alison Weidner – Senior QA Manager, HCCS, A HealthStream Company

What’s "responsive courseware design"?

These days, we can’t afford to focus solely on the desktop, because there’s an entire other world out there, summed up by one word--mobile. That one word signifies a potentially huge variety of platforms to support. Indeed a growing number of users are accessing HCCS courseware on mobile devices; for instance, some learners start the course on a PC and then move to complete it on a tablet, while some learners do the opposite. Supporting different devices means supporting different browsers, different resolutions, different aspect ratios, and even different inputs.

To meet this need, HCCS Courseware has embraced responsive courseware design. This is a philosophy of interface creation for e-learning courseware, whereby the designer seeks to unify the user experience across all platforms. This consistency simplifies engineering considerations and ensures that the instructional materials are precisely what is intended regardless of the device used to access them.

What were the challenges?

The challenge in implementing responsive courseware design is that it requires a lot more up-front considerations and preemptive testing before the team can forge ahead. Our designers needed to have clear idea of what an interface should look like across all the different resolutions and screen sizes that they can expect their users to have, as it impacted how to structure the markup and the styles. We needed to support a flexible range of layouts in CSS, a variety of UI components in HTML and even different kinds of functionality in JavaScript; we needed to support all the devices and browsers that were already being supported by the HealthStream Learning Center (HLC).

The development process began by setting up a simple style sheet then expanded by adjusting those styles after issues were reported by QA testing for both mobile and Section 508 accessibility requirements.

In QA, testing introduced its own challenges. Not only did we have to consider the different kinds of ways that users will want to interact with the courseware, but we needed be able to replicate these different environments and test on all of them. In the process, we discovered and addressed issues before they became problems, such as increased loading time for the responsive interface, the different ways different browsers open new tabs, challenges fitting everything on to smaller screens, rotating from portrait to landscape modes, and vice-versa. It even became necessary to refactor content. These and other changes increased the complexity of testing the courseware.

To manage this complexity, our QA team embraced new tools and procedures. Most testing involved hands-on with the actual mobile devices. To fill in the blanks, we used BrowserStack (a cloud-based cross-browser testing tool), which greatly simplified the testing process. The resulting test framework not only simplified the new requirements, but it improved test coverage for traditional non-mobile platforms.

As a result of the collaboration between Development and QA our responsive courseware template was optimized. Going forward, as we continue to release new and updated courses, the testing efforts will consist mainly of light sanity testing; full functionality and regression testing for new features, such as the introduction of new interactive exercises.

What are the benefits?

The lesson of this story, however, is that the responsive courseware template design was worth the effort. Responsive design reduced the complexity that came with developing and maintaining different interfaces for different platforms, and less complexity is always a good thing. On top of that, the need to deal with these issues has caused us to identify issues early in the development process, something that improves the quality on all platforms.

In addition, the value of being able to provide all platforms with a consistent experience means that the best possible educational experience may be delivered to all of our users. Our Course Content Design team can easily envision the impact on learners without having to know anything about what device each one is using.

For these reasons, responsive design has proven to be a win for HCCS Courseware and for our clients. Of course, the story continues, and as our experiences deepen, we’ll keep you posted about pros and cons, lessons learned, and other findings that emerge from this approach.