Build a product interface
Make the layout responsive
Adapt cards, navigation, dialogs, and forms to narrow screens and content growth instead of testing only the polished desktop demo.
8 minute lesson
Component defaults cannot know your data length, language, or page layout. Responsive behavior emerges from the composition around them.
Start with one column, add wider layouts only when space permits, and let content wrap. Test long names, validation messages, zoom, touch targets, and open overlays. A Dialog that fits a sample sentence may overflow when real content or the on-screen keyboard appears.
Keep source order logical before using grid placement or visual ordering. A two-column desktop layout should collapse into the same reading and keyboard sequence a user expects. Do not hide a critical action merely because the narrow layout is difficult; move or simplify it.
Set sensible minimum sizes on grid children and allow long text to break. Tables may need a deliberate scroll container or a different small-screen representation. Fixed headers and footers inside a dialog must leave a scrollable content area, including when the mobile keyboard reduces the visual viewport.
Responsive testing includes interaction states. Open menus near viewport edges, show the longest validation message, focus controls at 200% zoom, and check that focus never lands behind an overlay. Device presets are useful starting points, not a substitute for dragging through the widths between them.
Test Project Board from 320px upward, at 200% zoom, with doubled text and a short viewport. Use keyboard and touch-sized controls while dialogs and errors are open. Fix overflow without truncating information or hiding actions users need.
Lesson completed