WEBVTT

00:00:00.000 --> 00:00:06.000
When should a website switch from columns to one stack?

00:00:06.000 --> 00:00:13.000
A breakpoint marks a condition where layout rules change.

00:00:13.000 --> 00:00:18.000
Let the content guide the change.
6 breakpoint checks.

00:00:18.000 --> 00:00:30.000
Start with the content
Look for the width where the current arrangement becomes awkward.
Content fit · Readable text · Usable controls

00:00:30.000 --> 00:00:42.000
A media query sets a condition
CSS can apply different rules when the condition matches.
Available width · Matching condition · Different layout rule

00:00:42.000 --> 00:00:54.000
Change what needs changing
Columns, spacing or navigation may need a new arrangement.
Flexible columns · Suitable spacing · Usable navigation

00:00:54.000 --> 00:01:06.000
Avoid one-device assumptions
Visitors use many window sizes and display settings.
Different phones · Resized windows · Browser zoom

00:01:06.000 --> 00:01:18.000
Test around each change
Review widths just above and below the breakpoint.
Before the change · At the change · After the change

00:01:18.000 --> 00:01:30.000
Check real content lengths
Long names and headings can reveal problems a short mock-up hides.
Longer headings · Real labels · Working customer journey

00:01:30.000 --> 00:01:39.000
Your checklist
Start with the content · A media query sets a condition · Change what needs changing · Avoid one-device assumptions · Test around each change · Check real content lengths

00:01:39.000 --> 00:01:47.000
Check the widths between your usual screenshots.
jerseyweb.je