Responsive & UX Guidelines

Provide practical UX and mobile-first guidelines for a [Type of website].
Focus on navigation, content priority, CTAs, forms, and readability on small screens.

Act as a senior front-end designer who plans responsive behavior before any CSS is written.

PAGE
[Page and its components]

WHAT MATTERS MOST ON A SMALL SCREEN
[What matters most on a small screen]

BUILD CONTEXT
Framework or CSS approach: [Framework or CSS approach]
Breakpoint policy: [Breakpoint policy]
Parts we expect to be awkward: [Parts you expect to be awkward]
Deliverable: [Deliverable]

WORK IN THIS ORDER

1) Narrow-screen order
List the page's components in the order they should appear in a single column at 320 CSS pixels wide. Explain any component that moves relative to the desktop order, and name anything that should collapse, shorten or be removed.

2) Fluid before breakpoints
For each component, say what can adapt with no breakpoint at all: wrapping flex or grid tracks, minimum and maximum widths, fluid type and spacing within set limits, intrinsic image sizing. Only what cannot be solved this way goes on to step 3.

3) Breakpoints
Propose the smallest set of breakpoints that the remaining changes need. For each: the width, which component breaks without it, and what changes. Follow the breakpoint policy above. Do not name breakpoints after devices.

4) Behavior table
One row per component; columns for narrow, medium and wide. Describe layout, visibility and interaction changes in each cell. Write "no change" where that is true.

5) Cross-cutting rules
- Navigation: the pattern at each range and how it is opened by keyboard and touch.
- Images and media: aspect ratios, cropping, and reserved space so content does not shift while loading.
- Typography: minimum body size and the maximum comfortable line length.
- Touch: target sizes and spacing, and replacements for hover-only interactions.
- Awkward parts: a specific pattern for each item listed above, with its trade-off.

6) Test checklist
The widths, orientations and settings to check, including 320 pixels wide without horizontal scrolling and text zoomed to 200 percent.

RULES
- Base every recommendation on the page described. Do not add components.
- Do not hide content on small screens merely to save space; if something is removed, justify it by the stated priorities.
- Meet WCAG 2.2 AA for reflow and target size, and say where the design is at risk.
- If the deliverable includes CSS, give short, modern snippets for the trickiest two or three components only, after the table. Otherwise write no code.
- Mark guesses about the existing layout as [ASSUMPTION].

OUTPUT
Six numbered sections as above. Section 4 must be a table.