Plan responsive structure as rules

Most responsive plans are three pictures: desktop, tablet, mobile. The site looks right at those three widths and breaks at three hundred and sixty-two pixels, where nobody looked.

Screens come in every width, and people resize and zoom. Three layouts can't cover that. Rules can. Write them per page type, before the build, in plain sentences.

Keep rules say what survives at every width: the main element, the reading order, the main action, and no sideways scrolling, which WCAG's Reflow criterion asks for at 320 CSS pixels. May rules say what can give way, and when.

Here are two rules for the bakery's Today's bread page. The first: the menu sits beside the shop's name while it fits, and goes under it when it doesn't. The second: a loaf's price sits beside its name while both fit, and otherwise drops under it. Now narrow the window. At six hundred and twenty-five pixels the menu drops under the shop's name. That isn't a tablet width. It's where the name and the four links stop fitting on one line. Keep going, down to three-twenty. Every price still fits beside its loaf, so the second rule never acts, and nothing scrolls sideways. The content decides when a rule acts, not a phone size. Now the owner renames Country loaf to Country loaf, the sourdough, in the list the pages are built from, and you drag again. At four hundred and thirty pixels its price drops under the name, while the others stay beside theirs. The rule didn't change. The width took care of itself.

Be careful with hiding. If a slot is in the content model, someone needs it, and people on phones are often the ones in a hurry. And reorder in the source, not only visually, so a screen reader gets the same page as everyone else.

Write each rule so an agent could follow it without asking: the element, what changes, the trigger, and what stays the same, like the two you just watched. 'Make it work on mobile' gets you the agent's default: stack everything and quietly hide what doesn't fit.

Put the rules in the agent's spec. Then sweep every width, the way you just watched, find the exact point where something breaks, and fix the rule, not the one width.

How rules become CSS is taught well, and free, in the course named on screen. What no course can decide is what your page must keep. That's your call, in writing, before anyone opens the code.

Write what must survive and what may move. The widths will take care of themselves.