Mobile-First Design: Best Practices für 2025

// ✅ Mobile-First: Essentials first
<article>
  <h1>Haupttitel</h1>
  <p>Kerninhalt sofort sichtbar</p>
 
  {/* Desktop: Zusätzliche Features */}
  <aside className="hidden md:block">
    <RelatedArticles />
  </aside>
</article>

/* Base: Mobile */
.container {
  padding: 1rem;
}
 
/* Enhanced: Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 768px;
    margin: 0 auto;
  }
}
 
/* Enhanced: Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    padding: 3rem;
  }
}

// ✅ Touch-optimiert: Min 44x44px tap targets
<button className="min-w-11 min-h-11 px-4 py-2">
  Click
</button>
 
// ✅ Touch feedback
<button className="active:scale-95 transition-transform">
  Press me
</button>
 
// ✅ Swipe gestures
<div
  onTouchStart={handleTouchStart}
  onTouchMove={handleTouchMove}
  onTouchEnd={handleTouchEnd}
>
  Swipe content
</div>

export function ResponsiveLayout() {
  return (
    <div className="container mx-auto px-4">
      {/* Mobile: Stack */}
      {/* Tablet: 2 columns */}
      {/* Desktop: 3 columns */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <Card />
        <Card />
        <Card />
      </div>
 
      {/* Responsive Typography */}
      <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold">
        Responsive Heading
      </h1>
 
      {/* Responsive Spacing */}
      <div className="py-8 md:py-12 lg:py-16">
        Content
      </div>
    </div>
  )
}

export function ProductCard() {
  return (
    <div className="@container">
      {/* Layout ändert sich basierend auf Container-Breite */}
      <div className="@sm:flex @lg:grid @lg:grid-cols-2">
        <Image src="/product.jpg" />
        <div className="p-4">
          <h3 className="@sm:text-lg @lg:text-xl">Product</h3>
        </div>
      </div>
    </div>
  )
}

'use client'
 
import dynamic from 'next/dynamic'
 
// Heavy components lazy laden
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <ChartSkeleton />,
  ssr: false, // Nur client-side
})
 
export function Dashboard() {
  const [showChart, setShowChart] = useState(false)
 
  return (
    <div>
      <button onClick={() => setShowChart(true)}>
        Show Chart
      </button>
      {showChart && <HeavyChart />}
    </div>
  )
}

<Image
  src="/hero-mobile.jpg"
  width={768}
  height={1024}
  alt="Hero"
  // Mobile-optimiert
  sizes="100vw"
  priority
  quality={85}
/>

// ❌ Client Component mit viel JS
'use client'
export function HeavyComponent() {
  const [data, setData] = useState([])
  // Viel client-side Logic...
}
 
// ✅ Server Component - 0 KB JS
export async function LightComponent() {
  const data = await getData()
  return <StaticView data={data} />
}

'use client'
 
export function SwipeableCard() {
  const [startX, setStartX] = useState(0)
  const [currentX, setCurrentX] = useState(0)
 
  const handleTouchStart = (e: TouchEvent) => {
    setStartX(e.touches[0].clientX)
  }
 
  const handleTouchMove = (e: TouchEvent) => {
    setCurrentX(e.touches[0].clientX - startX)
  }
 
  const handleTouchEnd = () => {
    if (Math.abs(currentX) > 100) {
      // Swipe detected
      currentX > 0 ? onSwipeRight() : onSwipeLeft()
    }
    setCurrentX(0)
  }
 
  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      style={{ transform: `translateX(${currentX}px)` }}
      className="transition-transform"
    >
      Card content
    </div>
  )
}

export function PullToRefresh({ children, onRefresh }) {
  const [pulling, setPulling] = useState(false)
  const [pullDistance, setPullDistance] = useState(0)
 
  const handleTouchStart = (e) => {
    if (window.scrollY === 0) {
      setPulling(true)
    }
  }
 
  const handleTouchMove = (e) => {
    if (pulling) {
      setPullDistance(e.touches[0].clientY)
    }
  }
 
  const handleTouchEnd = () => {
    if (pullDistance > 80) {
      onRefresh()
    }
    setPulling(false)
    setPullDistance(0)
  }
 
  return (
    <div
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      {pulling && (
        <div className="text-center py-4">
          <RefreshIcon className={pullDistance > 80 ? 'animate-spin' : ''} />
        </div>
      )}
      {children}
    </div>
  )
}

'use client'
 
export function MobileNav() {
  const pathname = usePathname()
 
  return (
    <nav className="fixed bottom-0 left-0 right-0 bg-white border-t md:hidden">
      <div className="flex justify-around">
        <Link href="/" className={pathname === '/' ? 'text-primary' : ''}>
          <Home className="w-6 h-6" />
          <span className="text-xs">Home</span>
        </Link>
 
        <Link href="/search">
          <Search className="w-6 h-6" />
          <span className="text-xs">Search</span>
        </Link>
 
        <Link href="/profile">
          <User className="w-6 h-6" />
          <span className="text-xs">Profile</span>
        </Link>
      </div>
    </nav>
  )
}

export function MobileMenu() {
  const [isOpen, setIsOpen] = useState(false)
 
  return (
    <>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="md:hidden"
        aria-label="Toggle menu"
      >
        {isOpen ? <X /> : <Menu />}
      </button>
 
      {isOpen && (
        <div className="fixed inset-0 bg-white z-50 md:hidden">
          <nav className="p-4">
            <Link href="/" onClick={() => setIsOpen(false)}>
              Home
            </Link>
            {/* More links */}
          </nav>
        </div>
      )}
    </>
  )
}

# iOS
pnpm dev
# Visit on iPhone via network
 
# Android
pnpm dev
# Visit on Android via network
 
# Browserstack
# Test on 50+ real devices

# Chrome DevTools
# Cmd+Shift+M (Mac) / Ctrl+Shift+M (Windows)
 
# Viewport Sizes
iPhone 14 Pro: 393 x 852
iPad Pro: 1024 x 1366
Samsung S23: 360 x 780