Okuzeka
Web Development vocabulary · CSS and Layout

Responsive design

Meaning in web development, with examples

nounCore term

In web development, responsive design means: An approach to building pages so that the same layout adapts to any screen size, from phones and tablets to large monitors.

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

How it is used

Built with flexible layouts, relative units, flexible images and media queries. People say a site 'is responsive' or 'isn't responsive', and 'mobile-first' means designing for small screens first.

Example sentences

  1. The client wants a responsive design that works well on phones too.

  2. With responsive design, we don't need a separate mobile site anymore.

Common collocations

  • responsive layout
  • fully responsive
  • mobile-first design
  • responsive images
  • media queryA CSS rule that applies styles only when a condition is true, such as a minimum screen width, dark mode or printing.
  • breakpointA screen width at which a responsive layout changes, for example from one column on phones to three columns on desktops.
  • viewportThe visible area of a web page inside the browser window or phone screen, which changes size when the window is resized or the phone is rotated.
  • layoutThe way elements are arranged on a page: where columns, menus, images and text sit and how they move when the screen size changes.

This word in other fields

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

More terms: CSS 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: