Responsive Web Design in Adobe XD
This domain tests responsive layout thinking - fluid grids, flexible images, media queries, content-driven breakpoints - plus the Adobe XD tooling used to build and prototype those layouts.
Responsive foundations
Responsive design combines fluid grids, flexible images, and media queries. Mobile-first means designing the smallest layout first and adding complexity at larger breakpoints; progressive enhancement follows the same logic. Breakpoints should be chosen where the content breaks, using common anchors around 360–375, 768, 1024, and 1440 px.
Layout and touch
Common layout types: single-column, column, card, grid, and asymmetrical; pick per breakpoint rather than scaling one layout. Touch targets should be at least 48×48 dp with spacing, placed in reachable thumb zones. Adapt navigation: a bottom tab bar on mobile often becomes a side or top nav on desktop. Hover-only interactions fail on touch devices.
Adobe XD tooling
Know artboards, responsive resize, constraints (pin to edges, fix position, define behavior on parent resize), Repeat Grid for lists, components and states, auto-animate, prototype links, shared libraries, and plugins. Constraints govern how a child reacts when its parent resizes; responsive resize governs how the object itself scales - for example, keeping a card’s height fixed while its width grows.
Worked example
A news site starts at 375×812: one column of article cards built with Repeat Grid. At 768, cards become a two-column grid; the left margin is pinned and card widths are fluid, so text reflows instead of stretching. At 1440, a fixed 280 px sidebar appears and the main area becomes three columns. The hero uses auto-animate between breakpoints. Each breakpoint is checked for contrast and 48 dp targets - reasoning: content determines the breakpoint, not the device name.
Traps
Designing desktop first and squeezing it down. Fixed-width elements that overflow small screens. Forgetting intermediate widths. Hover-only states. Text that scales up on mobile until it dominates the viewport. Naming breakpoints after devices instead of content needs.