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

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

2.2 KiB Raw Permalink Blame History Unescape Escape

Mobile-First UI Design

Overview

Design

Principles

Key Screens

Navigation

Styling

Plan

Test

2.2 KiB

Raw Permalink Blame History