Responsive Design Guidelines

Core Principles

• Write semantic HTML to improve accessibility and SEO

• Use CSS for styling, avoiding inline styles

• Ensure responsive design using media queries and flexible layouts

• Prioritize accessibility by using ARIA roles and attributes

• Design mobile-first, then enhance for larger screens

Mobile-First Approach

Strategy

• Start with styles for the smallest viewport

• Add complexity through progressive enhancement

• Base styles work without media queries

• Media queries add features for larger screens

Benefits

• Forces prioritization of essential content

• Improves performance on mobile devices

• Ensures core functionality works everywhere

• Reduces CSS complexity and specificity issues

/* Base styles for mobile */

.container {

  padding: 1rem;

}

/* Tablet and up */

@media (min-width: 768px) {

  .container {

    padding: 2rem;

  }

}

/* Desktop and up */

@media (min-width: 1024px) {

  .container {

    max-width: 1200px;

    margin: 0 auto;

  }

}

Flexible Layouts

Flexbox

• Use for one-dimensional layouts (row or column)

• Leverage flex-wrap for responsive wrapping

• Use gap for consistent spacing

• Combine with media queries for layout changes

CSS Grid

• Use for two-dimensional layouts

• Leverage auto-fit and auto-fill for responsive grids

• Use minmax() for flexible track sizing

• Combine fr units with fixed minimums

.grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 1rem;

}

Container Queries

• Style components based on container size, not viewport

• Use for truly reusable components

• Define containers with container-type

Responsive Typography

Fluid Typography

• Use clamp() for responsive font sizes

• Set minimum, preferred, and maximum values

• Avoid text that's too small on mobile or too large on desktop

h1 {

  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);

}

Units

• Use rem for scalable typography

• Base rem on user's browser settings

• Use em for component-relative sizing

• Avoid fixed px values for font sizes

Responsive Images

Srcset and Sizes

• Use srcset for multiple image resolutions

• Use sizes to indicate display size at breakpoints

• Let browser choose optimal image

<img

  src="image-800.jpg"

  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"

  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 800px"

  alt="Description"

>

Picture Element

• Use for art direction (different crops at different sizes)

• Provide fallback with <img> element

• Use media attributes for breakpoint-specific sources

Performance

• Include width and height attributes to prevent layout shift

• Use loading="lazy" for below-fold images

• Consider aspect-ratio CSS property

Media Queries

Common Breakpoints

/* Small phones */

@media (min-width: 320px) { }

/* Large phones */

@media (min-width: 480px) { }

/* Tablets */

@media (min-width: 768px) { }

/* Laptops/Desktops */

@media (min-width: 1024px) { }

/* Large screens */

@media (min-width: 1280px) { }

/* Extra large screens */

@media (min-width: 1536px) { }

Feature Queries

• Use @supports for feature detection

• Provide fallbacks for unsupported features

• Test for specific CSS properties

Preference Queries

• prefers-color-scheme for dark/light mode

• prefers-reduced-motion for animation preferences

• prefers-contrast for contrast preferences

Touch Targets

Sizing

• Minimum 44x44 pixels for touch targets

• Provide adequate spacing between targets

• Consider thumb reach zones on mobile

Interaction

• Don't rely solely on hover states

• Provide touch alternatives for hover interactions

• Use @media (hover: hover) for hover-capable devices

Viewport Configuration

Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Best Practices

• Always include viewport meta tag

• Don't disable user scaling (avoid user-scalable=no)

• Test with pinch-to-zoom enabled

• Ensure content is usable at 200% zoom

Testing

Tools

• Browser DevTools device emulation

• Real device testing when possible

• Lighthouse for performance audits

• W3C validators for code quality

Checklist

• Test at multiple viewport sizes

• Test landscape and portrait orientations

• Test with touch and mouse input

• Test with keyboard navigation

• Verify images load appropriate sizes

• Check typography readability

• Verify touch targets are adequate

• Test with browser zoom

Performance Considerations

Critical CSS

• Inline critical above-fold CSS

• Defer non-critical stylesheets

• Minimize render-blocking resources

Asset Optimization

• Compress images appropriately

• Use modern formats (WebP, AVIF)

• Lazy load below-fold content

• Consider responsive loading strategies