Pat Hamm

Web Design

Web Design: LearningExpress, An EBSCO Company

Responsive Callouts

While working on a responsive overhaul of a client's test and course engines, the issue of question stimuli, and how to make them responsive, arose. One example of this was sidebar callouts to specific content within a reading passage. Such a design would not be optimal on small viewports, as the passage content and the callout would compete for horizontal space.

My solution was to render the callouts as footnotes on smaller viewports, as in the example below:

Responsive Callouts Desktop View

Responsive Layout

Responsive Callouts Mobile View