Responsive UI Design: How to Design for Every Screen Size

Responsive UI design makes one interface adapt to every screen size and input method. Start mobile-first to force content priority, use a fluid grid, set breakpoints where the content needs to change rather than for specific devices, and design components that reflow, stack or collapse gracefully. Scale typography and spacing sensibly, size touch targets for fingers, and plan how complex elements like tables, navigation and media behave on small screens. Then test at real sizes, not just three artboards.

This guide covers the design side: layout systems, component behavior and content priority. For a practical build-and-test checklist, see how to make a website mobile-friendly.

Designing the smallest screen first forces the key question: what matters most? Once the essential content and actions work on a phone, larger screens can add space, secondary content and richer layouts. Starting from desktop tends to produce cramped, compromised mobile layouts.

Use a column grid with proportional widths and consistent gutters so layouts stretch smoothly. Define maximum content widths so text lines stay readable on large screens. Let layouts reflow, from multiple columns to one, rather than shrinking everything.

Set breakpoints where the design starts to break, such as lines becoming too long, cards too narrow or navigation too crowded, rather than targeting specific devices, which change constantly. Check the widths between your design artboards, where many bugs hide.

Scale headings down on small screens while keeping body text comfortably readable. Spacing should also scale: generous whitespace on desktop may need tightening on mobile, but not to the point of crowding. Define these as tokens in your design system.

On touch screens, targets need to be larger and further apart than on desktop. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels (with exceptions); Apple and Google recommend larger targets for apps. Don't hide essential information behind hover, which touch devices don't have.

Decide what appears first on each screen size. On mobile, key information and the primary action should appear early; supporting content can move lower or into expandable sections. Hiding important content entirely on mobile usually backfires, since users on phones need it too, and Google's mobile-first indexing evaluates the mobile version.

Responsive UI design is prioritization plus flexible systems: decide what matters on the smallest screen, build fluid layouts and adaptable components, and test across real sizes. It's also an accessibility practice; see accessibility in UI/UX design.