Mobile UI Standards

Mobile-first design principles with compact, optimized layouts for small screens.

Core Principle: Mobile-First Design

ALWAYS implement mobile-first design principle.

Start with mobile, then scale up to desktop:

/* ✅ Mobile-first approach */
.container {
  /* Base styles for mobile */
  padding: 12px;
  font-size: 14px;
}

@media (min-width: 768px) {
  /* Tablet and larger */
  .container {
    padding: 24px;
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  /* Desktop */
  .container {
    padding: 32px;
    font-size: 18px;
  }
}

/* ❌ Desktop-first (avoid) */
.container {
  /* Desktop styles */
  padding: 32px;
  font-size: 18px;
}

@media (max-width: 1024px) {
  /* Scales down */
  .container {
    padding: 24px;
  }
}

Mobile Screen Optimization

Make Elements Compact

Mobile screens are small - elements must be compact:

Bad - Too large for mobile:

<div className="p-8 my-6">
  <h1 className="text-4xl font-bold mb-6">
    Title
  </h1>
  <p className="text-xl leading-relaxed">
    Content with lots of spacing
  </p>
  <button className="px-8 py-4 text-lg">
    Click Me
  </button>
</div>

Good - Compact for mobile:

<div className="p-3 my-2">
  <h1 className="text-xl font-bold mb-2">
    Title
  </h1>
  <p className="text-sm leading-snug">
    Content with compact spacing
  </p>
  <button className="px-4 py-2 text-sm">
    Click Me
  </button>
</div>

Font Size Guidelines

Mobile font sizes should be smaller:

// Font size scale for mobile
const mobileFontSizes = {
  xs: '10px',    // Small labels, captions
  sm: '12px',    // Secondary text, helper text
  base: '14px',  // Body text (default)
  lg: '16px',    // Emphasized text
  xl: '18px',    // Subheadings
  '2xl': '20px', // Headings
  '3xl': '24px', // Large headings
  '4xl': '28px'  // Hero text (max for mobile)
};

// Desktop can go larger
const desktopFontSizes = {
  xs: '12px',
  sm: '14px',
  base: '16px',
  lg: '18px',
  xl: '20px',
  '2xl': '24px',
  '3xl': '30px',
  '4xl': '36px',
  '5xl': '48px'
};

Tailwind CSS mobile-first example:

// Responsive font sizes
<h1 className="text-2xl md:text-3xl lg:text-4xl">
  Heading
</h1>

<p className="text-sm md:text-base lg:text-lg">
  Body text
</p>

<span className="text-xs md:text-sm">
  Small text
</span>

Spacing Guidelines

Mobile spacing should be tighter:

// Mobile spacing scale
const mobileSpacing = {
  xs: '4px',
  sm: '8px',
  md: '12px',
  lg: '16px',
  xl: '20px',
  '2xl': '24px'
};

// Desktop spacing can be more generous
const desktopSpacing = {
  xs: '8px',
  sm: '12px',
  md: '16px',
  lg: '24px',
  xl: '32px',
  '2xl': '48px'
};

Example:

// Mobile-first spacing
<div className="space-y-2 md:space-y-4 lg:space-y-6">
  <Card className="p-3 md:p-4 lg:p-6" />
  <Card className="p-3 md:p-4 lg:p-6" />
</div>

Touch Target Sizes

Minimum touch target: 44x44 pixels (iOS) / 48x48 pixels (Android)

Bad - Touch targets too small:

<button className="px-2 py-1 text-xs">
  Tap Me
</button>
// Results in ~30x24px button - too small!

Good - Adequate touch targets:

<button className="min-h-[44px] min-w-[44px] px-4 py-2">
  Tap Me
</button>
// At least 44x44px for comfortable tapping

Icon buttons:

// Bad
<button className="p-1">
  <Icon size={16} />
</button>

// Good
<button className="p-3 min-h-[44px] min-w-[44px] flex items-center justify-center">
  <Icon size={20} />
</button>

Mobile Layout Patterns

Stack on Mobile, Row on Desktop

// Stack vertically on mobile, horizontal on larger screens
<div className="flex flex-col md:flex-row gap-3 md:gap-4">
  <div className="flex-1">Column 1</div>
  <div className="flex-1">Column 2</div>
  <div className="flex-1">Column 3</div>
</div>

Full-Width on Mobile

// Full-width container on mobile, constrained on desktop
<div className="w-full md:max-w-2xl lg:max-w-4xl mx-auto px-4">
  Content
</div>

Hide/Show Based on Screen Size

// Mobile menu icon, desktop navigation
<div className="flex items-center">
  {/* Mobile menu button */}
  <button className="md:hidden">
    <MenuIcon />
  </button>

  {/* Desktop navigation */}
  <nav className="hidden md:flex gap-4">
    <Link href="/home">Home</Link>
    <Link href="/about">About</Link>
  </nav>
</div>

Compact Component Examples

Card Component

// Mobile-optimized card
function MobileCard({ title, description, action }: CardProps) {
  return (
    <div className="
      p-3 md:p-4 lg:p-6
      rounded-lg
      space-y-2 md:space-y-3
    ">
      <h3 className="text-base md:text-lg font-semibold">
        {title}
      </h3>
      <p className="text-sm md:text-base text-gray-600">
        {description}
      </p>
      <button className="
        px-4 py-2
        text-sm md:text-base
        min-h-[44px]
      ">
        {action}
      </button>
    </div>
  );
}

Form Inputs

// Mobile-friendly form
function MobileForm() {
  return (
    <form className="space-y-3 md:space-y-4">
      <div>
        <label className="block text-sm md:text-base mb-1">
          Email
        </label>
        <input
          type="email"
          className="
            w-full
            px-3 py-2 md:px-4 md:py-3
            text-sm md:text-base
            min-h-[44px]
            rounded-md
          "
        />
      </div>

      <button className="
        w-full
        px-4 py-3
        text-sm md:text-base
        min-h-[44px]
      ">
        Submit
      </button>
    </form>
  );
}

Navigation

// Mobile bottom nav, desktop sidebar
function Navigation() {
  return (
    <>
      {/* Mobile bottom nav */}
      <nav className="
        md:hidden
        fixed bottom-0 left-0 right-0
        flex justify-around
        p-2
        bg-white border-t
      ">
        <NavItem icon={<Home />} label="Home" />
        <NavItem icon={<Search />} label="Search" />
        <NavItem icon={<User />} label="Profile" />
      </nav>

      {/* Desktop sidebar */}
      <aside className="
        hidden md:block
        w-64
        p-4
        space-y-2
      ">
        <NavLink href="/">Home</NavLink>
        <NavLink href="/search">Search</NavLink>
        <NavLink href="/profile">Profile</NavLink>
      </aside>
    </>
  );
}

Typography for Mobile

Line Length

Mobile line length should be shorter:

// Constrain text width for readability
<p className="max-w-full md:max-w-prose text-sm md:text-base">
  Long paragraphs of text should be constrained to prevent
  lines from becoming too long on mobile devices.
</p>

Line Height

Tighter line height on mobile:

<p className="
  leading-snug md:leading-normal
  text-sm md:text-base
">
  Text content with responsive line height
</p>

Text Truncation

Truncate long text on mobile:

// Single line truncation
<h3 className="truncate text-sm md:text-base">
  Very long title that gets truncated on small screens
</h3>

// Multi-line truncation
<p className="line-clamp-2 md:line-clamp-3 text-sm">
  Long description that gets clamped to 2 lines on mobile
  and 3 lines on larger screens.
</p>

Images and Media

Responsive Images

// Different image sizes for different screens
<img
  src="/image-mobile.jpg"
  srcSet="
    /image-mobile.jpg 640w,
    /image-tablet.jpg 1024w,
    /image-desktop.jpg 1920w
  "
  sizes="
    (max-width: 640px) 640px,
    (max-width: 1024px) 1024px,
    1920px
  "
  className="w-full h-auto"
  alt="Responsive image"
/>

Aspect Ratios

// Maintain aspect ratio across devices
<div className="
  aspect-square md:aspect-video
  bg-gray-200
  rounded-lg
  overflow-hidden
">
  <img src="/image.jpg" className="w-full h-full object-cover" />
</div>

Performance for Mobile

Lazy Loading

// Lazy load images on mobile
<img
  src="/image.jpg"
  loading="lazy"
  className="w-full h-auto"
/>

Reduce Bundle Size for Mobile

// Dynamic imports for mobile
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Spinner />,
  ssr: false // Don't load on mobile if not needed
});

Accessibility on Mobile

Readable Font Sizes

Never go below 12px:

// Minimum 12px for readability
<p className="text-xs">  {/* 12px on mobile */}
  Small text but still readable
</p>

Contrast Ratios

Higher contrast for mobile (outdoor viewing):

// Good contrast for mobile
<div className="bg-white text-gray-900"> {/* High contrast */}
  Content
</div>

// Avoid low contrast
<div className="bg-gray-100 text-gray-400"> {/* ❌ Too low */}
  Hard to read in sunlight
</div>

Mobile-First Checklist

Before deploying mobile UI:

• [ ] Started with mobile styles, scaled up to desktop
• [ ] Font sizes are appropriate for mobile (14px base)
• [ ] Elements are compact and space-efficient
• [ ] Touch targets are at least 44x44px
• [ ] Spacing is tighter on mobile
• [ ] Layout stacks vertically on small screens
• [ ] Text is readable (min 12px)
• [ ] Images are responsive and optimized
• [ ] Navigation works on small screens
• [ ] Forms are easy to fill on mobile
• [ ] Tested on actual mobile devices
• [ ] Performance is good on slower connections

Responsive Design Breakpoints

Standard breakpoints:

const breakpoints = {
  sm: '640px',   // Mobile landscape
  md: '768px',   // Tablet
  lg: '1024px',  // Desktop
  xl: '1280px',  // Large desktop
  '2xl': '1536px' // Extra large desktop
};

Tailwind CSS usage:

<div className="
  w-full          {/* Mobile: 100% width */}
  sm:w-auto       {/* Small: auto width */}
  md:w-1/2        {/* Medium: 50% width */}
  lg:w-1/3        {/* Large: 33% width */}
">
  Responsive width
</div>

Common Mobile UI Patterns

Bottom Sheet / Modal

// Mobile: slide from bottom, Desktop: center modal
function Modal({ children, isOpen }: ModalProps) {
  return (
    <div className={`
      fixed inset-0 z-50
      ${isOpen ? 'block' : 'hidden'}
    `}>
      <div className="absolute inset-0 bg-black/50" />
      <div className="
        absolute
        bottom-0 md:bottom-auto md:top-1/2 md:left-1/2
        md:-translate-x-1/2 md:-translate-y-1/2
        w-full md:w-auto md:min-w-[400px] md:max-w-2xl
        bg-white
        rounded-t-2xl md:rounded-2xl
        p-4 md:p-6
      ">
        {children}
      </div>
    </div>
  );
}

Pull to Refresh

// Mobile-specific interaction
function MobileList() {
  const [isRefreshing, setIsRefreshing] = useState(false);

  const handleRefresh = async () => {
    setIsRefreshing(true);
    await fetchData();
    setIsRefreshing(false);
  };

  return (
    <div className="md:hidden"> {/* Mobile only */}
      <PullToRefresh onRefresh={handleRefresh}>
        <ListItems />
      </PullToRefresh>
    </div>
  );
}

Summary: Think Mobile First

Golden Rules:

1. Mobile-First Always

   • Start with mobile styles
   • Scale up to desktop
   • Test on real devices

2. Compact and Efficient

   • Smaller fonts (14px base)
   • Tighter spacing
   • Efficient use of space

3. Touch-Friendly

   • 44x44px minimum touch targets
   • Adequate spacing between interactive elements
   • Clear visual feedback

4. Performance Matters

   • Optimize images
   • Lazy load content
   • Reduce bundle size

5. Responsive Everything

   • Flexible layouts
   • Responsive typography
   • Adaptive components

Remember: Mobile screens are small. Every pixel counts. Make it compact, make it clear, make it touch-friendly.