Mobile First: Принципы адаптивного дизайна

Почему Mobile First?

Более 60% трафика приходит с мобильных устройств. Mobile First — это подход, при котором дизайн начинается с мобильной версии, а затем расширяется для больших экранов.

Breakpoints

/* Mobile First подход */
.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 с Tailwind
function ProductGrid() {
  return (
    <div className="
      grid 
      grid-cols-1      /* Mobile: 1 колонка */
      sm:grid-cols-2   /* 640px+: 2 колонки */
      md:grid-cols-3   /* 768px+: 3 колонки */
      lg:grid-cols-4   /* 1024px+: 4 колонки */
      gap-4 
      md:gap-6
    ">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

// Адаптивная навигация
function Navigation() {
  return (
    <nav className="
      fixed bottom-0 left-0 right-0  /* Mobile: снизу */
      md:static md:top-0             /* Desktop: сверху */
      bg-white shadow-lg
      md:shadow-none
    ">
      <div className="
        flex justify-around          /* Mobile: иконки */
        md:justify-end md:gap-8      /* Desktop: текст */
      ">
        <NavLink href="/" icon={Home}>Главная</NavLink>
        <NavLink href="/catalog" icon={Grid}>Каталог</NavLink>
        <NavLink href="/cart" icon={ShoppingCart}>Корзина</NavLink>
      </div>
    </nav>
  );
}

Touch-friendly элементы

/* Минимальный размер для touch */
.button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

/* Увеличенная область клика */
.link {
  position: relative;
}

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

/* Отключение hover на touch устройствах */
@media (hover: hover) {
  .button:hover {
    background-color: var(--primary-dark);
  }
}

Адаптивные изображения

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>
  );
}

Производительность на мобильных

// Ленивая загрузка компонентов
const HeavyComponent = dynamic(
  () => import('./HeavyComponent'),
  { 
    loading: () => <Skeleton />,
    ssr: false 
  }
);

// Условная загрузка для мобильных
function App() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  
  return (
    <div>
      {isMobile ? (
        <MobileNavigation />
      ) : (
        <DesktopNavigation />
      )}
    </div>
  );
}

Проектирование для мобильных устройств

Mobile First означает начинать дизайн с мобильных устройств. Используйте медиа-запросы (@media) для расширения на большие экраны, а не наоборот.

UX и UI для touch-интерфейсов

UX (User Experience) на мобильных требует особого внимания. UI элементы должны быть достаточно большими для касания (минимум 44px). Кнопки и формы — основа взаимодействия.

CSS Layout

Flexbox и Grid — основа адаптивной вёрстки. Flexbox для одномерных раскладок, Grid для двумерных. Правильные шрифты (размер 16px+) предотвращают зум на iOS.

PWA и оффлайн

Progressive Web Apps работают оффлайн благодаря Service Workers. Это улучшает доступность приложения в условиях плохой связи.

Заключение

Mobile First — это не просто техника, это образ мышления. Начинайте с ограничений мобильных устройств, и ваш дизайн будет работать везде.

Если интерфейс удобен на маленьком экране, он будет удобен везде.

Жесты и анимации

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 анимации для мобильных
.card {
  transition: transform 0.3s ease;
  will-change: transform;
}

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

Оптимизация форм для мобильных

// Правильные типы input для мобильных клавиатур
<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" />

// Отключение зума при фокусе (iOS)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

// Или через CSS (лучше)
input, select, textarea {
  font-size: 16px; /* Предотвращает зум на iOS */
}

PWA для мобильных

// 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"
    }
  ]
}