Mobile First: Responsive Design Principles

Why Mobile First?

Over 60% of traffic comes from mobile devices. Mobile First is an approach where the design starts with the mobile version and then expands for larger screens.

Breakpoints

/* Mobile First approach */
.container {
  padding: 1rem;
  width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

/* Large Desktop */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}

Tailwind CSS Mobile First

// Mobile First with Tailwind
function ProductGrid() {
  return (
    <div className="
      grid
      grid-cols-1      /* Mobile: 1 column */
      sm:grid-cols-2   /* 640px+: 2 columns */
      md:grid-cols-3   /* 768px+: 3 columns */
      lg:grid-cols-4   /* 1024px+: 4 columns */
      gap-4
      md:gap-6
    ">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// Responsive navigation
function Navigation() {
  return (
    <nav className="
      fixed bottom-0 left-0 right-0  /* Mobile: bottom */
      md:static md:top-0             /* Desktop: top */
      bg-white shadow-lg
      md:shadow-none
    ">
      <div className="
        flex justify-around          /* Mobile: icons */
        md:justify-end md:gap-8      /* Desktop: text */
      ">
        <NavLink href="/" icon={Home}>Home</NavLink>
        <NavLink href="/catalog" icon={Grid}>Catalog</NavLink>
        <NavLink href="/cart" icon={ShoppingCart}>Cart</NavLink>
      </div>
    </nav>
  );
}

Touch-friendly elements

/* Minimum touch target size */
.button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

/* Enlarged click area */
.link {
  position: relative;
}

.link::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}

/* Disable hover on touch devices */
@media (hover: hover) {
  .button:hover {
    background-color: var(--primary-dark);
  }
}

Responsive images

import Image from 'next/image';

function HeroImage() {
  return (
    <picture>
      {/* Mobile */}
      <source
        media="(max-width: 767px)"
        srcSet="/hero-mobile.webp"
      />
      {/* Tablet */}
      <source
        media="(max-width: 1023px)"
        srcSet="/hero-tablet.webp"
      />
      {/* Desktop */}
      <Image
        src="/hero-desktop.webp"
        alt="Hero"
        width={1920}
        height={1080}
        priority
      />
    </picture>
  );
}

Performance on mobile

// Lazy loading of components
const HeavyComponent = dynamic(
  () => import('./HeavyComponent'),
  {
    loading: () => <Skeleton />,
    ssr: false
  }
);

// Conditional loading for mobile
function App() {
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <div>
      {isMobile ? (
        <MobileNavigation />
      ) : (
        <DesktopNavigation />
      )}
    </div>
  );
}

Designing for mobile devices

Mobile First means starting the design with mobile devices. Use media queries (@media) to expand to larger screens, not the other way around.

UX and UI for touch interfaces

UX (User Experience) on mobile needs special attention. UI elements must be large enough to tap (at least 44px). Buttons and forms are the basis of interaction.

CSS Layout

Flexbox and Grid are the basis of responsive layout. Flexbox for one-dimensional layouts, Grid for two-dimensional. Proper font sizes (16px+) prevent zoom on iOS.

PWA and offline

Progressive Web Apps work offline thanks to Service Workers. This improves the app’s availability in poor-connectivity conditions.

Conclusion

Mobile First isn’t just a technique, it’s a way of thinking. Start from the constraints of mobile devices, and your design will work everywhere.

If an interface is comfortable on a small screen, it will be comfortable everywhere.

Gestures and animations

import { useSwipeable } from 'react-swipeable';

function SwipeableCard({ onDismiss, children }) {
  const handlers = useSwipeable({
    onSwipedLeft: () => onDismiss('left'),
    onSwipedRight: () => onDismiss('right'),
    trackMouse: true,
  });

  return (
    <div {...handlers} className="touch-pan-y">
      {children}
    </div>
  );
}

// CSS animations for mobile
.card {
  transition: transform 0.3s ease;
  will-change: transform;
}

.card:active {
  transform: scale(0.98);
}

Optimizing forms for mobile

// Correct input types for mobile keyboards
<input type="email" inputMode="email" autoComplete="email" />
<input type="tel" inputMode="tel" autoComplete="tel" />
<input type="number" inputMode="numeric" pattern="[0-9]*" />
<input type="search" inputMode="search" />

// Disable zoom on focus (iOS)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

// Or via CSS (better)
input, select, textarea {
  font-size: 16px; /* Prevents zoom on iOS */
}

PWA for mobile

// manifest.json
{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#6366f1",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}