Back to patterns
responsive-art-direction-contract
Responsive Art-Direction Contract
Specify content priority, order, subject crop, navigation, action posture, and relocated content for each viewport class before breakpoint styling.
PatternsRecommended
Intent
Preserve the central visual idea and product usefulness by recomposing narrow and short screens instead of shrinking desktop UI.
Checks
- Declare priority, reading order, focal crop, navigation posture, action posture, and removed or relocated content for each supported viewport class.
- Use a mobile-safe asset or focal position when the desktop crop cannot preserve the subject.
- Inspect a short desktop and short mobile or landscape profile in addition to width breakpoints.
Warnings
- Proportional scaling preserves neither hierarchy nor crop safety when the viewport shape changes materially.
Exceptions
- Fixed-format canvases may scale when zoom and pan are intentional, accessible product interactions.