WebsiteDesignOutsource.com blog
How to Brief Responsive Breakpoints for Outsourced Website Design
A practical way to describe responsive behavior to an outsourced website design team without relying on device names alone.
"Make it responsive" does not tell a designer what should change. A better brief describes where layout decisions stop working and what the page should do when space becomes tight.
Describe behavior, not phones
Name the relationship between columns, navigation, images, text, and actions. Say when a two-column section should stack, whether the image moves after the text, and how a long label should wrap. Device labels can hide the real constraint.
Use representative content
Review the longest heading, a paragraph with realistic length, the full navigation, and the largest expected image. Short sample content often makes a layout look stable when the approved copy will not fit.
Test the awkward states
Ask the outsourced website design team to show narrow width, large text, zoom, a long button label, and a missing or slow-loading image where those states matter. Record what is allowed to move and what must remain available.
Keep the brief inspectable
Attach the page route, content source, expected order, and review owner. The final handoff should include the tested widths and any intentional exception. This gives a later maintainer a reason for the responsive rule rather than a list of unexplained breakpoints.
Choose breakpoints from content failure
Do not begin with device names. Resize the real navigation, headline, table, form, and card content until a task becomes unclear or a control becomes unusable; those failures are evidence for a layout change. Record the transition, expected behavior, and test content so the outsourced website design team can reproduce the decision at intermediate widths.