responsive-design-patterns

Responsive Design Patterns

Mobile-first patterns for creating adaptive, responsive user interfaces.

Breakpoint System

export const breakpoints = {
  sm: '640px',   // Small devices
  md: '768px',   // Medium devices
  lg: '1024px',  // Large devices
  xl: '1280px',  // Extra large devices
  '2xl': '1536px' // 2X Extra large
};

// Tailwind config
module.exports = {
  theme: {
    screens: breakpoints
  }
};

Mobile-First Approach

// Start with mobile, enhance for larger screens
<div className="
  flex flex-col        /* Mobile: stack vertically */
  md:flex-row          /* Tablet+: side by side */
  gap-4
  p-4 md:p-6 lg:p-8   /* Progressive spacing */
">
  <div className="
    w-full               /* Mobile: full width */
    md:w-1/3            /* Tablet+: 1/3 width */
  ">Sidebar</div>
  
  <div className="
    w-full
    md:w-2/3
  ">Main Content</div>
</div>

Fluid Typography

/* Clamp for fluid scaling */
h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

/* Container queries */
@container (min-width: 400px) {
  .card-title {
    font-size: 1.25rem;
  }
}

Responsive Images

<picture>
  <source
    media="(min-width: 1024px)"
    srcSet="/images/hero-large.webp"
  />
  <source
    media="(min-width: 640px)"
    srcSet="/images/hero-medium.webp"
  />
  <img
    src="/images/hero-small.webp"
    alt="Hero image"
    loading="lazy"
  />
</picture>

Touch-Friendly Patterns

// Minimum touch target: 44x44px
<button className="min-h-[44px] min-w-[44px] p-3">
  <Icon />
</button>

// Swipe gestures
function useSwipe(onSwipeLeft?: () => void, onSwipeRight?: () => void) {
  const [touchStart, setTouchStart] = useState(0);
  const [touchEnd, setTouchEnd] = useState(0);
  
  const minSwipeDistance = 50;
  
  const onTouchStart = (e: TouchEvent) => {
    setTouchEnd(0);
    setTouchStart(e.targetTouches[0].clientX);
  };
  
  const onTouchMove = (e: TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientX);
  };
  
  const onTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    
    const distance = touchStart - touchEnd;
    const isLeftSwipe = distance > minSwipeDistance;
    const isRightSwipe = distance < -minSwipeDistance;
    
    if (isLeftSwipe && onSwipeLeft) onSwipeLeft();
    if (isRightSwipe && onSwipeRight) onSwipeRight();
  };
  
  return { onTouchStart, onTouchMove, onTouchEnd };
}

Integration Points

Complements:

• frontend-design-systems: For component design
• accessibility-patterns: For mobile accessibility
• webapp-testing: For responsive testing