Download the exact captured file
---
name: "ui-app-layout-architectures"
description: "Provides structural interface patterns for modern Web App Shells and Mobile application layouts. Covers navigation topologies (collapsible sidebars, nav rails, top navigation, bottom bar tab bars), multi-pane patterns (Master-Detail, Split-View, Inspector Drawers), responsive density transitions, viewport budgeting, safe-area mobile insets (env(safe-area-inset-*)), and touch ergonomics. Use when designing web application shells, desktop software, mobile apps, or multi-panel productivity suites."
tags:
- app-layout
- app-shell
- web-app
- mobile-app
- ui-design
- responsive-design
---
# UI App Layout Architectures: Web & Mobile Shell Topologies
An application layout is the structural skeleton that supports all user interactions. Unlike public content sites driven by vertical scroll documents, applications are **stateful operating environments** requiring clear zones for navigation, primary workflows, contextual inspections, and feedback loops (Nielsen, 1994; Tidwell et al., 2020).
---
## 🧭 When to Activate
- Designing the root layout and navigation frame of a web or mobile application.
- Structuring multi-panel productivity applications (e.g., mail clients, IDEs, CRMs, task managers).
- Implementing responsive breakpoints adapting from desktop sidebars to mobile bottom navigation.
- Budgeting mobile viewports with native status bars, virtual keyboards, and home indicators.
- Managing contextual overlays: side sheets, inspector panels, slide-overs, and modals.
---
## 🏗️ Canonical Web App Shell Topologies
### 1. The Standard Vertical Sidebar Layout
- **Structure**:
- `Sidebar` (fixed 240-280px width, sticky or full-height).
- `Header` (fixed 56-64px height, search, notifications, user avatar).
- `Main Content` (fluid `1fr`, scrollable area).
- **Collapsible Behaviors**:
- Full expanded state (labels + icons).
- Compact Rail state (icon-only, 64px width, tooltips on hover).
- Hidden overlay drawer on tablet/mobile screens (`< 1024px`).
- Animating the expanded ↔ rail collapse, the overlay drawer and bottom-sheet entry/exit (FLIP, `@starting-style`, `<dialog>`): [ui-state-layout-transitions](../ui-state-layout-transitions/SKILL.md).
- **Best For**: Multi-tier B2B SaaS, management consoles, cloud provider portals.
### 2. Navigation Rail + Contextual Sidebar (Dual-Nav)
- **Structure**:
- `Primary Rail` (48-64px, high-level domains: Code, Issues, Settings).
- `Secondary Tree / List Sidebar` (200-240px, hierarchical files, project boards, channels).
- `Workspace Canvas` (`1fr`, primary editing pane).
- **Cognitive Flow**: Decouples global context switching from local item navigation.
- **Best For**: Developer IDEs, Slack-like team chat, Notion-like document trees, complex design editors.
### 3. Master-Detail (Split-Pane Architecture)
- **Structure**:
- `Pane A (List/Index)`: 300-360px wide, list of items with summary badges, search, and sort.
- `Pane B (Detail View)`: Fluid width, full item inspector, actions, editing form.
- `Pane C (Optional Context Inspector)`: 280-320px collapsible right panel for metadata, audit logs, or related records.
- **Keyboard Navigation**: Arrow keys (`↑`/`↓`) traverse Pane A; `Enter` focuses Pane B; `Escape` returns to list.
- **Best For**: Email clients, ticket triage systems, support desks, code review interfaces.
### 4. Fluid Canvas with Floating Toolbars
- **Structure**:
- Infinite or bounded canvas taking 100% of the viewport.
- Floating pill toolbars pinned to top-center, bottom-center, or left dock.
- Floating panels for layers, properties, and tool inspectors.
- **Best For**: Visual editors, whiteboards, node-graph workflows, mapping interfaces.
---
## 📱 Mobile Layout Architecture & Touch Ergonomics
Mobile ergonomics are dictated by hardware physics and one-handed thumb interaction (Hoober, 2017).
```
+-----------------------+ ^
| [Safe Area / Status] | | Top Bar (Brand / Nav icon / Search)
+-----------------------+ v
| |
| | Hard-to-reach zone (Informational content)
| |
| PRIMARY VIEWPORT |
| |
| | Natural thumb reach (Interactive controls, cards)
+-----------------------+ ^
| [BOTTOM TAB BAR] | | Bottom Navigation (3-5 core destinations)
| [Home Indicator] | v Safe-area bottom padding
+-----------------------+
```
### Mobile Layout Rules
1. **Bottom Navigation Over Top Hamburgers**:
- Primary destinations (3 to 5 items) belong in a persistent Bottom Tab Bar (`height: 56-64px`).
- Active tab indicator with clear color accent and label.
2. **Safe-Area Inset Management**:
- Always respect OS notches and navigation bars:
```css
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
```
3. **Touch Target Dimensions**:
- Minimum interactive hit target is **44×44 CSS px** (Apple HIG) or **48×48 dp** (Google Material).
- Minimum visual padding of 8px between adjacent tap targets to prevent accidental triggers.
4. **Bottom Sheets (Action Drawers)**:
- Complex menus, filters, and forms on mobile should slide up from the bottom as interactive sheets rather than opening centered modal dialogues.
---
## 🖥️ Viewport Budgeting & Responsive Breakpoints
Implement progressive layout collapse across industry standard breakpoints:
| Viewport Width | Breakpoint | Layout Behavior |
| :--- | :--- | :--- |
| `< 640px` (Mobile) | `sm` | Single-pane stack; bottom nav bar; master/detail pushes to separate screen |
| `640px - 1023px` (Tablet) | `md` | Collapsed icon rail (64px); optional slide-over sheets; 2-column grids |
| `1024px - 1439px` (Desktop) | `lg` | Full expanded sidebar (240px); standard master-detail split |
| `≥ 1440px` (Wide Desktop) | `xl` | 3-pane layout unlocked (Sidebar + Master + Detail + Right Inspector) |
### Overflow & Scroll Boundaries
- **No Body Scroll in App Shells**: In desktop web apps, the `<body>` must have `overflow: hidden; height: 100vh;`.
- **Independent Scroll Containers**: The navigation sidebar, the list pane, and the content pane must each scroll independently with custom subtle scrollbars (`scrollbar-gutter: stable`).