Сначала цель, потом перестройка

Передайте разработчику два действия и точные размеры проверки

Самый безопасный путь — попросить разработчика или поддержку конструктора изменить только мобильный первый экран одной страницы. Не начинайте с произвольного уменьшения шрифта: сначала определите, какое действие главное и какая альтернатива действительно нужна.

Процесс от резервной копии и выбора двух действий до перестройки первого экрана и проверки на нескольких телефонах
Копия → два действия → мобильная компоновка → проверка размеров и функций.

Готовое сообщение разработчику

Нужно доработать мобильный первый экран страницы: [URL].
Основное действие: [например, «Позвонить и заказать»].
Альтернативное действие: [например, «Оставить заявку»].

Оба действия должны быть понятны и доступны без первой прокрутки
на согласованных размерах телефона. Основное действие должно быть
визуально заметнее. Нельзя скрывать важный заголовок, ухудшать
читаемость или перекрывать кнопки виджетами.

Перед правкой сохраните текущую версию. После неё пришлите снимки
до/после и проверьте клики по обоим действиям.

Что подготовить

  • точный URL, а не только домен;
  • одно основное и одно альтернативное действие;
  • данные аналитики по мобильным устройствам, если они есть;
  • резервную копию шаблона, стилей и настроек конструктора;
  • скриншоты текущего первого экрана на небольшом и среднем телефоне.

Порядок исправления

  1. Зафиксируйте исходное состояние и убедитесь, что работает откат.
  2. Уберите из первого экрана элементы, не помогающие понять предложение или совершить действие.
  3. Сократите чрезмерные верхние отступы, высоту изображения и второстепенный текст, не ухудшая смысл.
  4. Разместите основной CTA первым и сделайте его визуально заметнее альтернативного.
  5. Оставьте удобные области нажатия и расстояние между действиями.
  6. Проверьте короткий экран, увеличение текста, открытое меню и появляющиеся баннеры.
  7. Нажмите оба действия и убедитесь, что прежний сценарий не сломан.

Техническая памятка

  • Используйте адаптивную компоновку через Grid или Flexbox, а не абсолютные координаты под один телефон.
  • Не задавайте герою обязательную высоту 100vh, если содержимое может не поместиться; для современных браузеров при необходимости рассматривайте 100svh.
  • Учитывайте безопасные области через env(safe-area-inset-*) для закреплённых элементов.
  • Не уменьшайте обычный текст до плохо читаемого размера ради попадания кнопки в экран.
  • Проверьте видимый фокус, контраст и область нажатия после изменения CSS.
  • Если CTA закреплён, он не должен закрывать форму, cookie-баннер или системную навигацию.
.hero-actions {
  display: grid;
  gap: .75rem;
}

@media (min-width: 30rem) {
  .hero-actions { grid-template-columns: 1fr 1fr; }
}

Откат и отдельные работы

Если текст обрезался, элементы наложились или действие перестало работать, верните сохранённую версию и повторяйте изменения по одному. Переписывание предложения, исправление формы, настройка аналитики, полная мобильная адаптация и ускорение загрузки — отдельные работы.

После внедрения выполните независимую проверку первого экрана.

В верхней части страницы доступна Автоматическая проверка. Её результат можно независимо подтвердить по инструкции ручной проверки, а затем исправить проблему самостоятельно или заказать исправление.