Responsive Breakpoints Explained: When a Website Layout Changes

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Start with the content

   0:18

   Look for the width where the current arrangement becomes awkward.

   On-screen labels: Content fit; Readable text; Usable controls.

2. 2

   Step 2: A media query sets a condition

   0:30

   CSS can apply different rules when the condition matches.

   On-screen labels: Available width; Matching condition; Different layout rule.

3. 3

   Step 3: Change what needs changing

   0:42

   Columns, spacing or navigation may need a new arrangement.

   On-screen labels: Flexible columns; Suitable spacing; Usable navigation.

4. 4

   Step 4: Avoid one-device assumptions

   0:54

   Visitors use many window sizes and display settings.

   On-screen labels: Different phones; Resized windows; Browser zoom.

5. 5

   Step 5: Test around each change

   1:06

   Review widths just above and below the breakpoint.

   On-screen labels: Before the change; At the change; After the change.

6. 6

   Step 6: Check real content lengths

   1:18

   Long names and headings can reveal problems a short mock-up hides.

   On-screen labels: Longer headings; Real labels; Working customer journey.

Common questions

Go further