mobile-design

name	mobile-design
description	Mobile-first responsive design patterns, touch interaction guidelines, and adaptive layouts. Use when: designing for mobile viewports, implementing responsive breakpoints, optimizing touch targets, creating adaptive navigation, handling mobile-specific UX like swipe gestures or bottom sheets.

Mobile Design

When to Use

• Designing or reviewing layouts for mobile viewports
• Implementing responsive breakpoints and fluid grids
• Sizing touch targets and interactive elements
• Creating adaptive navigation patterns (hamburger menus, bottom nav, tab bars)
• Handling mobile-specific interactions (swipe, pull-to-refresh, long press)

Responsive Breakpoints

Use a mobile-first approach with min-width media queries:

Breakpoint	Target	Min-width
Default	Mobile portrait	0
sm	Mobile landscape	576px
md	Tablet	768px
lg	Desktop	992px
xl	Large desktop	1200px

Touch Target Sizing

• Minimum touch target: 44x44 CSS pixels (WCAG 2.5.8)
• Recommended touch target: 48x48 CSS pixels (Material Design)
• Minimum spacing between targets: 8px
• Interactive text links: ensure adequate padding to meet target size

Mobile Layout Patterns

Single Column

Default for mobile — content stacks vertically in reading order.

Bottom Navigation

• Use for 3-5 top-level destinations
• Keep labels short (1-2 words)
• Highlight the active item
• Avoid hiding primary navigation behind a hamburger menu on mobile

Cards and Lists

• Cards at full viewport width on mobile with internal padding
• List items with adequate row height (minimum 48px)
• Use swipe actions sparingly — provide visible alternatives

Typography

• Base font size: 16px minimum (prevents iOS zoom on input focus)
• Line height: 1.4-1.6 for body text
• Limit line length to ~60-70 characters on larger viewports
• Use relative units (rem, em) over fixed px

Images and Media

• Use srcset and sizes for responsive images
• Serve appropriately sized images per viewport
• Use aspect-ratio CSS to prevent layout shift
• Lazy-load images below the fold with loading="lazy"

Forms on Mobile

• Use appropriate inputmode attributes (numeric, email, tel, url)
• Stack form fields vertically
• Place labels above inputs, not beside
• Use large tap targets for submit buttons (full width on mobile)
• Avoid multi-column form layouts on small screens

Performance Considerations

• Minimize DOM depth for scrolling performance
• Use will-change sparingly for animated elements
• Avoid fixed elements that cause repaint during scroll
• Test on real devices with throttled CPU and network

Procedure

1. Start with mobile viewport (320-375px width)
2. Build the layout with semantic HTML and flexible CSS
3. Add breakpoints only when the layout breaks — not at arbitrary device widths
4. Test touch targets meet minimum 44x44px
5. Verify text readability without pinch-to-zoom
6. Test with device emulation AND real devices when possible