Responsive Layout Engineering

Overview

Design layouts around content behavior and task priority, not around a few screenshots. Prefer fluid systems, resilient component behavior, and intentional breakpoint decisions over device-specific patchwork.

Follow This Workflow

1. Identify layout-critical flows

• Find the screens where task completion breaks first on narrow or wide viewports.
• Identify dense tables, toolbars, forms, cards, media, and navigation patterns that need adaptive behavior.
• Define the primary reading order and interaction order before changing CSS.

2. Define layout strategy