Adaptive design

Layouts that respond to window size, posture and input.

• Interactive page: https://m3e.ljzapps.app/#foundations/adaptive-design

Design for the window, not the device. Read the window size class and choose navigation and pane count from it.

• Compact: navigation bar, modal drawer, one pane, bottom sheets.
• Medium: navigation rail, one or two panes.
• Expanded: wide rail or permanent drawer, list-detail, supporting pane.
• Large and up: permanent drawer, three panes, docked search, side sheets.

Support touch, mouse and keyboard. Every control needs a visible focus indicator, hover feedback on pointer devices and a keyboard path. Touch targets stay at least 48 dp.