"Multiple devices" spans phones, tablets, desktops, maybe TVs/watches — varying in screen size, input method, capability, and network. The architecture handles all four axes.

1. Responsive, mobile-first layout

• Mobile-first CSS — design for the smallest screen, layer enhancements up via min-width media queries.
• Fluid layouts — flexbox/grid, relative units (rem, %, fr, clamp()), not fixed pixels.
• Breakpoints driven by content, not specific devices.
• Responsive images (srcset/<picture>), fluid typography.

2. Responsive vs adaptive — know the difference

• Responsive — one layout that flexes to any size. The default.
• Adaptive — different layouts/components for different device classes when they genuinely diverge (a complex desktop data table vs. a mobile card list — the same component squished doesn't work). Use adaptive where the UX should differ, responsive everywhere else.

3. A shared component library

A design system of components that are themselves responsive and accessible. Build once, compose per device. This is the core of not maintaining N codebases.

4. Input methods, not just screen size

Devices differ in input: touch, mouse, keyboard, stylus, remote, voice. Design for all — adequate touch targets (~44px), hover that doesn't break on touch (@media (hover: hover)), full keyboard navigation, pointer events that cover mouse + touch + pen.

5. Capability & performance — progressive enhancement

• Progressive enhancement — a baseline that works everywhere, enhanced where supported (@supports, feature detection).
• Performance budgets for the low end — low-end phones on slow networks are the constraint, not your dev machine. Code splitting, lazy loading, smaller bundles, image optimization.
• Adaptive loading — optionally serve lighter experiences on low-end devices / save-data.

6. The platform decision

Decide deliberately: responsive web, PWA (installable, offline — one codebase, near-native), or native (deepest OS integration). Or web + native sharing a logic layer. Drive it by requirements (offline? device APIs? app-store reach?), not fashion.

7. Architecture & testing

• Shared logic layer (data, business rules) reused across surfaces.
• Test on real devices across the matrix, not just browser resize.

The framing

"Devices vary on four axes — size, input, capability, network — so I'd architect for all four. Mobile-first responsive layouts with fluid units and content-driven breakpoints as the baseline; adaptive — genuinely different components — only where the UX should diverge, like a desktop table vs a mobile card list. A shared responsive, accessible component library so it's one codebase, not N. Design for every input method, not just width — touch targets, keyboard nav, hover guards. Progressive enhancement plus performance budgets aimed at low-end devices. And a deliberate web/PWA/native decision driven by requirements, with a shared logic layer underneath."