You might have seen photos of early television news broadcasts in which the anchors had an ashtray on the table with a lit cigarette on it. Newscast producers had years of experience in radio, so at first, they applied the same production techniques to television. With more experience, they recognized that the visual aspect of television offered a huge range of new ways to communicate, and TV news desks evolved into their modern incarnation as a television set (with the ashtrays out of site).
We’ve seen a similar evolution in web design. The original approach to designing websites for a specific screen dimension has given way to responsive web design, which enables computers and devices to optimize their display based on screen size. Responsive design, in turn, has introduced a range of new visual and experience design options.
The e-learning industry, though, still makes largely the same type of experiences we’ve made for the past two decades: courses with fixed page dimensions and designs that based on PowerPoint, which we can call “slides-based e-learning design.” For a lot of use cases, this approach is still valid — but instructional designers may be missing new opportunities when they aren’t thinking about implementing a responsive design approach. Comparing the two approaches and understanding their strengths and weaknesses will help you decide which to use. What isn’t different: Both types of content can fully support SCORM, AICC and experience API (xAPI).
Slides-based content has a fixed page height and width and, like video, displays larger or smaller based on screen size. Responsive content doesn’t have a specific size; in fact, it can change its design for different viewing widths. With responsive design, content can show up horizontally on wide screens and vertically on smaller screens, such as a smartphone.
If you know your learners will only be taking a course on their computer or on a large tablet, the fixed dimensions of slides-based content are fine. But if smaller devices are part of the learner’s arsenal, then responsive design has some strong advantages when it comes to creating a more flexible user experience.
Responsive design’s longer page experience can also be helpful for learners. Traditional content often has multiple slides in a row with the same header. They present content on the same topic, but the designer needed multiple pages because of the amount of content. With responsive design’s scrolling capability, you can put all of that content can be on the same page, making for a more cohesive presentation and eliminating the need for the learner to use the “next” button and wait for each page to load.
On the other hand, scrolling can reduce the control designers have over what the learner is viewing at a given time, since learners can scroll up and down on a page. Therefore, for some types of narrated content, you should either select a slides-based approach or create shorter pages that eliminate the need for scrolling. In that case, however, you’ll probably lose some of responsive design’s advantages in reducing page load waiting, for example.
Another important consideration is the learning context. Do you need a simple course in your learning management system (LMS), or do you need to be able to use the content in informal learning as well to help your learners bridge the transition from learning to application? You can use slides-based content in the second case, but responsive design has an advantage in that it enables users to successfully use whichever screen is handy at their time of need. The content can adapt its layout to provide a better user experience, so learners don’t have to squint at slides on a smartphone.
The greatest challenge many instructional designers face using responsive design is their unfamiliarity with it. A great way to become more familiar with it is to spend some time on “best-of” website design sites to see how far web designers are pushing responsive design to create great content experiences.