Откройте статистику любого сайта малого бизнеса в Ереване, и вы увидите одну картину: большинство посетителей приходят с телефонов. Из Instagram, из рекламы, из Google Карт. Поэтому мобильная версия - не уменьшенная копия сайта, а его главная версия. Вот 12 правил, по которым мы её проектируем.
1. Проектировать с телефона
Сначала решаем, как сайт выглядит на экране шириной 360-390 пикселей, потом расширяем до компьютера. Если делать наоборот, мобильная версия получается «как получилось».
2. Первый экран: предложение, цена, кнопка
На первом экране телефона должны быть:
- короткий заголовок о том, что вы делаете;
- строка с главным преимуществом, ценой или сроком;
- крупная кнопка действия.
Больше о первом экране в статье 7 ошибок первого экрана.
3. Никакой горизонтальной прокрутки
Если страница чуть шире экрана и её можно «подвинуть» вбок, сайт выглядит сломанным. Обычно виноваты широкие таблицы, картинки или длинные слова. Проверяется на маленьком телефоне.
4. Читаемый текст
Основной текст не меньше 16 пикселей, достаточный межстрочный интервал, короткие абзацы. Человек не должен увеличивать страницу пальцами.
5. Крупные кнопки и отступы
Кнопки и ссылки должны быть такого размера, чтобы в них уверенно попадать пальцем, с расстоянием между соседними. Мелкие переключатели языков и иконки соцсетей - частая проблема.
6. Закреплённая кнопка заявки
Кнопка «Записаться» или «Получить расчёт» внизу экрана, которая появляется после первого экрана и прячется, когда форма уже видна. Она избавляет от необходимости прокручивать к форме.
7. Короткие формы
Два поля: имя и телефон или ник в Telegram. Поле телефона открывает цифровую клавиатуру. Подробно в статье форма заявки на сайте.
8. Удобное меню
Меню на телефоне открывается одним нажатием, пункты крупные, главная кнопка заявки видна и в меню. Если пунктов много, оставьте основные, остальное в подвал.
9. Таблицы и цены
Широкие таблицы на телефоне либо прокручиваются внутри своего блока, либо превращаются в карточки. Цены должны читаться без увеличения.
10. Лёгкие картинки и видео
На телефоне грузятся уменьшенные версии картинок. Видео на первом экране заменяется лёгкой заставкой или грузится после основного содержимого. Подробно в статье скорость сайта и заявки.
11. Контакты в один клик
Telegram открывается приложением, телефон набирается нажатием, адрес открывает карту. Человеку не нужно копировать номер.
12. Проверка на реальных телефонах
Эмуляция в браузере компьютера не показывает всего. Перед запуском проверяйте на реальном телефоне, через мобильный интернет, держа его одной рукой.
Чек-лист мобильной версии
| Проверка | Как понять, что всё хорошо |
|---|---|
| Ширина | ничего не вылезает за край, нет прокрутки вбок |
| Первый экран | видны заголовок, предложение и кнопка |
| Текст | читается без увеличения |
| Кнопки | легко попасть пальцем |
| Форма | два поля, цифровая клавиатура для телефона |
| Закреплённая кнопка | появляется после первого экрана |
| Скорость | первый экран появляется быстро на мобильном интернете |
| Контакты | Telegram и карта открываются в один клик |
Частые ошибки
- Красивый первый экран на компьютере, обрезанный на телефоне. Заголовок разбит на пять строк, кнопка ушла вниз.
- Попапы на весь экран. На телефоне их сложно закрыть, и человек уходит.
- Мелкий переключатель языков в углу, в который невозможно попасть.
- Слишком длинные страницы без закреплённой кнопки.
- Видео, которое съедает мобильный трафик.
Как это делаем мы
Мы проектируем сайты Kinto с телефона, проверяем на экранах от 320 до 430 пикселей и в горизонтальной ориентации, закрепляем кнопку заявки, делаем формы из двух полей и сжимаем медиа. Перед запуском обязательно тестовая заявка с телефона через мобильный интернет.
Посмотрите, как это выглядит на наших работах в портфолио, и прочитайте про лендинги.
Итог
Мобильная версия - главная версия сайта. Короткий первый экран, крупные элементы, короткие формы, закреплённая кнопка, лёгкие медиа и проверка на реальных телефонах. Если на вашем сайте с телефона неудобно оставить заявку, вы теряете большую часть потенциальных клиентов.
Пришлите ссылку на свой сайт в Telegram @kinto_am, покажем, что улучшить в мобильной версии. Цены на странице цены.
Обновлено: 2026-10-12