Responsive design and accessibility checks

A responsive page adapts to its content and viewport without hiding essential information.

What you will learn

Use a mobile-first media query
Check keyboard focus and text scaling
Avoid motion that ignores user preference

Start with the narrow layout

A mobile-first stylesheet describes a usable narrow screen as the default, then adds complexity when more space is available. This encourages a single-column flow that remains readable on small devices. A viewport meta element tells mobile browsers how to map the page width to the device width.

Use breakpoints for content

A media query applies styles when a condition, such as a minimum width, is true. Choose a breakpoint where the content needs more room rather than targeting a particular phone model. Test just below and just above the breakpoint so an awkward intermediate layout does not go unnoticed.

Keep interaction reachable

Use a keyboard to move through links and controls. Focus indicators should remain visible, and source order should match the order people read. Zoom the page and check that text does not overlap or disappear. Large enough targets and clear labels help touch and keyboard users alike.

Honor reduced motion

Animations can distract or cause discomfort for some people. If movement is not essential, avoid it; when motion is used, provide a reduced-motion alternative. Responsive and accessible design is not a separate visual layer: it is a way to keep the same content usable in different conditions.

Inspect more than viewport width

Responsive behavior also depends on zoom, text size, orientation, and input method. Try a narrow window with a keyboard, then zoom in without changing the content. Verify that users can still reach every action and that sticky or fixed elements do not cover the focused control.

.profile-card {
  width: min(100% - 2rem, 42rem);
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .profile-card {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; }
}

Practice exercise

Make a card use one column on narrow screens and two columns when its content has enough room.

Show a hint

Put the multi-column rule inside a min-width media query.

Show one possible solution

Keep the card in normal flow by default, then set display: grid and two columns in a min-width media query.

Quick check

What should determine a responsive breakpoint? When the content needs a different layout The name of a popular phone model

Frequently asked questions

Do I need a separate mobile website?

<p>Usually not for a simple site. A fluid layout and content-driven CSS media queries can adapt one document to different viewport widths.</p>