Web Design Is Still About Constraints

The Paradox of Modern Tooling

We have more web design tools than ever. Figma prototypes animate with physics-based springs. CSS supports container queries, cascade layers, and color spaces that didn't exist five years ago. JavaScript frameworks let us build interfaces that feel native.

Yet most websites load slowly, break on unfamiliar screen sizes, and confuse users.

The problem isn't the tools. It's that we've mistaken capability for direction. Every new feature expands what's possible without clarifying what's appropriate. Good web design has always been about working within constraints—technical, contextual, and cognitive. The challenge today is choosing which constraints to honor when the medium no longer enforces them.

Technical Constraints That Still Matter

Browsers are remarkably capable, but physics hasn't changed. A 2MB hero image still takes time to download on a cellular connection. JavaScript still blocks the main thread. CSS animations still compete with layout recalculations.

I recently audited a site with a Lighthouse performance score of 23. The designer had used a popular visual builder that generated 800KB of inline CSS and loaded 14 web fonts. Every interaction triggered React re-renders for components that never changed. The design looked polished in the builder's preview, but crawled on actual devices.

Performance budgets aren't arbitrary rules—they're acknowledgments of user context. When I set a 200KB initial bundle size, I'm not being pedantic. I'm designing for the person on a bus with spotty 4G, or the market in Southeast Asia where data costs matter.

// Performance-conscious image loading
const ImageWithFallback = ({ src, alt, width, height }) => (
  <img
    src={src}
    alt={alt}
    loading="lazy"
    decoding="async"
    width={width}
    height={height}
    srcSet={`
      ${src}?w=400 400w,
      ${src}?w=800 800w,
      ${src}?w=1200 1200w
    `}
    sizes="(max-width: 640px) 100vw, 640px"
  />
);

This isn't about avoiding modern features. It's about using them deliberately. loading="lazy" and responsive images have excellent browser support. They cost nothing and improve experiences measurably.

Layout Constraints: The Grid You Can't See

Responsive design is now expected, but many designers still work from fixed-width mockups. They specify pixel-perfect spacing in Figma, then wonder why the implementation "doesn't match the design."

The web doesn't have a canvas. It has a flow. Content reflows to fit its container. Fonts render differently across operating systems. Users resize their browser windows, zoom the page, or override your font sizes.

I stopped fighting this years ago. Now I design in the browser for anything beyond initial concepts. CSS Grid and Flexbox handle real-world flexibility better than any static tool:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

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

.card__title {
  font-size: clamp(1.25rem, 4cqi, 2rem);
}

This grid adapts to any container width without media queries. The title scales with the card's size using container query units. It works on viewports I've never tested because the constraints are baked into the layout logic.

Cognitive Constraints: Attention Is Finite

Users don't read websites—they scan. Eye-tracking studies show F-patterns and layer-cake patterns because people are optimizing for information scent, not appreciating your typography choices.

This is a constraint, not an insult. Human working memory holds 4-7 items. Attention spans vary but are never infinite. Every design decision should acknowledge these limits.

I watch for:

• Navigation with more than 7 top-level items: users won't scan that menu
• Hero sections that don't immediately communicate purpose: you have 3 seconds
• Forms asking for information before establishing value: people abandon
• More than one primary action visible at once: decision paralysis is real

The best interfaces guide attention deliberately. They use visual hierarchy not as decoration but as information architecture. White space isn't wasted pixels—it's cognitive breathing room.

Embracing Platform Constraints

The web platform has opinions. HTML elements come with built-in accessibility and keyboard navigation. Form inputs validate types automatically. Links have native right-click menus. These aren't limitations to overcome—they're features to leverage.

When you rebuild a <select> dropdown in JavaScript for aesthetic reasons, you're discarding years of platform engineering. You're responsible for focus management, keyboard navigation, screen reader announcements, and mobile-friendly touch targets. Most custom implementations fail at several of these.

<!-- Native select: works everywhere -->
<select name="country" required>
  <option value="">Choose a country</option>
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

<!-- Custom dropdown: now your problem -->
<div class="custom-select" role="combobox" aria-expanded="false" 
     aria-haspopup="listbox" aria-labelledby="label-id"
     tabindex="0" onkeydown="handleKeys(event)">
  <!-- ...hundreds of lines of JS later -->
</div>

I'm not advocating for ugly defaults. Style native elements when you can. Use custom implementations when native elements genuinely can't serve your users. But start with the platform.

Designing Forward

The constraint-aware approach doesn't mean minimalism or technical conservatism. It means understanding that design decisions cascade through implementation, maintenance, and user experience.

When I choose a design direction now, I ask:

• Does this respect users' bandwidth and device capabilities?
• Will this layout flex appropriately across viewport sizes?
• Am I working with the platform or against it?
• Does this interface guide attention or demand it?

These questions don't limit creativity—they channel it toward solutions that actually ship and actually work. The most elegant designs I've seen emerge from designers who understand their medium's constraints as deeply as its possibilities.

Web design is still about making things that work. The tools have changed, but the discipline hasn't.