Skip to main content
Gabriela Castillo-Londono
03Responsive architecture

Responsive UI Lab

Compare one interface across mobile, tablet, desktop, ultrawide, and dual-monitor conditions without treating responsiveness as simple scaling.

Playground index
Guided comparison

Change the available space.

Viewport

Mobile
Use available width
Advanced system controls and saved settings

System controls

Saved settings

Saved in localStorage automatically. Export/import makes it portable.

Preview

Sidebar: off · Inspector: off · Command: off
App Shell
Mobile
Card 1
Breakpoint-aware layout. Density: comfortable.
Card 2
Breakpoint-aware layout. Density: comfortable.
Card 3
Breakpoint-aware layout. Density: comfortable.
Card 4
Breakpoint-aware layout. Density: comfortable.
Card 5
Breakpoint-aware layout. Density: comfortable.
Card 6
Breakpoint-aware layout. Density: comfortable.

Tip: press ⌘K to jump pages + presets instantly. Try “ultrawide” or “grid off”.

Import UI Lab settings

Paste a settings file exported from this lab. Nothing is uploaded.

Reset UI Lab settings?

This restores the mobile-first viewport and default system controls on this device.