Core Principles

The philosophical foundation of BiModal Design: building for humans and agents together

BiModal Design represents a fundamental shift in how we think about web development. For 30 years, we've designed exclusively for human visual consumption. Now, as AI agents become primary users of web content, we must design for two distinct modalities: human visual interfaces and machine-readable structures.

The good news? These modalities aren't in conflict. When done right, designing for agents makes your site better for humans too—more accessible, faster, and more resilient.

The BiModal Philosophy

"Design once, serve twice: Build interfaces that delight humans while remaining perfectly interpretable by AI agents."

BiModal Design isn't about building two separate experiences. It's about creating a single, well-structured foundation that serves both audiences naturally. Think of it as building a house with both beautiful architecture and a solid blueprint—humans appreciate the former, agents rely on the latter.

Traditional Web Design

  • • Visual-first thinking
  • • Styling over structure
  • • JavaScript-dependent
  • • Single modality (human vision)
  • • Agents as an afterthought

BiModal Design

  • • Structure-first thinking
  • • Semantics over styling
  • • Progressive enhancement
  • • Dual modality (human + agent)
  • • Universal access by design

The Three Pillars

BiModal Design rests on three foundational principles that guide every decision:

1

Content First

Structure and meaning take precedence over visual presentation. Content must be understandable independent of styling, JavaScript, or visual layout.

In Practice:

  • ✓Use semantic HTML5 elements (<article>, <nav>, <main>)
  • ✓Ensure content hierarchy makes sense in plain HTML
  • ✓Add structured data (Schema.org) for machine readability
  • ✓Test with curl to verify content visibility

"If your content doesn't make sense when you view the HTML source, it won't make sense to agents either."

2

Progressive Enhancement

Core functionality must work without JavaScript. Enhance the experience for capable browsers, but never require JavaScript for basic access.

The Enhancement Layers:

  1. Base Layer (HTML): All content and core functionality accessible
  2. Presentation Layer (CSS): Visual design and layout for humans
  3. Behavior Layer (JavaScript): Interactivity and enhanced UX
Example: Progressive Form
<!-- Base: Works without JS -->
<form action="/submit" method="POST">
  <input name="email" type="email" required />
  <button type="submit">Subscribe</button>
</form>

<!-- Enhanced: Add JS for better UX -->
<script>
  // Add instant validation
  // Add loading states
  // Add success animations
</script>

"Build your foundation in HTML, make it beautiful with CSS, and add magic with JavaScript—in that order."

3

Universal Access

Design for the broadest possible audience: humans with diverse abilities, AI agents, search engines, screen readers, and future technologies we haven't imagined yet.

Who Benefits:

Human Users
  • • Screen reader users
  • • Keyboard-only users
  • • Low-vision users
  • • Cognitive disabilities
  • • Mobile users
Non-Human Users
  • • AI agents (GPT, Claude, etc.)
  • • Search engine crawlers
  • • API consumers
  • • Automation tools
  • • Future technologies

"When you design for accessibility and machine readability, you're not accommodating edge cases—you're building for the full spectrum of users."

The Paradigm Shift

From Visual-First to Semantic-First

Traditional web development asks: "How does this look?"
BiModal Design asks: "What does this mean?"

❌ Visual-First Thinking

<div class="heading">

Styling conveys meaning

<span onClick=...>

JavaScript creates functionality

CSS classes describe appearance

"red-button", "big-text"

✓ Semantic-First Thinking

<h2>

Structure conveys meaning

<button> or <form>

HTML creates functionality

Classes describe purpose

"submit-button", "section-title"

Core Design Principles

These principles guide every implementation decision in BiModal Design:

1. Semantic-First Architecture

Choose HTML elements based on their meaning, not their default appearance. Use <nav> for navigation, <article> for content, <button> for actions—regardless of how they're styled.

2. Content Before Chrome

The content is the interface. Decoration, animations, and visual flourishes should enhance—never obscure or replace—the core content and functionality.

3. Agent-Friendly by Default

Don't build for agents as an afterthought. If agents can't access your content, your architecture is wrong. Fix the foundation, don't build workarounds.

4. Human Experience Enhanced, Not Compromised

BiModal Design doesn't mean sacrificing beauty or interactivity. Build a solid semantic foundation, then layer on the best possible human experience.

5. Resilience Over Complexity

Simple, robust solutions beat clever, fragile ones. If it breaks without JavaScript, it's broken by design. Choose server-side rendering over client-side when possible.

6. Test with Constraints

Regularly test your site with JavaScript disabled, with curl, with screen readers, and with agent simulators. Constraints reveal architectural flaws early.

The BiModal Mindset

Adopting BiModal Design means asking different questions during development:

Before Writing Code:

  • →What is the meaning of this content, not just its appearance?
  • →Will this work without JavaScript?
  • →Can an agent understand the purpose of this element?
  • →Is there a semantic HTML element that expresses this better?

During Implementation:

  • →Am I using semantic HTML elements wherever possible?
  • →Have I added appropriate ARIA labels for interactive elements?
  • →Does my content render server-side?
  • →Would this make sense to someone using a screen reader?

Before Deployment:

  • →Have I run the curl test on key pages?
  • →Does my site pass WAVE accessibility validation?
  • →Have I validated my structured data markup?
  • →Can agents complete common user tasks on my site?

Why This Matters

BiModal Design isn't academic theory—it has immediate, measurable business impact:

For Agents

  • • 40-75% increase in task completion rates
  • • Reduced need for vision-based models (cheaper)
  • • Faster processing and response times
  • • More reliable automation

For Humans

  • • Better accessibility scores (WCAG compliance)
  • • Improved SEO and search rankings
  • • Faster page loads (SSR + semantic HTML)
  • • More resilient user experience

For Developers

  • • Simpler, more maintainable code
  • • Reduced technical debt
  • • Better testing surface
  • • Future-proof architecture

For Businesses

  • • Higher conversion rates (agents can transact)
  • • Broader market reach
  • • Competitive differentiation
  • • Regulatory compliance (accessibility laws)

Ready to Build BiModal?

Now that you understand the core principles, it's time to dive into the technical implementation. Start with the In Depth guides to learn how to apply these principles to real code.

Start with Semantic Architecture →Review All Requirements
← Rendering StrategiesSemantic Architecture →