mobile-first-responsive-design

name	mobile-first-responsive-design
description	Use when: designing or updating pages with mobile-first layout, responsive behavior, and touch-friendly interactions.

Mobile-First Responsive Design

Goal

Ensure core workflows are strong on small screens first.

Do

• Start layout decisions at small viewport widths and scale up.
• Prioritize content hierarchy and compact navigation patterns.
• Use responsive tables/cards for data-heavy screens.
• Keep tap targets and spacing comfortable for touch devices.

Checks

• Critical actions remain visible on mobile without horizontal scrolling.
• Typography and controls are legible at small sizes.
• No interaction depends only on hover behavior.