Skip to content

Responsive Layout Simulator

Run the Responsive Layout Simulator Fullscreen

Sample iframe reference

1
2
3
4
<iframe
   src="https://dmccreary.github.io/infographics/sims/responsive-layout-sim/main.html"
   width="100%" height="570" scrolling="no">
</iframe>

About This MicroSim

Responsive design ensures that interactive infographics work well on screens of all sizes. This simulator lets you drag a viewport width slider and watch a simulated infographic rearrange itself at two key breakpoints (600px and 900px), transitioning between mobile, tablet, and desktop layouts.

Lesson Plan

Learning Objective

Demonstrate how an infographic layout adapts to different viewport widths by adjusting a simulated viewport slider and observing how breakpoints trigger layout changes between mobile, tablet, and desktop configurations.

Activities

  1. Drag the slider slowly from 1400px down to 320px and observe the two layout transitions.
  2. Enable "Show Breakpoint Lines" to see exactly where the transitions occur.
  3. Discuss: what design decisions change at each breakpoint?

References