Mobile-first дизайн — реальная статистика Азербайджана

Mobile-first дизайн — фраза, которую в Баку повторяют все, но не делают почти никто. Согласно StatCounter за апрель 2026 года, в Азербайджане 78% веб-трафика — мобильный, 21% — десктопный, 1% — планшет. При этом 78% сайтов разрабатываются на 1440-пиксельном экране дизайнера, а мобильная версия рисуется в конце «по остаточному принципу». Это не mobile-first. Это desktop-with-mobile-afterthought.

Что такое mobile-first на самом деле

Не «дизайн работает на телефоне». Это дизайн начинается с телефона, и десктоп — это расширение, а не наоборот.

Разница на практике:

Desktop-first: дизайнер рисует 1440 px → потом упрощает до 768 → потом ломает в 375 → результат: мобильный пользователь видит обрезанный десктоп.
Mobile-first: дизайнер рисует 375 px → расширяет до 768 → расширяет до 1440 → результат: каждый экран продуман с нуля.

Это не процедурная разница. Это другой подход к иерархии информации.

Что реально видит бакинский мобильный пользователь

Конкретные цифры по устройствам в Баку на 2026:

iPhone — 45% мобильного трафика. Самый частый — iPhone 13/14/15.
Samsung — 28%. A-серия лидирует.
Xiaomi/Redmi — 18%.
Huawei/Honor — 6%.
Прочие — 3%.

Размеры экранов: от 375×667 (iPhone SE) до 430×932 (iPhone 15 Pro Max). Самая ходовая ширина — 390 px.

Сеть: 4G покрывает 95% Баку, но в часы пик скорости падают до 1–3 Мбит/с. 5G только начинается, на 2026 году — не больше 15% устройств.

Ориентация: 92% использования — портретная. Landscape — для видео и игр, не для сайтов.

Правила mobile-first: 7 точек

1. Один столбец, всегда

На мобильном — один столбец сверху вниз. Никаких двух колонок. Карточки и блоки идут вертикально. Боковая навигация — закрывается в гамбургер-меню.

2. Thumb-zone — главное

Большой палец правой руки достаёт до нижних 60% экрана. Верхняя треть — труднодоступная зона. Главные действия (CTA, кнопки заказа) ставьте внизу или в середине. Логотип и информация — наверху.

3. Шрифт от 16 px

Меньше 16 px — пользователь зумирует, чтобы прочитать. Это потеря. Минимум для основного текста — 16 px, для подзаголовков — 20 px, для заголовков — 28 px и выше.

4. Тач-зона 44×44 px

Каждая кликабельная цель — кнопка, ссылка, иконка — должна занимать минимум 44×44 пикселя. Иначе попадание мимо. Это рекомендация Apple HIG, и она работает.

5. Формы без лишних фокусов

Один input на строку.
Type-specific клавиатуры: type="email" для email, type="tel" для телефона, inputmode="numeric" для чисел.
Автозаполнение (autocomplete="name", autocomplete="email") — пользователь не вводит руками.
Никаких полей «введите ваш ИНН и КПП» в одну строку.

6. Изображения адаптивные

Не отдавать мобильному пользователю 4К-картинку 4 МБ. Используйте <img srcset="..." sizes="...">, чтобы браузер сам выбрал нужный размер. Для мобильного — 800 px по ширине достаточно.

7. Навигация не глубже 3 уровней

На мобильном глубокие иерархии меню не работают. Максимум: главная → раздел → страница. Если структура сайта больше — пересмотрите архитектуру.

Частые ошибки бакинских сайтов

Hover-эффекты как единственное взаимодействие. На мобильном нет hover. Если функциональность открывается «при наведении» — она недоступна.
Карусели как hero. Пользователь не свайпает карусель — он сразу скроллит вниз. Контент во второй и третьей картинке не виден.
Видео-фон на главной. На 4G в час пик — 3–5 секунд черного экрана, пока загружается.
Поп-апы с кнопкой закрытия в углу 20×20 px. Промахиваются 90% пользователей.
Стандартные WhatsApp/звонок-виджеты, перекрывающие контент. Особенно текст внизу страницы.

Тестирование

Bаш сайт работает на мобильном? Не «открывается». А работает.

Откройте на своём телефоне. Не на эмуляторе. На реальном устройстве.
Пройдите весь основной сценарий: главная → услуга → форма → отправка.
Засеките, сколько времени занимает. Если больше 90 секунд — слишком долго.
Откройте при ярком свете на улице. Контраст ещё читается?
Откройте в перчатках. Кнопки нажимаются?
Покажите трём людям, которые не из вашей компании. Спросите, что не понятно.

Что просить у подрядчика

В договор:

Mobile-first процесс с явным указанием — сначала рисуется и собирается мобильная версия.
Lighthouse Performance на мобильном не ниже 90.
Реальное тестирование на минимум 3 моделях (iPhone, Samsung, Xiaomi).
Тач-таргеты от 44 px.
Сценарий «холодный пользователь идёт по основной воронке за 60 секунд».

В Qaynaq дизайн всегда стартует с мобильной версии — десктоп рисуется уже на её основе. Если ваш текущий сайт «работает на мобильном, но не очень» — мы делаем мобильный аудит бесплатно: salam@qaynaq.com.