Адаптив или отдельная мобильная версия
Есть два подхода. Адаптивная вёрстка — один сайт и один адрес, а стили меняют расположение блоков под размер экрана. Отдельная мобильная версия — второй сайт на поддомене, который приходится поддерживать параллельно. Для малого и среднего бизнеса почти всегда выгоднее адаптив: тексты, цены и формы правятся в одном месте, а поисковик видит одну страницу вместо двух копий.
Яндекс Вебмастер показывает отдельный отчёт об адаптации сайта под мобильные устройства, а среди того, что влияет на позиции, справка Яндекса называет удобство, в том числе мобильную версию. Поэтому сайт, который на телефоне приходится растягивать двумя пальцами, теряет посетителей и может уступать в выдаче более удобным конкурентам.
Что мы переделываем в вёрстке
- Шапку и меню: компактное меню-«бургер», телефон и кнопка заявки видны на первом экране.
- Формы: крупные поля, нужная клавиатура для телефона и почты, кнопка в зоне большого пальца.
- Таблицы цен и характеристик: горизонтальная прокрутка или перестройка в карточки.
- Каталог и карточки товаров: сетка в 1–2 колонки, фото без обрезки, корзина под рукой.
- Изображения: облегчённые файлы под мобильный экран, чтобы страница не грузилась долго.
- Всплывающие окна и баннеры: не перекрывают текст и закрываются одним касанием.
Ориентиры скорости и стабильности на телефоне
Мы сверяемся с порогами Core Web Vitals (базовые показатели качества страницы) из документации web.dev. LCP (время отрисовки главного блока) — в пределах 2,5 секунды, INP (отклик на касание) — 200 мс или меньше, CLS (сдвиг вёрстки при загрузке) — не выше 0,1. Пороги считаются по 75-му перцентилю загрузок и отдельно для мобильных устройств, поэтому телефонную версию проверяем отдельно от компьютерной.
Обещать конкретную оценку в сервисах проверки скорости мы не будем: она зависит от хостинга, сторонних скриптов и счётчиков. Мы показываем, какие показатели были до работ и какими стали после, и объясняем, что ещё тормозит страницу.
Три недели адаптации под телефоны
| Срок | Что делаем | Что получаете |
|---|---|---|
| 1-я неделя | Смотрим сайт на 5–7 популярных разрешениях экрана, выписываем поломки, согласуем, какие шаблоны страниц переделываем | Список проблем со скриншотами и смета |
| 2-я неделя | Верстаем шаблоны: главная, услуга или каталог, карточка, контакты, формы | Тестовая копия сайта для просмотра с телефона |
| 3-я неделя | Правим по вашим замечаниям, облегчаем изображения, проверяем формы и цели Яндекс Метрики | Отчёт о показателях скорости до и после |
| После запуска | Переносим вёрстку на рабочий сайт, проверяем отчёт об адаптации в Вебмастере | Рабочая мобильная версия без смены адресов страниц |
Из чего складывается цена
Минимальная цена — от 16 500 ₽ разово за сайт с небольшим числом шаблонов. Смету увеличивают число уникальных типов страниц, нестандартные блоки вроде калькуляторов и фильтров каталога, старая или сильно изменённая платформа, где стили разбросаны по разным файлам. Сайт на конструкторе обычно дешевле, сайт с самописным ядром — дороже.
Когда адаптив не решит задачу
Если у сайта устарел сам движок, нет дизайна и структуры, а тексты не отвечают на вопросы клиентов, переделка вёрстки только продлит жизнь проблемному сайту. Тогда честнее заказать редизайн сайта с новой структурой. А если нужны офлайн-режим, push-уведомления и работа с камерой, речь уже о мобильном приложении.