Lesson Design

Responsive Themes

Viewer themes have support for mobile devices, but lessons must be designed specifically with this in mind due to some limitations. Make sure you are aware of these before choosing a responsive theme.


How content is ordered and laid out across devices

Content Ordering

When laying out a lesson, content is automatically assigned an order based on its x/y position on the stage. Elements are ordered from left to right and top to bottom, so content closer to the top left will be ordered first. This comes into play for mobile devices where everything is collapsed to a single full-width column, where the order in the stack is determined by its original x/y position.

The image illustrates how content is ordered and collapsed into a single column for mobile. Note that with columns, content on the left will be ordered first, followed by the question above the MCQ, with the MCQ itself being ordered last.

Typography

It’s good practice to use semantic typography in lessons regardless, but it’s even more important for responsive lesson design. When adding text elements, make sure to select an appropriate option from the text type dropdown (e.g. Title, Heading, Body). This will render h1, h2, and p tags, allowing the stylesheet to target specific text elements such and change their font size so that they are appropriately sized and readable on mobile devices.

Layering

Anything that is layered such as an icon placed over another image, or a popup positioned in a specific location over text or other elements should be avoided for responsive lessons. Because of how responsiveness and content ordering is handled, for mobile devices layered content will become stacked vertically.

Components

Embedded components such as sims and widgets are supported, but some will work better than others. This relies on the component itself being responsive, which is usually the case for simple widgets like buttons, timers and progress bars. Existing sims that were specifically designed for desktop/tablet will have issues on mobile, but any new simulations should be designed with responsiveness in mind.

Viewer Elements

By default, the viewer UI adapts responsively. On mobile some elements become hidden such as labels for apps, username, history, feedback; and the back/next arrows. This is to conserve horizontal space and allow for adequate spacing between tappable elements. Keep this behavior in mind when designing custom viewer themes.