Mobile-First: почему в 2012 году мы начали проектировать для пальцев, а не для кликов
В начале 2011 года мобильный составлял 3-4% трафика у большинства наших клиентов. Мы проектировали для десктопа, добавляли CSS с медиа-запросами как запасной вариант и называли это адаптивным.
К середине 2012 года мобильный составлял 18% трафика на e-commerce сайтах и 31% на медиа-сайтах. И цифра росла быстро - на 2-3 процентных пункта в квартал. Мы прогнали математику: мобильный станет большинством трафика в течение 18 месяцев для большинства наших клиентов.
Это осознание потребовало выбора: продолжать относиться к мобильному как к ухудшенному десктоп-опыту или проектировать сначала для мобильного, а десктоп сделать улучшением.
Мы выбрали mobile first. Вот что это означало на практике.
Зона большого пальца
Люк Врублевски опубликовал исследование в 2011 году: когда держишь телефон одной рукой, большой палец комфортно достаёт до нижнего центра экрана. Верхние углы - сложно. Нижние стороны - легко. Середина - удобно.
Каждое основное действие - то одно, что пользователь наиболее вероятно будет делать - должно быть в зоне большого пальца. Нижняя треть экрана.
Это противоположно всем конвенциям десктоп-UI. Десктоп-меню живут вверху. Основные CTA на десктопе находятся выше сгиба. Mobile-first означало инвертировать эти конвенции для маленьких экранов:
/* Старый подход (desktop-first) */
.site-nav {
position: fixed;
top: 0;
}
/* Новый подход (mobile-first) */
.primary-action {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
min-width: 200px;
height: 54px; /* Удобно для пальца */
}
@media (min-width: 768px) {
.primary-action {
position: static; /* На десктопе - в нормальном потоке */
transform: none;
}
}
Приоритизация контента
CSS mobile-first следует конкретному порядку написания: базовые стили определяют мобильный опыт, затем min-width запросы прогрессивно добавляют десктопные функции.
Но важнее порядка CSS был порядок контента. Десктопный макет может показывать сайдбар с похожими продуктами рядом с основным описанием. На мобильном сайдбар должен либо исчезнуть, либо появиться ниже. Какой контент должен идти первым?
Мы установили упражнение по приоритизации контента в начале каждого проекта:
Стек контента страницы продукта (мобильный):
1. Изображение продукта
2. Название + цена
3. Кнопка «Добавить в корзину»
4. Краткое описание
5. Сводка отзывов (звёзды + количество)
6. Полное описание (раскрывающееся)
7. Характеристики (раскрывающиеся)
8. Похожие продукты
9. Хлебные крошки (переносятся вверх на десктопе)
Это упражнение было ценным даже для десктопного дизайна. Оно заставляло клиентов говорить, что на самом деле важно на каждой странице. «Похожие продукты» всегда были в топ-3 вишлисте клиента и обычно оказывались на позиции 8 в реальном списке приоритетов.
Дизайн ввода для «толстых пальцев»
HTML-формы, спроектированные для точных кликов мышью, были болезненны на мобильном. Мы перестроили все паттерны форм с нуля:
<!-- Старая десктопная форма -->
<label for="phone">Телефон:</label>
<input type="text" id="phone">
<!-- Mobile-first форма -->
<div class="form-group">
<label for="phone" class="form-label">Номер телефона</label>
<input
type="tel" <!-- Вызывает цифровую клавиатуру на iOS/Android -->
id="phone"
name="phone"
class="form-input"
placeholder="+996 700 000 000"
autocomplete="tel"
inputmode="numeric"
>
</div>
.form-input {
height: 52px; /* Достаточно высокое для нажатия без точности */
font-size: 16px; /* КРИТИЧНО: ниже 16px iOS зумирует при фокусе */
border: 2px solid #ddd;
border-radius: 8px;
width: 100%;
-webkit-appearance: none; /* Убираем стандартный стиль iOS */
}
Правило font-size: 16px на полях ввода - открытие из пользовательского тестирования: iOS Safari зумировал viewport при фокусировке на поле ввода с размером шрифта меньше 16px, что ломало макет. Одно CSS-правило это фиксировало.
Производительность как UX-проблема
Mobile-first мышление заставило нас взглянуть на производительность способами, которые десктоп-дизайн не требовал. Медианное мобильное соединение в 2012 году было 3G - примерно 1-3 Мбит/с с высокой задержкой. Страница на 2МБ, загружающаяся за 3 секунды на десктопе, занимала 15 секунд на 3G.
Мы начали измерять вес страницы в начале проектов, а не в конце:
- Не более 500KB суммарно
- Не более 300KB изображений
- Не более 100KB JavaScript
Это были агрессивные цели в 2012 году. Только jQuery занимал 90KB в минифицированном виде. Одно hero-изображение от дизайнера часто весило 800KB.
Практический результат
К 2013 году каждый проект мы начинали с мобильных вайрфреймов. Десктопный дизайн следовал из мобильного, а не наоборот. «Мобильная версия» больше не была урезанным десктопом; десктопная версия стала расширенной мобильной.
Ограничения мобильного дизайна улучшили всё: приоритизированный контент, более чистая навигация, более быстрая загрузка, более крупные области касания, на которые проще кликать даже мышью. Пользователи десктопа выиграли от каждого решения, принятого ради больших пальцев.
Вот постоянный урок mobile-first: проектирование в условиях ограничений даёт лучший дизайн для всех.