Short definition

Responsive web design — a design and development approach that lets one website adapt to viewport size, device capabilities, and input method.

Also known as: responsive design.

Responsive web design keeps one website usable on everything from a narrow phone to a wide desktop screen. Elements rearrange, lines of text remain readable, and images and video fit without horizontal scrolling.

How does responsive web design work?

Flexible grids, relative units, media queries, and responsive images form the technical basis. The content determines when a layout no longer works, so breakpoints should not be based only on popular device widths. Touch, keyboard, zoom, and orientation also play a role.

What does this mean for a small business?

A customer may research on mobile and take action later on desktop, or vice versa. The same information and actions should therefore remain available on every screen. Do not hide important contact or pricing information just because space is limited; change how it is presented.

What should you watch for in responsive web design?

  • start with a simple, readable single column;
  • test content at intermediate widths, not just common device widths;
  • make tap and click targets spacious and forms easy to complete;
  • deliver images at suitable dimensions and with suitable crops;

How it relates to other website choices

Mobile-first is a practical starting point for responsive design. Good UX and accessibility determine whether the adapted layout is actually usable.