forked from quic-issues/427e7578-d7bf-49c8-aee9-2dd999e25316
2.2 KiB
2.2 KiB
status, created, tags, priority, created_at, related, updated_at, transitions
| status | created | tags | priority | created_at | related | updated_at | transitions | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| archived | 2026-03-16 |
|
high | 2026-03-16T07:51:51.869Z |
|
2026-03-16T09:07:18.408Z |
|
Mobile-First UI Design
Status: 📦 Archived · Priority: High · Created: 2026-03-16 · Tags: ui, mobile
Overview
Design all UI mobile-first. The primary use case is people voting on their phones. Desktop is a secondary concern—layouts should scale up, not be shoehorned down.
Design
Principles
- Touch targets ≥ 44px
- Single-column layout on mobile; expand on larger screens
- Bottom navigation bar (thumb-friendly)
- Minimal chrome—content first
- System font stack for performance
Key Screens
- Home / Poll list: Cards showing poll title, status, vote count
- Create poll: Simple form, large inputs, toggle for anonymity
- Poll detail: Results visualization, vote buttons, participant list
- Profile: Edit name, bio, tags
- Poll management (owner/mod): User list, role controls, start/stop
Navigation
- Bottom tab bar: Home, Create (+), Profile
- Poll detail accessed by tapping a poll card
- Management accessed via gear icon within poll detail
Styling
- Tailwind CSS with mobile breakpoints as default
- Dark mode support (respects
prefers-color-scheme) - CSS transitions for state changes (vote submitted, poll status change)
Plan
- Design bottom tab navigation component
- Build poll list (home) with card layout
- Build poll creation form (mobile-optimized)
- Build poll detail view with results visualization
- Build profile edit page with tag management
- Build poll management panel (users, roles, lifecycle)
- Add dark mode toggle / system preference detection
- Test on various mobile viewport sizes
Test
- All touch targets meet 44px minimum
- Layout works on 320px–428px width (small to large phones)
- No horizontal scroll on any page
- Dark mode renders correctly
- Navigation is accessible via keyboard/screen reader