wow-design-wiki/mobile/mobile-patterns.md

---
title: Mobile Layout & Pattern Systems
created: 2026-07-03
updated: 2026-07-03
type: system
tags: [mobile, layout, patterns, responsive, touch, mobile-first]
sources:
  - https://www.uxpin.com/studio/blog/mobile-navigation-examples/
  - https://www.uxpin.com/studio/blog/mobile-navigation-patterns-pros-and-cons/
  - https://www.letsgroto.com/blog/mobile-first-responsive-design-best-practices
  - https://www.uxpin.com/studio/blog/best-practices-examples-of-excellent-responsive-design/
  - https://www.startdesigns.com/blog/responsive-web-design-2026/
  - https://www.jamesrossjr.com/blog/responsive-web-design-best-practices
  - https://dev.to/gerryleonugroho/responsive-design-breakpoints-2025-playbook-53ih
  - https://scrimba.com/articles/responsive-web-design-a-complete-guide-2026-2/
confidence: high
---

# Mobile Layout & Pattern Systems — Мобильные паттерны верстки

## 1. Базовые принципы

### Mobile-First: философия, а не техника

Мобильный дизайн — это дисциплина приоритизации. На экране 360×800px каждое пиксельное решение имеет вес.

| Принцип | Описание |
|---------|----------|
| **Progressive Enhancement** | Базовый контент → улучшенные компоненты → desktop-роскошь |
| **One-thumb Zone** | Основные интерактивные элементы в нижней половине экрана |
| **Content-First Flow** | Сначала контент, потом декор (всегда) |
| **Touch-Optimized** | 44×44px минимальный tap target, 8px gap между touch-элементами |
| **Performance-Aware** | Каждый миллисекунда LCP на мобильном важнее десктопа |

### Глобальные CSS Variables для Mobile

```css
:root {
  /* Safe Area — iOS notch, Android gesture bar */
  --safe-top: env(safe-area-inset-top, 20px);
  --safe-bottom: env(safe-area-inset-bottom, 34px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Typography — fluid on mobile */
  --text-xs: clamp(0.75rem, 2vw, 0.875rem);
  --text-sm: clamp(0.875rem, 2.5vw, 1rem);
  --text-base: clamp(1rem, 3vw, 1.125rem);
  --text-lg: clamp(1.125rem, 3.5vw, 1.25rem);
  --text-xl: clamp(1.25rem, 4vw, 1.5rem);

  /* Spacing — mobile-optimized */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Touch targets */
  --touch-min: 44px;
  --touch-gap: 8px;

  /* Breakpoints — content-based, not device-based */
  --bp-sm: 480px;   /* Large phones */
  --bp-md: 768px;   /* Tablets portrait */
  --bp-lg: 1024px;  /* Tablets landscape */
  --bp-xl: 1280px;  /* Desktops */
}
```

## 2. Breakpoints: Content-Based, Not Device-Based

### Современная система breakpoints

```css
/* Content-first breakpoints */
@media (min-width: 640px) { /* sm: Large phones, small tablets */ }
@media (min-width: 768px) { /* md: Tablets */ }
@media (min-width: 1024px) { /* lg: Small laptops */ }
@media (min-width: 1280px) { /* xl: Desktops */ }
@media (min-width: 1536px) { /* 2xl: Large desktops */ }

/* Container Queries — component-level адаптивность */
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
```

### Почему container queries > media queries

| Media Queries | Container Queries |
|---------------|-------------------|
| Адаптация по viewport | Адаптация по родительскому контейнеру |
| Один layout для всей страницы | Разные layout для разных компонентов |
| Медленные перерасчеты | Реакция на изменение контейнера |
| Не работает в iframe/grid | Работает везде |

## 3. Mobile Layout Patterns

### 3.1 Single-Column Stack (Базовый)

Все элементы вертикально, 16-24px gap между секциями.

```css
.mobile-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md) calc(var(--safe-bottom) + var(--space-lg)) var(--space-md);
}

.mobile-stack > * {
  width: 100%;
  max-width: 100%;
}
```

**Где использовать:** Лендинги, product pages, статьи, landing pages для мобайла.

### 3.2 Full-Bleed Sections

Секции, выходящие за границы контейнера, создают глубину.

```css
.full-bleed-section {
  margin-left: calc(var(--space-md) * -1);
  margin-right: calc(var(--space-md) * -1);
}

.full-bleed-section .container {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
```

**Где использовать:** Hero, testimonials, image-heavy sections.

### 3.3 Bento Grid (Mobile Adaptation)

На мобайле bento grid превращается в single-column с карточками разной высоты.

```css
.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.bento-card {
  min-height: var(--touch-min);
  padding: var(--space-lg);
  border-radius: var(--space-md);
}

.bento-card.featured {
  order: -1; /* featured card first */
}
```

### 3.4 Sticky Bottom CTA

Кнопка действия всегда видна внизу экрана, над клавиатурой.

```css
.sticky-bottom-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md) var(--space-lg) calc(var(--safe-bottom) + var(--space-md));
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  z-index: 100;
}

.sticky-bottom-cta button {
  min-height: var(--touch-min);
  width: 100%;
  font-size: var(--text-lg);
  font-weight: 600;
}
```

**Где использовать:** E-commerce, формы, booking-системы.

### 3.5 Card-First Layout

Контент карточками — основной паттерн мобайла.

```css
.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}

.card {
  background: var(--surface-1);
  border-radius: var(--space-md);
  padding: var(--space-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  /* Touch-friendly */
  min-height: var(--touch-min);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card__media {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--space-sm) var(--space-sm) 0 0;
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) var(--space-md);
}

.card__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.card__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
```

### 3.6 Masonry (Mobile)

```css
.masonry {
  columns: 2;
  column-gap: var(--space-sm);
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: var(--space-sm);
  border-radius: var(--space-sm);
}

/* Single column on very small screens */
@media (max-width: 360px) {
  .masonry { columns: 1; }
}
```

### 3.7 Swipeable Sections

CSS scroll-snap для горизонтальных секций.

```css
.swipe-section {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-md) var(--space-lg);
  scrollbar-width: none; /* Firefox */
}

.swipe-section::-webkit-scrollbar {
  display: none;
}

.swipe-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(280px, 80vw);
}
```

**Где использовать:** Карусели, product carousels, category pills, testimonial sliders.

## 4. Mobile Typography

### Fluid Typography Formula

```css
/* Base size scales proportionally */
--text-base-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);

/* Scale multiplier */
--scale-ratio: 1.25; /* Major Third */
--text-sm: calc(var(--text-base-size) / var(--scale-ratio));
--text-lg: calc(var(--text-base-size) * var(--scale-ratio));
--text-xl: calc(var(--text-lg) * var(--scale-ratio));
--text-2xl: calc(var(--text-xl) * var(--scale-ratio));
```

### Line Height & Readability

```css
/* Body text — line-height для мобильных */
.text-body {
  font-size: var(--text-base);
  line-height: 1.6; /* 1.5 на десктопе, 1.6 на мобайле */
  max-width: 65ch; /* Оптимальная ширина строки */
}

/* Headings — tighter on mobile */
.text-heading {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}
```

## 5. Touch-Optimized Components

### Touch-First Button

```css
.btn {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--space-md) var(--space-xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--text-base);
  font-weight: 600;
  border: none;
  border-radius: var(--space-md);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.2s ease;
  /* Touch feedback */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.btn:active {
  transform: scale(0.98);
}
```

### Touch-Optimized Form Input

```css
.form-input {
  min-height: var(--touch-min);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-base); /* Prevents iOS zoom on focus */
  border: 2px solid var(--border-1);
  border-radius: var(--space-md);
  background: var(--surface-1);
  transition: border-color 0.15s ease;
  width: 100%;
}

.form-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* iOS zoom prevention */
@media screen and (max-width: 480px) {
  .form-input {
    font-size: 16px; /* Minimum to prevent zoom on iOS */
  }
}
```

## 6. Mobile-First CSS Architecture

### Base → Component → Layout

```
styles/
  base/
    _reset.css        /* Normalize, box-sizing */
    _typography.css   /* Fluid type scale */
    _colors.css       /* CSS Variables, tokens */
    _accessibility.css /* Focus states, reduced motion */
  components/
    _buttons.css      /* Touch-optimized buttons */
    _inputs.css       /* Form fields */
    _cards.css        /* Card patterns */
    _nav.css          /* Mobile nav */
  layout/
    _stack.css        /* Single-column layout */
    _grid.css         /* Responsive grids */
    _sections.css     /* Section patterns */
  utilities/
    _spacing.css      /* Margin/padding utilities */
    _display.css      /* Flex, grid utilities */
    _accessibility.css /* sr-only, reduced-motion */
```

### Reduced Motion

```css
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

## 7. Performance Patterns for Mobile

### Image Optimization

```html
<!-- Progressive image loading -->
<img
  src="thumb.webp"
  srcset="small.webp 400w, medium.webp 800w, large.webp 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  loading="lazy"
  decoding="async"
  width="800"
  height="600"
  alt="Description"
  class="lazy-image"
/>

<style>
.lazy-image {
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
  animation: image-reveal 0.4s ease forwards;
  opacity: 0;
  aspect-ratio: attr(width) / attr(height);
}

@keyframes image-reveal {
  to { opacity: 1; }
}
</style>
```

### Critical CSS for Mobile

```css
/* Inlined in <head> for mobile LCP optimization */
/* Critical path CSS — < 14KB gzipped */

body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text-primary);
}

.hero {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
```

### Lazy Loading with Intersection Observer

```javascript
// Lightweight lazy loader (no dependencies)
const lazyObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const el = entry.target;
      if (el.dataset.src) {
        el.src = el.dataset.src;
      }
      if (el.dataset.bg) {
        el.style.backgroundImage = `url(${el.dataset.bg})`;
      }
      lazyObserver.unobserve(el);
    }
  });
}, {
  rootMargin: '200px 0px', // Start loading 200px before visible
  threshold: 0.01
});

document.querySelectorAll('.lazy').forEach(el => {
  lazyObserver.observe(el);
});
```

## 8. iOS & Android Specific Patterns

### Viewport Meta Tag

```html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
```

### iOS-Specific Fixes

```css
/* Prevent iOS Safari bounce effect */
body {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Full viewport height fix for iOS */
.mobile-container {
  min-height: 100dvh; /* Dynamic viewport height */
}

/* Prevent pull-to-refresh on specific elements */
.prevent-pull-to-refresh {
  overscroll-behavior-y: none;
}
```

### Dark Mode (iOS & Android)

```css
/* System dark mode — auto-applied */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.7);
    --surface-1: #1c1c1e;
    --surface-2: #2c2c2e;
    --border-1: rgba(255,255,255,0.1);
  }
}

/* Force dark mode toggle */
[data-theme="dark"] {
  --text-primary: #ffffff;
  --surface-1: #1c1c1e;
}
```

## 9. Mobile Testing Checklist

| Category | Check | Tool |
|----------|-------|------|
| **Layout** | Single-column flow at 320px width | Chrome DevTools |
| **Touch** | All tap targets ≥ 44×44px | Lighthouse |
| **Typography** | No zoom on iOS input focus | Real device test |
| **Performance** | LCP < 2.5s, INP < 200ms, CLS < 0.1 | PageSpeed Insights |
| **Safe Area** | Content doesn't overlap notch/home indicator | iPhone real device |
| **Scroll** | Horizontal scrolls fixed, vertical smooth | Real device test |
| **Forms** | Correct keyboard types for each input | Lighthouse |
| **Dark Mode** | All components readable in dark | Developer tools |
| **Orientation** | Portrait & landscape tested | Real device test |
| **Accessibility** | Touch targets, contrast, labels | axe DevTools |

## 10. Mobile-First Development Workflow

### Step 1: Wireframe at 360px

Начинай всегда с самого маленького экрана. Если не помещается — режь контент.

### Step 2: Base Styles Mobile-First

```css
/* Mobile first — base styles for 320px+ */
.component {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
}

/* Tablet landscape & up */
@media (min-width: 768px) {
  .component {
    flex-direction: row;
    gap: var(--space-xl);
    padding: var(--space-2xl);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .component {
    max-width: 1200px;
    margin: 0 auto;
  }
}
```

### Step 3: Progressive Enhancement

1. **Level 1 (Mobile base):** Content, navigation, forms
2. **Level 2 (Tablet+):** Two-column layouts, side-by-side components
3. **Level 3 (Desktop+):** Animations, complex interactions, floating elements
4. **Level 4 (Desktop+):** Parallax, 3D transforms, advanced effects

### Step 4: Test on Real Devices

Chrome DevTools — хорошо для макета, но не для производительности. Всегда тестируй на реальном устройстве:
- iOS Safari (Zoom, pull-to-refresh, safe area)
- Android Chrome (Variable refresh rate, different touch behavior)
- 3G/4G throttling (реальная скорость загрузки)

## 11. Mobile Anti-Patterns

| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Hamburger-меню для всех навигаций | Bottom tab bar для 3-5 основных разделов |
| Hover-эффекты | Active/pressed states для touch |
| Фиксированные ширины | Fluid typography + container queries |
| Полноценные изображения на всех экранах | Responsive images + lazy loading |
| Inline JS анимации | CSS transitions + GPU-accelerated transforms |
| 100vh для full-height секций | 100dvh (dynamic viewport) |
| Скрытые CTA | Sticky bottom CTA на scrollable страницах |
| Автоплей видео | Play/pause по тапу, muted по умолчанию |
| Popup-формы на мобайле | Inline-формы, progressive disclosure |

## 12. Mobile Component Library Checklist

### Базовые компоненты

- [ ] **Button** — primary, secondary, ghost, icon-only
- [ ] **Input** — text, password, email, tel, number, search
- [ ] **Select** — native select (мобильные picker'ы)
- [ ] **Card** — image card, text card, media card
- [ ] **List** — simple, divider, avatar
- [ ] **Navigation** — bottom tab, top nav, breadcrumbs
- [ ] **Modal** — full-screen on mobile, centered on desktop
- [ ] **Toast/Alert** — dismissible, auto-dismiss
- [ ] **Tab Bar** — scrollable on overflow
- [ ] **Accordion** — expandable sections (FAQ, settings)

### Mobile-Specific

- [ ] **Swipeable Carousel** — touch-enabled
- [ ] **Pull-to-Refresh** — native iOS/Android feel
- [ ] **Bottom Sheet** — slide-up from bottom
- [ ] **Floating Action Button** — contextual actions
- [ ] **Sticky Footer** — always-visible CTA

## 13. Source Links

- [UXPin: Mobile Navigation Examples](https://www.uxpin.com/studio/blog/mobile-navigation-examples/)
- [UXPin: Mobile Navigation Patterns Pros/Cons](https://www.uxpin.com/studio/blog/mobile-navigation-patterns-pros-and-cons/)
- [James Ross Jr: Responsive Design Best Practices 2026](https://www.jamesrossjr.com/blog/responsive-web-design-best-practices)
- [Scrimba: Responsive Web Design 2026](https://scrimba.com/articles/responsive-web-design-a-complete-guide-2026-2/)
- [DEV: Responsive Design Breakpoints 2025](https://dev.to/gerryleonugroho/responsive-design-breakpoints-2025-playbook-53ih)