Responsive Recomposition

Principle

Responsive design is a change in priority and composition, not only width.

For each major section ask:

• What must remain above the fold on small screens?
• Which desktop relationship must become sequence, carousel, disclosure, or separate screen?
• Does imagery need a different crop or art direction?
• Does hover behavior have a touch equivalent?
• Should motion simplify or disappear?
• Does type wrapping preserve hierarchy in both Korean and English if applicable?

Default test widths

Use the repository viewport matrix, including a 320px edge case and representative mobile/tablet/desktop widths. Add domain-specific sizes when the product requires them.

Mobile priorities

1. identity/context;
2. primary user job/action;
3. critical information;
4. supporting imagery/story;
5. secondary evidence.

Do not preserve desktop order when it conflicts with mobile task priority.

Touch

Ensure controls have adequate size/spacing, drag interactions have alternatives when required, sticky UI does not obscure focus/content, and thumb reach is considered for frequent primary actions.