Web Design as a Technical Discipline

Design Is Implementation

Web design isn't decoration applied after engineering work completes. It's a technical discipline that directly impacts bundle sizes, rendering performance, and accessibility compliance. When I review designs, I'm checking whether they respect browser capabilities, bandwidth constraints, and assistive technology patterns.

The best web designs emerge from understanding what browsers can do efficiently. CSS Grid eliminated the need for framework-based layout libraries. Container queries removed countless JavaScript resize listeners. Modern color functions like oklch() provide perceptually uniform color spaces without preprocessing. Designers who understand these primitives create lighter, faster interfaces.

Progressive Enhancement Shapes Visual Hierarchy

Progressive enhancement isn't just about JavaScript. It applies to visual design at every level. Start with semantic HTML that works without CSS. Layer on layout and typography. Add color and motion last.

This constraint forces clarity. If your design doesn't communicate hierarchy through document structure alone, heading levels and landmark regions won't save it. Screen readers expose this immediately. So does viewing the page with stylesheets disabled or on a slow connection where CSS hasn't loaded yet.

/* Base: works everywhere */
main {
  max-width: 65ch;
  margin-inline: auto;
  padding: 1rem;
}

/* Enhancement: modern browsers */
@supports (width: 100cqw) {
  main {
    container-type: inline-size;
  }
  
  .card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }
}

This approach also handles feature detection naturally. The @supports query means older browsers get a functional single-column layout while modern browsers get adaptive grids.

Performance Budgets Constrain Aesthetic Choices

Every design decision has a byte cost. Custom fonts, hero images, icon libraries, animations—they all count against your performance budget. On mobile connections, these costs translate directly to user wait time.

I set hard limits early. Typically 200KB for initial HTML/CSS/JS, 100KB for fonts, 500KB total for above-the-fold content. These numbers force prioritization. You can't load eight font weights if your budget allows two. You can't use a 2MB hero image when you have 100KB allocated.

<!-- Bad: loads full weight before rendering -->
<link rel="stylesheet" href="styles.css">

<!-- Better: critical CSS inline, deferred load -->
<style>
  /* Critical path CSS only: layout, typography, above-fold */
  body { font-family: system-ui; margin: 0; }
  header { padding: 1rem; }
</style>
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

System font stacks have improved dramatically. font-family: system-ui, sans-serif gives you San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android—all at zero bytes. Custom fonts need to justify their weight budget with measurable brand value.

Responsive Design Means Container Queries Now

Media queries query the viewport. Container queries query the parent element. This distinction changes how we think about component design.

With media queries, components need to know about the entire page layout. A sidebar widget behaves differently than a main-content widget at the same viewport size. You end up with breakpoint spaghetti tracking every possible container width.

Container queries let components be context-independent:

.product-card {
  container-type: inline-size;
}

.product-card img {
  width: 100%;
  aspect-ratio: 1;
}

.product-card .details {
  padding: 1rem;
}

/* Component responds to its own width, not viewport */
@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
  
  .product-card img {
    aspect-ratio: 3/4;
  }
}

This card works identically in a narrow sidebar or wide main content area. The component owns its responsive behavior. You can drop it anywhere without coordination with page-level breakpoints.

Color Accessibility Is Math

WCAG 2.1 requires 4.5:1 contrast for normal text, 3:1 for large text. These aren't suggestions. They're compliance requirements affecting legal liability in many jurisdictions.

Tools like WebAIM's contrast checker make verification mechanical. But better to build accessible color systems from the start. Use color spaces like OKLCH that maintain perceptual contrast across hue shifts.

:root {
  --primary-h: 250;
  --primary-base: oklch(50% 0.2 var(--primary-h));
  --primary-light: oklch(70% 0.15 var(--primary-h));
  --primary-dark: oklch(30% 0.25 var(--primary-h));
}

/* Guaranteed WCAG AA contrast on white */
.button {
  background: var(--primary-base);
  color: white;
}

OKLCH's perceptual uniformity means adjusting lightness reliably affects contrast. Moving from 50% to 30% lightness will darken the color predictably, unlike HSL where the same numeric shift produces vastly different visual results across hues.

Animation Respects User Preferences

The prefers-reduced-motion media query isn't optional. Some users experience vestibular disorders where motion triggers nausea or dizziness. Respecting this preference is basic accessibility.

.card {
  transition: transform 0.2s ease-out;
}

.card:hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
  
  .card:hover {
    transform: none;
    outline: 2px solid var(--primary);
  }
}

The reduced-motion version still provides hover feedback through a static visual change. Users get the functional benefit without motion-induced discomfort.

Conclusion

Effective web design requires understanding browser rendering, performance characteristics, and accessibility standards. These technical constraints don't limit creativity—they channel it toward solutions that work for more people on more devices.

The visual result matters, but it's inseparable from how it loads, how it responds, and how it's experienced across the full spectrum of human ability and device capability. That's what makes it engineering.