Mobile-First Design: Complete Guide for 2026

/* Mobile-first base styles (320px+) */
.container {
  width: 100%;
  padding: 1rem;
}
 
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
 
.nav {
  flex-direction: column;
}
 
/* Tablet styles (768px+) */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
  
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .nav {
    flex-direction: row;
  }
}
 
/* Desktop styles (1024px+) */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
  
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
 
/* Large desktop (1280px+) */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
  
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Responsive font sizes without media queries */
:root {
  /* Minimum size at 320px viewport */
  /* Maximum size at 1920px viewport */
  --font-size-base: clamp(1rem, 0.875rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.25rem + 1.5vw, 2rem);
  --font-size-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --font-size-3xl: clamp(2.5rem, 2rem + 3vw, 4rem);
}
 
body {
  font-size: var(--font-size-base);
  line-height: 1.6;
}
 
h1 {
  font-size: var(--font-size-3xl);
  line-height: 1.2;
}
 
h2 {
  font-size: var(--font-size-2xl);
  line-height: 1.3;
}
 
h3 {
  font-size: var(--font-size-xl);
  line-height: 1.4;
}
 
/* Alternative: Using calc() with viewport units */
.heading {
  font-size: calc(1.5rem + 2vw);
}

/* Container queries for component-level responsiveness */
.card-container {
  container-type: inline-size;
}
 
.card {
  padding: 1rem;
}
 
/* When container is >400px */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
  }
}
 
/* When container is >600px */
@container (min-width: 600px) {
  .card {
    grid-template-columns: 300px 1fr;
    padding: 2rem;
  }
}

/* Minimum 44x44px touch targets (Apple HIG) */
/* 48x48px recommended (Material Design) */
.button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
  
  /* Ensure spacing between targets */
  margin: 8px;
}
 
/* Large touch targets for primary actions */
.primary-button {
  min-height: 56px;
  padding: 16px 32px;
  font-size: 1.125rem;
}
 
/* Icon-only buttons need extra padding */
.icon-button {
  width: 48px;
  height: 48px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

// Swipe gesture detection
class SwipeDetector {
  constructor(element, options = {}) {
    this.element = element
    this.threshold = options.threshold || 50
    this.maxTime = options.maxTime || 300
    
    this.startX = 0
    this.startY = 0
    this.startTime = 0
    
    this.element.addEventListener('touchstart', this.handleStart.bind(this), { passive: true })
    this.element.addEventListener('touchend', this.handleEnd.bind(this), { passive: true })
  }
  
  handleStart(e) {
    const touch = e.touches[0]
    this.startX = touch.clientX
    this.startY = touch.clientY
    this.startTime = Date.now()
  }
  
  handleEnd(e) {
    const touch = e.changedTouches[0]
    const deltaX = touch.clientX - this.startX
    const deltaY = touch.clientY - this.startY
    const deltaTime = Date.now() - this.startTime
    
    // Check if swipe meets threshold
    if (Math.abs(deltaX) > this.threshold && deltaTime < this.maxTime) {
      const direction = deltaX > 0 ? 'right' : 'left'
      this.onSwipe(direction, deltaX)
    }
  }
  
  onSwipe(direction, distance) {
    // Override in subclass or pass callback
    const event = new CustomEvent('swipe', {
      detail: { direction, distance }
    })
    this.element.dispatchEvent(event)
  }
}
 
// Usage
const carousel = document.querySelector('.carousel')
new SwipeDetector(carousel)
 
carousel.addEventListener('swipe', (e) => {
  const { direction } = e.detail
  if (direction === 'left') {
    nextSlide()
  } else {
    previousSlide()
  }
})

/* Remove hover effects on touch devices */
@media (hover: hover) {
  .button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
  }
}
 
/* Active state for both touch and mouse */
.button:active {
  background-color: #004494;
  transform: translateY(0);
}
 
/* Tap highlight on mobile */
.button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}
 
/* Prevent double-tap zoom on buttons */
.button {
  touch-action: manipulation;
}

<nav class="mobile-nav">
  <button class="hamburger" aria-label="Toggle menu" aria-expanded="false">
    <span></span>
    <span></span>
    <span></span>
  </button>
  
  <div class="nav-menu" hidden>
    <a href="/">Home</a>
    <a href="/products">Products</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

.mobile-nav {
  position: relative;
}
 
.hamburger {
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
 
.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.3s;
}
 
/* Animated X when open */
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
 
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
 
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
 
.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%;
  max-width: 300px;
  height: 100vh;
  background: white;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  transition: transform 0.3s ease-out;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
 
.nav-menu:not([hidden]) {
  transform: translateX(0);
}
 
/* Overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
 
.nav-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
 
/* Desktop: Regular horizontal nav */
@media (min-width: 768px) {
  .hamburger {
    display: none;
  }
  
  .nav-menu {
    position: static;
    flex-direction: row;
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    transform: none;
    padding: 0;
  }
  
  .nav-menu:not([hidden]) {
    display: flex;
  }
}

// Hamburger menu functionality
const hamburger = document.querySelector('.hamburger')
const navMenu = document.querySelector('.nav-menu')
const overlay = document.createElement('div')
overlay.className = 'nav-overlay'
document.body.appendChild(overlay)
 
hamburger.addEventListener('click', () => {
  const isExpanded = hamburger.getAttribute('aria-expanded') === 'true'
  
  hamburger.setAttribute('aria-expanded', !isExpanded)
  navMenu.hidden = isExpanded
  overlay.classList.toggle('active')
  
  // Prevent body scroll when menu open
  document.body.style.overflow = isExpanded ? '' : 'hidden'
})
 
overlay.addEventListener('click', () => {
  hamburger.click()
})

<nav class="bottom-tab-bar">
  <a href="/" class="tab active" aria-current="page">
    <svg><!-- Home icon --></svg>
    <span>Home</span>
  </a>
  <a href="/search" class="tab">
    <svg><!-- Search icon --></svg>
    <span>Search</span>
  </a>
  <a href="/favorites" class="tab">
    <svg><!-- Heart icon --></svg>
    <span>Favorites</span>
  </a>
  <a href="/profile" class="tab">
    <svg><!-- User icon --></svg>
    <span>Profile</span>
  </a>
</nav>

.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: white;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
 
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.2s;
}
 
.tab svg {
  width: 24px;
  height: 24px;
}
 
.tab span {
  font-size: 0.75rem;
}
 
.tab.active {
  color: #3b82f6;
}
 
/* Add spacing for bottom nav */
body {
  padding-bottom: 64px;
}
 
/* Hide on desktop */
@media (min-width: 768px) {
  .bottom-tab-bar {
    display: none;
  }
  
  body {
    padding-bottom: 0;
  }
}

<form class="mobile-form">
  <!-- Email with correct keyboard -->
  <input 
    type="email" 
    inputmode="email"
    autocomplete="email"
    placeholder="Email address"
    required
  >
  
  <!-- Phone number with numeric keyboard -->
  <input 
    type="tel" 
    inputmode="tel"
    autocomplete="tel"
    placeholder="Phone number"
    pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  >
  
  <!-- Number with decimal keyboard -->
  <input 
    type="number" 
    inputmode="decimal"
    placeholder="Amount"
    step="0.01"
  >
  
  <!-- Search with search keyboard -->
  <input 
    type="search" 
    inputmode="search"
    placeholder="Search products"
  >
  
  <!-- URL with URL keyboard -->
  <input 
    type="url" 
    inputmode="url"
    autocomplete="url"
    placeholder="Website"
  >
</form>

/* Mobile-friendly form styles */
.mobile-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}
 
.mobile-form input,
.mobile-form select,
.mobile-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-size: 16px; /* Prevents zoom on iOS */
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
 
.mobile-form input:focus,
.mobile-form select:focus,
.mobile-form textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
 
/* Large submit button */
.mobile-form button[type="submit"] {
  width: 100%;
  min-height: 56px;
  padding: 16px;
  font-size: 1.125rem;
  font-weight: 600;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
 
/* Labels above inputs on mobile */
.mobile-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

<!-- Native date picker (best on mobile) -->
<input type="date" name="birthday" max="2026-01-09">
 
<!-- Time picker -->
<input type="time" name="appointment">
 
<!-- Color picker -->
<input type="color" name="theme-color" value="#3b82f6">
 
<!-- File upload optimized for mobile -->
<input 
  type="file" 
  accept="image/*" 
  capture="environment"
  multiple
>
 
<!-- Auto-complete with datalist -->
<input 
  type="text" 
  list="countries" 
  name="country"
  autocomplete="country-name"
>
<datalist id="countries">
  <option value="United States">
  <option value="Canada">
  <option value="United Kingdom">
  <option value="Australia">
</datalist>

// Critical CSS inline in <head>
const criticalCSS = `
  body { margin: 0; font-family: system-ui; }
  .hero { min-height: 100vh; }
  /* Other above-the-fold styles */
`
 
// Lazy load non-critical CSS
function loadCSS(href) {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = href
  link.media = 'print'
  link.onload = () => { link.media = 'all' }
  document.head.appendChild(link)
}
 
loadCSS('/css/non-critical.css')

// Detect connection quality
function getConnectionQuality() {
  const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection
  
  if (!connection) return 'unknown'
  
  const { effectiveType, saveData } = connection
  
  if (saveData) return 'save-data'
  if (effectiveType === 'slow-2g' || effectiveType === '2g') return 'poor'
  if (effectiveType === '3g') return 'moderate'
  return 'good'
}
 
// Adapt content based on connection
const quality = getConnectionQuality()
 
if (quality === 'poor' || quality === 'save-data') {
  // Load low-res images
  document.querySelectorAll('img[data-src-low]').forEach(img => {
    img.src = img.dataset.srcLow
  })
} else {
  // Load high-res images
  document.querySelectorAll('img[data-src]').forEach(img => {
    img.src = img.dataset.src
  })
}

// Check for feature support before using
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
}
 
if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver(callback)
  observer.observe(element)
} else {
  // Fallback: load immediately
  loadContent()
}
 
// CSS feature detection
if (CSS.supports('display', 'grid')) {
  element.classList.add('grid-layout')
} else {
  element.classList.add('flexbox-layout')
}

<!-- Progressive enhancement for video -->
<video controls poster="thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  
  <!-- Fallback for browsers without video support -->
  <p>
    Your browser doesn't support HTML5 video.
    <a href="video.mp4">Download the video</a>
  </p>
</video>