Design Close-Up: 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:

  • On desktop and tablets (in landscape orientation), callouts appear in their default style...
Callouts in Reading Passages
  • ...but on small tablets, tablets in portrait mode, and phones, the callouts appear as footnotes.
Callouts in Reading Passages