Коротко
- Стандартные блоки адаптируются автоматически. Для них на телефоне можно отдельно задать размер шрифта, отступы и видимость.
- Zero Block настраивается на пяти диапазонах: компьютер, два планшета, два смартфона. Настройки наследуются сверху вниз, и именно это ломает телефон.
- Самая опасная ширина — 320–480 пикселей. В неё попадают почти все телефоны в вертикальном положении, а сетка Zero Block там шириной 320 пикселей.
- Проверяйте на реальных телефонах разной ширины, а не только в режиме просмотра в редакторе.
- Галочку «отключить адаптивность» в настройках страницы не трогайте: на телефоне получится уменьшенная копия компьютерной версии.
Почему на телефоне всё решается
Большинство посетителей сайтов малого бизнеса приходят с телефона: из Карт, рекламы, мессенджеров. Если на телефоне не видно, что вы предлагаете, и кнопка заявки за краем экрана, остальное неважно. Почему мобильная версия определяет заявки и как её проверять в целом, мы подробно писали в статье про мобильную версию сайта. Здесь — только про особенности Тильды.
Стандартные блоки и Zero Block: в чём разница
В Тильде два вида блоков, и адаптив у них устроен по-разному.
| Стандартные блоки | Zero Block | |
|---|---|---|
| Как устроены | Готовые блоки из библиотеки: обложки, тексты, карточки, формы | Свободный холст, каждый элемент ставится вручную |
| Адаптив | Тильда подстраивает автоматически | Дизайнер настраивает каждое разрешение сам |
| Что можно настроить для телефона | Размер шрифта, межстрочный интервал, отступы, видимость, фокус фоновой картинки | Положение, размер, шрифт, видимость каждого элемента на каждом из пяти разрешений |
| Риск поломки | Низкий | Высокий, если не доделана мобильная версия |
| Время на правку | Минуты | От получаса на экран |
По справке Тильды о мобильной версии в редакторе можно переключать вид устройства в верхней панели, а мобильные настройки блока отмечены значком телефона. Там же есть ползунок «Диапазон видимости на устройствах» — им скрывают блок на телефоне или, наоборот, показывают только на нём.
Как понять, что сломанный блок — Zero: откройте его в редакторе. Если открывается отдельный холст с сеткой и шкалой разрешений сверху — это Zero Block. Если настройки и контент открываются в боковых панелях — стандартный.
Как устроен адаптив Zero Block
По справке Тильды о Zero Block у него пять разрешений по умолчанию:
| Диапазон | Устройства |
|---|---|
| 1200 и шире | Компьютеры |
| 980–1200 | Планшет горизонтально |
| 640–980 | Планшет вертикально |
| 480–640 | Смартфон горизонтально |
| 320–480 | Смартфон вертикально |
Два правила объясняют большинство поломок.
Настройки наследуются сверху вниз. Если на компьютерной версии заголовок 64 пикселя, а на мобильной его не трогали, он останется 64 пикселя на экране шириной 360. Унаследованные значения в редакторе показаны бледно-серыми, изменённые — чёрными. Бледно-серый размер шрифта на разрешении 320 — первый признак, что мобильную версию не делали.
Сетка на каждом диапазоне фиксированной ширины и стоит по центру. По справке о расширенных настройках Zero Block на компьютере сетка 1 200 пикселей, на остальных разрешениях — 980, 640, 480 и 320. На телефоне шириной 412 пикселей сетка в 320 пикселей стоит посередине, по бокам пустые поля. Если элемент привязан к сетке, а фон — к краю окна, на разных телефонах они расходятся.
Помимо сетки есть контейнер окна: элементы, привязанные к нему, позиционируются относительно краёв экрана. Ещё есть автомасштабирование — элементы сетки масштабируются пропорционально ширине окна. Это удобно, но на телефонах может сделать мелкий текст ещё мельче.
Типовые поломки и как их чинить
| Симптом на телефоне | Причина | Как исправить |
|---|---|---|
| Текст наезжает на картинку | Высота текста на мобильном больше, чем на компьютере, а картинка стоит на старом месте | На разрешении 320 уменьшить шрифт, сдвинуть картинку ниже или скрыть её |
| Огромный заголовок в 5 строк | Размер шрифта унаследован с компьютерной версии | Задать отдельный размер на 320 и 480: обычно 26–34 пикселя для H1 |
| Кнопка за правым краем | Элемент стоит правее 320 пикселей или привязан к правому краю окна | Перенести внутрь сетки 320, проверить привязку |
| Горизонтальная прокрутка, сайт «болтается» | Какой-то элемент шире экрана: картинка, линия, текстовый блок | Найти элемент, выходящий за сетку, уменьшить или скрыть |
| Пустое поле на пол-экрана | Высота холста осталась от компьютерной версии | Уменьшить высоту холста на мобильных разрешениях |
| Обрезано лицо на фоне обложки | Фоновое фото кадрируется по центру | Задать точку фокуса картинки для мобильных |
| На телефоне видно два одинаковых блока | Сделаны отдельные блоки для компьютера и телефона, а видимость не настроена | Настроить диапазон видимости для каждого блока |
| Мелкий нечитаемый текст | Автомасштабирование или шрифт 12–13 пикселей | Минимум 15–16 пикселей для основного текста на телефоне |
| Меню перекрывает первый экран | Фиксированная шапка высокая, обложка начинается под ней | Уменьшить шапку на телефоне или добавить отступ сверху |
Рекомендации Яндекса для мобильных страниц совпадают с этим списком по сути: по справке Вебмастера страница должна открываться без горизонтальной прокрутки на экранах от 320 пикселей, а текст — читаться без увеличения.
Если поломок много и не хочется разбираться в каждом элементе, бывает быстрее нарисовать мобильный первый экран заново. Это мы можем сделать бесплатно.
Как проверять: ширины и устройства
Режим просмотра в редакторе Тильды полезен, но не заменяет реальный телефон. Справка Тильды отдельно предупреждает: режим редактирования не показывает анимации так, как на опубликованном сайте. Проверяйте опубликованную страницу.
Какие ширины проверить обязательно:
| Ширина экрана | Какие телефоны примерно | Что ловить |
|---|---|---|
| 320–360 | Компактные и недорогие Android-смартфоны, старые модели | Кнопки за краем, переносы в заголовках |
| 375–393 | Распространённые iPhone и многие Android | Основной сценарий, всё должно быть идеально |
| 412–430 | Большие Android и iPhone «Plus»/«Max» | Пустые поля по бокам сетки, расхождение фона и текста |
| 480–640 | Телефон горизонтально | Обрезанные обложки, огромные картинки |
| 768–980 | Планшеты | Блоки, которые никто не проверял |
Порядок проверки:
- Опубликуйте страницу.
- Откройте её на своём телефоне и на телефоне коллеги с другой шириной экрана.
- В браузере на компьютере откройте инструменты разработчика и включите режим устройства. Пройдите по ширинам 320, 360, 390, 430.
- Пролистайте всю страницу, а не только первый экран. Особенно — блоки с формами и ценами.
- Нажмите на каждую кнопку и ссылку. Отправьте тестовую заявку.
- Поверните телефон горизонтально.
Запишите номера блоков с проблемами: в Тильде у каждого блока есть код, и по нему подрядчику проще найти нужное место.
Как исправить самому: порядок действий
Для стандартных блоков:
- Откройте настройки блока и найдите поля со значком телефона: размер шрифта, отступы.
- Уменьшите размер заголовков на телефоне, если они занимают больше трёх строк.
- Если блок на телефоне не нужен, сдвиньте ползунок диапазона видимости.
- Для обложек задайте фокус фоновой картинки.
Для Zero Block:
- Откройте блок и переключитесь на разрешение 320 в шкале сверху.
- Найдите элементы с бледно-серыми значениями шрифта и размеров — их не настраивали.
- Задайте шрифты: заголовок 26–34 пикселя, текст 15–16.
- Расставьте элементы в один столбец сверху вниз: заголовок, подзаголовок, кнопка, картинка.
- Уменьшите высоту холста, чтобы не было пустоты внизу.
- Проверьте разрешение 480 — часто его забывают, а на нём телефон в горизонтальном положении.
- Опубликуйте и проверьте на реальном телефоне.
Если на сайте больше 5–7 Zero-блоков и все сломаны, честно посчитайте время. Иногда дешевле заменить часть из них стандартными блоками. Когда Zero Block окупается, а когда нет, — в статье про Zero Block в Тильде.
Подводные камни, о которых редко пишут
Шрифты на разных телефонах. Если в Zero Block текст подогнан «впритык» к ширине, на другом телефоне с иным рендером шрифта он переносится на лишнюю строку и наезжает на следующий элемент. Оставляйте запас по высоте.
Отдельные блоки для телефона. Некоторые дизайнеры делают два блока — для компьютера и для телефона — и скрывают ненужный. Это работает, но удваивает правки: поменяли цену в одном блоке, забыли во втором. Плюс в коде страницы дублируется текст.
Анимации. Появление элементов при прокрутке на слабых телефонах может дёргаться или задерживать показ текста. На мобильных её лучше упростить или отключить.
Тяжёлые картинки. Мобильная версия часто страдает не от вёрстки, а от скорости: фото по 4 МБ грузятся долго. Что можно ускорить — в разборе медленного сайта на Тильде.
Чинить самому, звать дизайнера или пересобрать
Решение зависит от того, сколько сломано и как собран сайт.
- Чините сами, если сломаны стандартные блоки: размер шрифта, отступы, скрытие блока на телефоне. Это настройки в боковой панели, они не требуют навыков дизайна.
- Зовите дизайнера, который собирал сайт, если сломаны 1–3 Zero-блока. Он знает, как устроены слои, и поправит быстрее, чем вы разберётесь.
- Пересобирайте, если на сайте 8–10 Zero-блоков и все сломаны на телефоне. Часто быстрее заменить большую часть стандартными блоками, а Zero Block оставить на первом экране. Заодно сайт станет проще в правках: менять цены и тексты сможете сами.
Признак, что пора пересобирать, а не латать: каждая правка на компьютерной версии снова ломает мобильную.
Условный пример: сколько стоит съехавшая кнопка
Пример условный, не кейс студии. Компания по монтажу натяжных потолков, 1 500 посетителей в месяц, 80% — с телефона. На вертикальном смартфоне кнопка «Рассчитать стоимость» на первом экране уехала за правый край: на iPhone её видно наполовину, на компактных Android — нет совсем.
С компьютера сайт конвертирует 3%, с телефона — 1%. С телефонов приходит 1 200 × 1% = 12 заявок, с компьютеров 300 × 3% = 9. После исправления мобильного первого экрана конверсия с телефона подтянулась до 2,5%. Это 30 заявок с телефона вместо 12 — ещё 18 заявок в месяц при том же трафике. Цифры условные, но разрыв между конверсией с компьютера и телефона в 2–3 раза — повод проверить мобильную версию первым делом.
Чек-лист мобильной версии на Тильде
- Все Zero-блоки настроены на разрешениях 320 и 480, нет бледно-серых шрифтов.
- Нет горизонтальной прокрутки на ширине 320.
- Заголовок первого экрана — не больше трёх строк.
- Кнопка заявки видна на первом экране без прокрутки.
- Телефон и мессенджеры в шапке нажимаются пальцем.
- Основной текст не меньше 15 пикселей.
- Фото не обрезают лица и товар.
- Форма удобно заполняется, клавиатура не закрывает кнопку.
- Нет попапа, который закрывает экран при входе.
Если мобильная версия сыпется на нескольких страницах, оставьте контакты — посмотрим, что дешевле: поправить или пересобрать.
Частые вопросы
Почему на Тильде сайт на телефоне выглядит не так, как в редакторе?
Режим редактирования показывает упрощённую картинку и не воспроизводит анимации. Кроме того, редактор показывает одну ширину, а телефоны бывают от 320 до 430 пикселей. Проверяйте опубликованную страницу на реальных устройствах.
Как сделать мобильную версию в Zero Block?
Переключитесь на разрешения 480 и 320 в верхней шкале блока и настройте каждый элемент: размер шрифта, положение, ширину. Унаследованные с компьютерной версии значения показаны бледно-серым — начните с них.
Можно ли скрыть блок только на телефоне?
Да. В настройках стандартного блока есть ползунок «Диапазон видимости на устройствах». В Zero Block можно скрыть отдельный элемент на нужном разрешении.
Нужна ли отдельная мобильная версия сайта на Тильде?
Нет. Тильда делает адаптивный сайт: одна страница подстраивается под ширину экрана. Отдельные блоки для телефона иногда используют, но это удваивает работу при правках.
Сколько стоит исправить мобильную версию на Тильде?
Зависит от числа Zero-блоков. Стандартные блоки правятся за минуты, один Zero-блок — от получаса до нескольких часов. По рынку правка мобильной версии лендинга у фрилансера — ориентировочно от нескольких тысяч до 20–30 тысяч рублей, но это ориентир, а не прайс.
10+ лет делаю сайты и запускаю рекламу, вместе с командой запустили больше 500 проектов. Пишу о том, что проверили на практике.
Задать вопрос в Telegram →
