Workflow Development

Build Responsive Layout

Mobile-first workflow for creating responsive interfaces

responsivecssfrontend
CLAUDE.md

When building a responsive layout:

  1. Start with the mobile layout. Design for the smallest screen first.
  2. Build the HTML structure with semantic elements. Get the content flow right before adding any layout CSS.
  3. Add CSS for the mobile view using single-column layout and full-width elements.
  4. Add breakpoints with min-width media queries to progressively enhance for larger screens.
  5. Use relative units (rem, %, vw) instead of fixed pixel values.
  6. Test at common breakpoints: 375px (phone), 768px (tablet), 1024px (laptop), 1440px (desktop).
  7. Test with actual content — not just placeholder text. Long titles and varying image ratios break layouts.

Copy this workflow into your CLAUDE.md or agent config file so your agent follows this process automatically.

get crystl