Okuzeka
UX/UI Design vocabulary · Visual Design and Layout

Responsive design

Meaning in UX/UI design, with examples

nounCore term

In UX/UI design, responsive design means: An approach in which a layout automatically adapts to different screen sizes, from phones to large monitors, so the same product works well on all of them.

In Turkish: duyarlı tasarım, responsive tasarım, uyumlu tasarım

How it is used

Designers show responsive design with versions of each screen at key breakpoints, for example mobile, tablet and desktop. Related ideas: mobile-first design and fluid grids. Developers build it with CSS media queries.

Example sentences

  1. With responsive design, the three columns turn into one on small screens.

  2. The client asked for an app, but a responsive design for the website may be enough.

Common collocations

  • responsive web design
  • fully responsive
  • responsive layout
  • mobile-first responsive design
  • breakpointA screen width at which a responsive layout changes, for example when three columns become one or the navigation turns into a menu icon.
  • gridA set of invisible columns, rows and gaps that designers use to place and align elements consistently across a page or screen.
  • layoutThe arrangement of text, images, buttons and other elements on a page or screen, including their size, position and the space between them.
  • spacingThe amount of space between and inside elements, such as the gap between cards or the padding inside a button, chosen to create rhythm and grouping.

This word in other fields

The same English word can have a different meaning in another field:

More terms: Visual Design and Layout

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: