neo/wow-design-wiki
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): comprehensive mobile web design patterns — 6 new articles

Browse Source 
- mobile-patterns.md: Mobile layout & pattern systems (18.5KB)
  Fluid typography, container queries, safe-area, CSS architecture,
  touch-optimized components, iOS/Android specifics, testing checklist

- mobile-layout-patterns.md: Mobile layout systems (11.5KB)
  CSS grid, single-column stack, full-bleed hero, card stack,
  swipeable carousel, split-screen, off-canvas nav, bottom sheet,
  FAB, component patterns

- mobile-navigation-patterns.md: Mobile navigation (9.8KB)
  Bottom tab bar, top nav, hamburger menu, bottom sheet nav,
  pill nav, comparison matrix, navigation rules, swipe navigation,
  breadcrumbs, tab content

- mobile-form-patterns.md: Mobile form patterns (10.3KB)
  Input types, keyboards, floating labels, validation patterns,
  progressive disclosure, autocomplete, masked inputs, toggle/radio,
  form anti-patterns

- mobile-interaction-patterns.md: Touch & gestures (16.7KB)
  Swipe detection, long press, pull-to-refresh, touch feedback,
  scroll-reveal, parallax, sticky scroll, CSS scroll animations,
  touch carousel, haptic feedback, passive listeners

- mobile-performance-patterns.md: Performance optimization (12.3KB)
  Core Web Vitals (LCP/INP/CLS), LCP optimization, INP debugging,
  CLS prevention, image optimization, lazy loading, service workers,
  CSS/JS optimization, network optimization

- mobile-landing-patterns.md: Landing page patterns (21.3KB)
  Section sequencing, hero, social proof, feature cards,
  CTA patterns (inline/sticky/full-bleed), testimonials, pricing,
  FAQ accordion, footer, mobile checklist
This commit is contained in:
neo committed 2026-07-03 20:15:10 +05:00
1 parent 76c4c5b4fe
commit 083f6ba783
7 files changed
+4192
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

mobile/mobile-layout-patterns.md
+570
View File
@@ -0,0 +1,570 @@
---
title: Mobile Layout Systems
created: 2026-07-03
updated: 2026-07-03
type: system
tags: [mobile, layout, system, grid, container-queries, responsive]
sources:
- 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://scrimba.com/articles/responsive-web-design-a-complete-guide-2026-2/
- https://dev.to/gerryleonugroho/responsive-design-breakpoints-2025-playbook-53ih
confidence: high
---
# Mobile Layout Systems — Системы мобильной верстки
## 1. Mobile Grid Architecture
### Fluid Grid с Container Queries
```css
/* Container query grid — компонент знает свой размер */
.grid-container {
container-type: inline-size;
container-name: grid;
}
@container grid (min-width: 300px) {
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
}
@container grid (min-width: 600px) {
.grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
@container grid (min-width: 900px) {
.grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}
```
### Mobile-First CSS Grid Pattern
```css
.mobile-grid {
/* Mobile: single column */
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 0 16px;
}
/* Tablet landscape */
@media (min-width: 768px) {
.mobile-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding: 0 24px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.mobile-grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
}
}
```
## 2. Mobile Layout Patterns
### 2.1 Single-Column Stack (Mobile Base)
Основной паттерн для мобильных — контент идет вертикально.
```css
.mobile-stack {
display: flex;
flex-direction: column;
gap: 24px;
padding: 20px 16px 100px; /* 100px bottom для sticky CTA */
}
.mobile-stack .section {
width: 100%;
}
```
**Применение:** Главная страница лендинга, product pages, blog posts.
### 2.2 Full-Bleed Hero (Mobile)
На мобайле hero часто занимает весь экран.
```css
.mobile-hero {
height: 100dvh; /* dynamic viewport height */
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
padding: 24px;
padding-bottom: calc(var(--safe-bottom) + 24px);
text-align: center;
}
.mobile-hero__title {
font-size: clamp(2rem, 8vw, 4rem);
line-height: 1.1;
margin-bottom: 16px;
}
.mobile-hero__subtitle {
font-size: clamp(1rem, 4vw, 1.25rem);
color: var(--text-secondary);
margin-bottom: 24px;
max-width: 600px;
}
```
### 2.3 Card Stack (Mobile Feed)
Классический паттерн соцсетей и маркетплейсов.
```css
.card-stack {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
padding-bottom: calc(var(--safe-bottom) + 80px);
}
.card-stack .card {
background: var(--surface-1);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card-stack .card__image {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.card-stack .card__content {
padding: 16px;
}
```
### 2.4 Swipeable Carousel (Mobile)
```css
.swipe-carousel {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 0 16px 16px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.swipe-carousel::-webkit-scrollbar {
display: none;
}
.swipe-carousel .carousel-item {
scroll-snap-align: start;
flex: 0 0 auto;
width: min(280px, 85vw);
}
/* Pagination dots */
.carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
padding: 16px;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-secondary);
opacity: 0.4;
transition: opacity 0.2s, transform 0.2s;
}
.carousel-dot.active {
opacity: 1;
transform: scale(1.3);
background: var(--primary);
}
```
### 2.5 Split Screen (Tablet/Desktop)
```css
.split-screen {
display: flex;
flex-direction: column;
}
.split-screen .split-content,
.split-screen .split-media {
flex: 1;
padding: 24px 16px;
}
.split-screen .split-media {
order: -1; /* media first on mobile */
}
@media (min-width: 768px) {
.split-screen {
flex-direction: row;
}
.split-screen .split-content,
.split-screen .split-media {
flex: 0 0 50%;
padding: 48px 32px;
}
.split-screen .split-media {
order: 1; /* media right on desktop */
}
}
```
### 2.6 Off-Canvas Navigation
```css
.offcanvas-nav {
position: fixed;
top: 0;
left: 0;
width: 85vw;
max-width: 320px;
height: 100dvh;
background: var(--surface-1);
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1000;
padding: 24px;
padding-top: calc(24px + var(--safe-top));
}
.offcanvas-nav.open {
transform: translateX(0);
}
.offcanvas-nav__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
z-index: 999;
}
.offcanvas-nav.open + .offcanvas-nav__overlay {
opacity: 1;
visibility: visible;
}
```
### 2.7 Bottom Sheet Pattern
```css
.bottom-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--surface-1);
border-radius: 16px 16px 0 0;
transform: translateY(100%);
transition: transform 0.3s ease;
z-index: 1000;
padding: 16px;
padding-bottom: calc(16px + var(--safe-bottom));
max-height: 80dvh;
overflow-y: auto;
}
.bottom-sheet.open {
transform: translateY(0);
}
.bottom-sheet__handle {
width: 40px;
height: 4px;
background: var(--border-1);
border-radius: 2px;
margin: 0 auto 16px;
}
```
### 2.8 Floating Action Button (FAB)
```css
.fab {
position: fixed;
bottom: calc(var(--safe-bottom) + 24px);
right: 24px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 100;
border: none;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab:active {
transform: scale(0.9);
}
```
## 3. Mobile Typography & Spacing System
### Fluid Typography
```css
:root {
/* Clamp-based fluid type scale */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
--text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
--text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
--text-3xl: clamp(1.875rem, 1.4rem + 2.3vw, 2.5rem);
--text-4xl: clamp(2.25rem, 1.6rem + 3.25vw, 3rem);
}
```
### Mobile Spacing Scale
```css
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
}
```
## 4. Mobile Component Patterns
### Mobile Navigation Bar (Bottom Tab)
```css
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(56px + var(--safe-bottom));
padding-bottom: var(--safe-bottom);
background: var(--surface-1);
border-top: 1px solid var(--border-1);
display: flex;
justify-content: space-around;
align-items: center;
z-index: 100;
}
.bottom-nav__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 16px;
color: var(--text-secondary);
text-decoration: none;
font-size: 12px;
transition: color 0.2s;
}
.bottom-nav__item.active {
color: var(--primary);
}
.bottom-nav__icon {
width: 24px;
height: 24px;
}
```
### Mobile Card
```css
.mobile-card {
background: var(--surface-1);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.mobile-card__image {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
}
.mobile-card__content {
padding: 16px;
}
.mobile-card__title {
font-size: var(--text-lg);
font-weight: 600;
margin-bottom: 8px;
}
.mobile-card__meta {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: 12px;
}
```
### Mobile Button
```css
.mobile-button {
min-height: 48px;
padding: 12px 24px;
border-radius: 8px;
font-size: var(--text-base);
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: none;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
-webkit-tap-highlight-color: transparent;
}
.mobile-button:active {
transform: scale(0.98);
}
.mobile-button--primary {
background: var(--primary);
color: white;
}
.mobile-button--secondary {
background: var(--surface-2);
color: var(--text-primary);
}
.mobile-button--ghost {
background: transparent;
color: var(--primary);
}
```
## 5. Mobile Performance Optimization
### Image Optimization Pattern
```html
<picture>
<source srcset="image-480.webp 480w, image-800.webp 800w, image-1200.webp 1200w"
media="(min-width: 768px)">
<img
src="image-480.webp"
loading="lazy"
decoding="async"
width="800"
height="600"
alt="Description"
class="lazy-image"
>
</picture>
```
### CSS Optimization
```css
/* Mobile-first critical CSS (inlined in <head>) */
/* Target: < 14KB gzipped for mobile LCP */
@layer mobile, tablet, desktop;
```
### Lazy Loading Pattern
```javascript
const lazyImages = document.querySelectorAll('.lazy-image');
const lazyObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src || img.src;
img.classList.add('loaded');
lazyObserver.unobserve(img);
}
});
}, {
rootMargin: '200px 0px',
threshold: 0.01
});
lazyImages.forEach(img => lazyObserver.observe(img));
```
## 6. Mobile Testing Checklist
| Category | Check | Tool |
|----------|-------|------|
| **Layout** | Single-column flow at 320px | Chrome DevTools |
| **Touch** | All tap targets ≥ 44×44px | Lighthouse |
| **Typography** | No zoom on iOS input focus | Real device |
| **Safe Area** | No overlap with notch/home indicator | iPhone real device |
| **Performance** | LCP < 2.5s, INP < 200ms, CLS < 0.1 | PageSpeed Insights |
| **Scroll** | Horizontal scrolls fixed, vertical smooth | Real device |
| **Forms** | Correct keyboard types | Lighthouse |
| **Dark Mode** | All components readable | DevTools |
| **Orientation** | Portrait & landscape | Real device |
## 7. Mobile Anti-Patterns
| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Hamburger-меню для основных навигаций | Bottom tab bar для 3-5 разделов |
| Hover-эффекты | Active/pressed states |
| Фиксированные ширины | Fluid + container queries |
| Полноценные изображения | Responsive images + lazy loading |
| Popup-формы на мобайле | Inline-формы |
| 100vh для full-height | 100dvh |
| Скрытые CTA | Sticky bottom CTA |
| Автоплей видео | Play/pause по тапу |