WebsiteDesignOutsource.com blog
How to Write a Mobile-First Website Design Brief
A mobile-first brief helps an outsourced website designer solve content, interaction, and layout constraints early.
Mobile-first design is a decision about priority, not a promise to design only one screen size. The brief should explain what people must be able to do when space, attention, and connection quality are limited.
Describe the mobile task
Name the page's main task and the information needed to complete it. Put secondary detail in a clear order. This gives the designer a reason for the mobile layout rather than asking for a smaller desktop page.
Provide realistic content
Include long headings, wrapped buttons, form errors, and images with useful alternative text. Short sample copy makes a narrow layout look easier than it is.
Define interaction rules
Record tap targets, menus, accordions, forms, and any action that needs confirmation. Explain what should remain visible while the visitor scrolls and what can wait.
Review across conditions
Check the page with text enlarged, with a keyboard where relevant, and with images unavailable. Ask the designer to record issues that need a content or technical decision.
Further reading
Review mobile behavior in outsourced design
Write a practical typography brief
Source
W3C Web Content Accessibility Guidelines, target size
Frequently asked questions
Is mobile-first the same as responsive design?
No. Mobile-first describes the order and priority of decisions. Responsive design describes how the page adapts across available space.
Should every mobile element appear on desktop?
The content relationship should remain understandable, but layout and controls can adapt when the available space changes.