Палец целится в «купить». Подгружается шрифт, заголовок растёт, кнопка уезжает вниз, тап открывает чат. Человек уверен, что нажал покупку. Он не нажал. В отчётах сдвиг вёрстки зовут одной английской аббревиатурой. Владельцу важнее другое: палец попал не туда, заказ не создался, в чате пустой «привет».
Сжать фото ещё раз этот сдвиг не уберёт. Сменить хостинг — тоже. Прыгает место, которое не зарезервировали.
Проблема
Шрифт без запаса высоты, баннер без размеров, липкая шапка, панель cookies, дорисовка мини-корзины, стили чата. На ширине 360 четыре панели сразу оставляют рабочую полосу ноль. Каркас витрины быстро рисует скелет, потом живой блок вставляет шапку — кнопка снова едет. Резерв высоты под шапку нужен в скелете, не «потом».
- У большого фото и первого баннера заданы ширина и высота.
- Два начертания шрифта, текст виден сразу системным, потом дорисовывается без сдвига кнопки.
- Три иконки шапки — свои картинки, не целый набор «на всякий случай».
- Чат не меняет отступы кнопки покупки своим файлом стилей.
Причина
Решение
Пересчёт доставки не должен уводить «оплатить» под чат. Сдвиг меряют на корзине отдельно. Новый протокол передачи файлов сдвиг не лечит. Cookies не толкают кнопку вниз после согласия: место резервируют или панель сверху. Приёмка — 360 и широкий экран: часто едет только узкий.
В записи сдвига смотрят имя блока и чинят его, не «все картинки». Слайдер без высоты — первый кандидат после шрифта.
Цена должна читаться. Системный шрифт на секунду — норма. Пустая цена секунду — нет. Отключать шрифт так, что цифру не разобрать, нельзя. Критический набор стилей ядра вслепую не собирают: ломают админку и кассу.
Шапка, cookies, бар покупки, чат — четыре претендента на сдвиг. В скелете задают минимальную высоту шапки и бара до дорисовки. Cookies не толкают кнопку после согласия. Чат не меняет отступы карточки. Приёмка на 360 и на широком: часто едет только узкий.
Сжатие фото и смена тарифа сдвиг не убирают. Если после шрифта кнопка едет — запас под шрифт, не «качество кадра». Тап после загрузки должен попасть в покупку с первого раза. Третий тап «ну теперь же» — провал приёмки, не характер покупателя.
Иконки шапки своими картинками, не целым набором «на всякий случай»: набор приезжает поздно и толкает шапку. Слайдер без высоты — второй удар после шрифта. Запись сдвига называют блок, чинят блок. «Поджимать все фото» сдвиг не убирает и портит витрину.
- Пересчёт доставки не должен уводить «оплатить» под чат.
- Сдвиг меряют на корзине отдельно.
- Новый протокол передачи файлов сдвиг не лечит.
- Cookies не толкают кнопку вниз после согласия: место резервируют или панель сверху.
Проверка
Карточка и корзина на 360 после шрифта и cookies. Тап в «купить» и «оплатить» попадает в кнопку. Если едет только бар каркаса — увеличивают резерв в скелете, не жмут качество фото. Не уменьшайте JPEG вместо высоты. Не чините сдвиг сменой тарифа. Не грузите стили чата в голову карточки. Человек должен попасть в покупку с первого раза, не с третьего «ну теперь же должно».
Чек-лист
- Пересчёт доставки не должен уводить «оплатить» под чат.
- Сдвиг меряют на корзине отдельно.
- Новый протокол передачи файлов сдвиг не лечит.
- Cookies не толкают кнопку вниз после согласия: место резервируют или панель сверху.
Назад в раздел
