ADR-042: Mobile Strategy - Progressive Enhancement

Status

Accepted Proposed Deprecated Superseded

Context

Ted Nadeau asked: “Is the product mobile-enabled, e.g., with swipe gesture?”

This question raises strategic decisions about mobile support:

Traditional approaches to mobile:

  1. Mobile-first: Build native apps from day one → High initial cost, unknown demand
  2. Desktop-only: Ignore mobile → Limits adoption, poor tablet/phone UX
  3. Responsive web: Make web app mobile-friendly → Quick win, but limited native features
  4. Progressive Web App (PWA): Installable web app → Native-like experience, one codebase

This ADR defines Piper’s mobile strategy using progressive enhancement.

Decision

We will adopt a progressive enhancement mobile strategy, implementing mobile support in phases based on validated user demand:

Phase 1: Mobile-Optimized Web (P3 - Wait for Demand)

When: When analytics show >10% mobile traffic or users explicitly request mobile access

What:

Effort: 1-2 weeks Benefit: Works in mobile browsers without app installation Risk: Low (CSS + touch handlers, no new infrastructure)

Implementation:

/* Mobile breakpoints */
@media (max-width: 768px) {
  /* Simplified navigation, larger touch targets */
}

/* Touch gesture support */
.swipeable {
  touch-action: pan-x;
}

Phase 2: Progressive Web App (PWA) (P4 - Future)

When: When Phase 1 shows sustained mobile usage (>20% traffic for 3+ months)

What:

Effort: 2-3 weeks Benefit: Feels like native app, works offline, one codebase Risk: Medium (service worker complexity, browser compatibility)

Implementation:

// manifest.json
{
  "name": "Piper Morgan",
  "short_name": "Piper",
  "start_url": "/",
  "display": "standalone",
  "icons": [...]
}

Phase 3: Native Mobile App (Only if Strong Demand)

When: When Phase 2 shows power-user demand for native features (camera integration, deep OS integration, offline-first workflows)

What:

Effort: 3-6 months Benefit: Premium mobile experience, full native capabilities Risk: High (two platforms, app store approvals, ongoing maintenance)

Decision criteria:

What We Will NOT Do

Consequences

Positive

Negative

Neutral

Implementation

Phase 1 Trigger: Mobile Analytics

Add mobile traffic tracking:

# web/api/middleware.py
from fastapi import Request
import user_agents

async def track_mobile_usage(request: Request):
    ua = user_agents.parse(request.headers.get("user-agent"))
    if ua.is_mobile:
        # Track mobile traffic
        analytics.increment("mobile_traffic")

Decision criteria:

Phase 1 Implementation: Responsive Web

Responsive CSS (web/static/styles/mobile.css):

/* Mobile breakpoints */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { width: 100%; }
  button { min-height: 44px; } /* iOS touch target size */
}

/* Touch gestures */
.swipeable {
  touch-action: pan-x;
}

Touch gesture handlers (web/static/js/gestures.js):

let touchStartX = 0;
let touchEndX = 0;

function handleGesture() {
  if (touchEndX < touchStartX - 50) {
    // Swipe left (next)
    navigateNext();
  }
  if (touchEndX > touchStartX + 50) {
    // Swipe right (back)
    navigateBack();
  }
}

document.addEventListener('touchstart', e => {
  touchStartX = e.changedTouches[0].screenX;
});

document.addEventListener('touchend', e => {
  touchEndX = e.changedTouches[0].screenX;
  handleGesture();
});

Phase 2 Implementation: PWA

Service worker (web/static/sw.js):

// Cache-first strategy
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

Web app manifest (web/static/manifest.json):

{
  "name": "Piper Morgan",
  "short_name": "Piper",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4a90e2",
  "icons": [
    {
      "src": "/static/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Phase 3 Decision Criteria

Proceed to native app if ALL of the following:

Tech stack (if Phase 3 proceeds):

Rationale

Why Progressive Enhancement?

Cost efficiency: Mobile apps are expensive to build and maintain. Progressive enhancement lets us validate demand before investing.

One codebase: Web → PWA requires minimal changes (service worker + manifest). Web → Native requires full rewrite.

Fast iteration: Web updates deploy instantly. Native apps require app store review (1-7 days).

Desktop-first: Piper’s alpha users are technical PMs who work primarily on desktop. Don’t compromise desktop UX for hypothetical mobile users.

Why NOT Mobile-First?

User research: Alpha users are technical PMs using desktop workflows (GitHub, Jira, Notion, terminal). Mobile is secondary.

Competitive analysis:

Power-user workflows: PM tasks (issue creation, roadmap planning, document review) benefit from large screens, keyboards, multi-window workflows.

Strategic focus: Better to excel at desktop PM workflows than be mediocre at mobile.

Why NOT Native Apps First?

High cost, unknown demand:

Maintenance burden:

Risk: If mobile demand is low, we wasted 6 months. If high, we can build later with validated requirements.

Why PWA Before Native?

PWA advantages:

PWA limitations (trigger for Phase 3):

If PWA limitations block core workflows → Build native (Phase 3).

Ted’s Question: Swipe Gestures

Answer: Yes, mobile will support swipe gestures (Phase 1).

Implementation:

Design principle: Touch gestures should enhance (not replace) tap-based navigation. Users should be able to accomplish all tasks without gestures (accessibility).

Complements

Supersedes

None. This is the first mobile strategy ADR.

Measurement

Success Criteria

Phase 1 (Mobile-Optimized Web):

Phase 2 (PWA):

Phase 3 (Native App):

Analytics to Track

# Track mobile usage
analytics.increment("mobile_traffic")
analytics.increment("mobile_task_completion")
analytics.increment("pwa_installs")
analytics.increment("offline_usage")

References

Documentation

External References

Competitive Analysis

Product Mobile Strategy Our Takeaway
GitHub Desktop-first, native mobile (simplified) Mobile is secondary for dev tools
Jira Desktop-first, native mobile (subset) PM tools are desktop-heavy
Linear Desktop-first, minimal mobile Fast startups still prioritize desktop
Notion Cross-platform from day one Consumer product (different market)
Slack Mobile-first Chat is mobile-native (Piper is not)

Conclusion: PM/dev tools are desktop-first. Mobile is valuable but secondary.


Decision made: November 20, 2025 Author: Code Agent (Research Session) Inspired by: Ted Nadeau’s mobile strategy question Status: Accepted Reviewers: Chief Architect (pending), PM (approved approach)