← Back to Platform-Specific

Web-specific patterns and interactions with responsive design

RESPONSIVEWeb Responsive Patterns

Adaptation patterns for all screens and devices

📏 Standard Breakpoints

Mobile
< 640px
Tablet
640-1024px
Desktop
1024-1440px
Large
> 1440px

📱 Layout Patterns

Mobile First

Vertical stack

Desktop Layout

Horizontal grid

NAVWeb Navigation

Navigation patterns adapted to web interfaces

🖥️ Desktop Navigation

LOGO
HomeProductsAboutContact
  • • Persistent horizontal navigation
  • • User actions on the right
  • • Clickable logo to home

📱 Mobile Navigation

LOGO
Home
Products
About
Contact

Login
Sign Up
  • • Collapsible hamburger menu
  • • Full-screen or drawer navigation
  • • Priority actions visible
FORMSWeb Form Patterns

Patterns optimized for web input and accessibility

📝 Layout Patterns

✅ Validation Patterns

Please enter a valid email

✓ Valid format

Checking availability...

STATESWeb States & Loading

Loading state management and user feedback

⏳ Loading States

Skeleton Loading
Progress Bar

60% Complete

Spinner

❌ Error States

Connection Error

Unable to connect to server. Please try again.

No Results

No items match your search criteria.

A11YWeb Accessibility

Accessibility patterns for an inclusive experience

⌨️ Keyboard Navigation

  • Tab - Sequential navigation
  • Enter/Space - Activation
  • Arrow Keys - Group navigation
  • Escape - Modal closing
  • Focus Visible - Clear indicators

📱 Screen Readers

  • Alt Text - Image descriptions
  • ARIA Labels - Additional context
  • Headings - Hierarchical structure
  • Skip Links - Quick navigation
  • Live Regions - Dynamic announcements

🎨 Visual Design

  • Contrast - 4.5:1 minimum ratio
  • Size - 16px minimum
  • Color - Not sole indicator
  • Spacing - Touch areas 44px+
  • Motion - Respect prefers-reduced

📋 Forms A11Y

  • Labels - Associated with inputs
  • Required - Required fields
  • Validation - Clear error messages
  • Grouping - Fieldsets for groups
  • Instructions - Contextual help