A common responsive handoff starts with a 1440-pixel desktop design and adds one 375-pixel mobile screen. Developers must guess tablets, foldables, landscape mode, and intermediate widths, so layouts fail at the most common sizes between those endpoints.
Responsive design should establish rules for what stays, wraps, collapses, or changes interaction as space narrows—not deliver only two static screenshots.
01 Prioritize Content by Value First
Limited mobile space does not mean hiding all secondary content. Define the user's primary tasks and decision information in each context.
A module may display side by side on desktop, then segment, collapse, or surface the most important item first on mobile.
02 Choose Breakpoints When Content Stops Working
Do not base breakpoints only on several device models. Resize the container and observe when navigation, cards, headings, or tables become crowded or unreadable, then switch layouts at those points.
A design system can define primary container and component breakpoints while allowing local components to respond to their own width.
Responsive Strategies for Common Components
| Component | Wide-Screen Pattern | Narrow-Screen Strategy |
|---|---|---|
| Navigation | Full menu and multiple actions | Collapse the menu and retain the core CTA |
| Card list | Multicolumn grid | Reduce columns; use horizontal scrolling cautiously |
| Image and text module | Side-by-side layout | Stack by content priority |
| Data table | Multicolumn comparison | Prioritize columns, freeze key columns, or use cards |
| Form | Multiple fields per row | Single column, correct keyboard, and large touch areas |
| Chart | Complete axes and legend | Simplify labels and support detail views or landscape |
03 Use Typography and Spacing Ranges, Not Mechanical Scaling
Large headings can use fluid type as width changes, while body readability and line length should remain stable.
Touch targets cannot shrink until they are difficult to activate. Mobile design must also account for safe areas and browser controls.
04 Crop Images and Media by Purpose
Simply shrinking a wide banner for mobile may make the subject unreadable. Define focal points, ratios, and crops for important images, and provide responsive resources.
Video and motion on mobile networks need posters, fallbacks, and pause controls.
05 Express Rules in the Design File
Use Auto Layout, constraints, and component variants to simulate real changes. Annotate maximum and minimum widths, wrapping, and visibility logic.
Describe intermediate sizes during handoff instead of comparing only desktop and mobile pixels.
06 Test with Real Devices and Content
Test long headings, multiple languages, large text, exception data, landscape orientation, and touch. Ideal placeholder content in design tools is usually too neat.
After launch, adjust using real device distribution and user issues instead of maintaining only the first two mockups.
Frequently Asked Questions
How many sizes should responsive design cover?
There is no fixed number. Cover primary layout changes and critical boundaries, then explain intermediate states through rules.
Can mobile remove desktop content?
It can reorder, collapse, or defer content, but critical tasks and necessary information should not disappear without reason.
Must tables become cards on mobile?
No. Choose column priorities, horizontal scrolling, frozen columns, or detail pages according to the comparison task.
Should design or engineering decide breakpoints?
Decide together. Design contributes content and experience needs; engineering contributes implementation constraints and existing systems.
What is the difference between responsive and adaptive design?
Terminology varies. Responsive often means fluid change, while adaptive means preset layouts; practical projects can combine them.
| Service | View |
|---|---|
| Related service | View service details |
| Project inquiry | Contact JVDS Design Studio |
| Design and web articles | View all insights |
Link copied
