Как сделать мобильную версию сайта на Tilda

Больше половины интернет-трафика сегодня приходит со смартфонов. Google и Яндекс учитывают мобильную версию при ранжировании — если сайт неудобен на телефоне, он будет ниже в поиске. В этой статье разберём, как правильно настроить мобильную версию сайта на Tilda — шаг за шагом.

Почему мобильная версия так важна

По данным аналитики, доля мобильного трафика в России составляет 65–75% в зависимости от ниши. Для сайтов услуг, лендингов и магазинов этот показатель ещё выше.

Google использует Mobile First Indexing — это означает, что поисковик сначала оценивает мобильную версию сайта, и именно на её основе определяет позиции в выдаче. Яндекс придерживается той же логики.

Плохая мобильная версия = низкие позиции в поиске + высокий процент отказов + потерянные клиенты.

Как работает адаптация в Tilda

Tilda использует собственную систему адаптации. По умолчанию все блоки из библиотеки автоматически адаптируются под мобильные экраны. Но это не значит, что можно не проверять — автоматика часто требует ручной доработки.

Три режима предпросмотра в редакторе:

• Десктоп (1200px и шире)
• Планшет (640–1200px) вертикальная версия и горизонтальная
• Мобильный (до 640px) вертикальная версия и горизонтальная

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

Шаг 1: Настройте мобильную типографику

Размеры шрифтов для десктопа и мобильного должны отличаться. Заголовок 64px выглядит хорошо на широком экране, но на смартфоне занимает всю ширину и выглядит громоздко.

Рекомендуемые размеры для мобильных:

• Главный заголовок (H1): 28–36px
• Подзаголовок (H2): 22–26px
• Текст секции (H3): 18–20px
• Основной текст: 15–16px
• Подписи и мелкий текст: 13–14px

В Tilda размеры для мобильных настраиваются отдельно в каждом блоке через переключатель режима предпросмотра. Кликните на текстовый элемент в мобильном режиме и измените размер шрифта.

О системном подходе к типографике читайте в статье Типографика в Tilda: как выбрать шрифты.

Шаг 2: Адаптируйте изображения

Изображения — главная проблема мобильных версий. Рассмотрим типичные случаи.

Фоновые изображения в блоках. В Tilda можно задать отдельное изображение для мобильной версии блока. Это особенно важно для первого экрана: горизонтальное фото выглядит хорошо на десктопе, но на мобильном обрезается до неузнаваемости. Решение: сделайте вертикальную версию ключевых изображений (формат 9:16 или 4:5) специально для мобильных. В настройках блока найдите «Настройки для мобильных» → «Фоновое изображение».

Галереи и сетки. Сетка из 3–4 колонок на мобильном превращается в нечитаемую мешанину. Настройте количество колонок для мобильной версии: обычно достаточно 1–2 колонок.

Логотипы клиентов. Строка из 6–8 логотипов на мобильном часто выглядит слишком мелко. Уменьшите количество или включите горизонтальный скролл.

Шаг 3: Настройте навигацию

Десктопное меню с 6–8 пунктами на мобильном превращается в проблему. В Tilda есть несколько решений:

Бургер-меню — стандартное решение. Кнопка «☰» открывает выпадающее меню. Подходит для большинства сайтов.

Нижняя навигация — фиксированная панель внизу экрана с 3–5 иконками. Удобно для сайтов с частой навигацией.

Упрощённое меню — только самые важные пункты. Второстепенные разделы убираются или переносятся в футер.

Важно: кнопка звонка или заявки должна быть доступна с любого экрана без прокрутки. Разместите её в шапке или сделайте фиксированной кнопкой.

Шаг 4: Проверьте формы

Формы — критически важный элемент. Если на мобильном форма неудобна, вы теряете заявки.

Что проверить:

• Поля достаточно крупные для нажатия пальцем (минимум 44px высотой)
• Клавиатура открывается правильного типа: для телефона — цифровая, для email — с символом @
• Кнопка отправки видна без прокрутки после заполнения полей
• После отправки появляется понятное подтверждение

В Tilda тип клавиатуры задаётся через тип поля: выбирайте «Телефон» для телефонных полей и «Email» для почтовых — это автоматически вызывает нужную клавиатуру на мобильном.

Шаг 5: Оптимизируйте скорость для мобильных

Мобильный интернет часто медленнее домашнего WiFi. Сайт должен загружаться менее чем за 3 секунды даже на 3G.

Что сделать:

• Сжимайте изображения перед загрузкой (TinyPNG, Squoosh)
• Включите ленивую загрузку: Настройки сайта → «Ленивая загрузка изображений»
• Не грузите тяжёлые видео как фон — используйте статичное изображение с кнопкой воспроизведения
• Минимизируйте количество шрифтов: каждый шрифт — это отдельный запрос к серверу

Подробно об оптимизации скорости — в статье Как ускорить загрузку сайта на Tilda.

Шаг 6: Скрывайте лишнее на мобильных

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

Что обычно скрывают на мобильных:

• Декоративные элементы (линии, геометрия), которые занимают место
• Дублирующий контент (если информация уже есть выше)
• Сложные таблицы (лучше заменить на карточки)
• Анимации, которые тормозят на слабых устройствах

Для скрытия элемента в мобильном режиме: выделите элемент → «Настройки» → «Скрыть на мобильных».

Шаг 7: Проверьте на реальных устройствах

Браузерный эмулятор — не замена реальному устройству. Перед запуском обязательно откройте сайт на iPhone (Safari) и Android-смартфоне (Chrome).

На что обращать внимание:

• Скорость загрузки на мобильном интернете, не WiFi
• Удобство нажатия на кнопки и ссылки
• Читаемость текста без зума
• Работа форм — заполнение и отправка
• Горизонтальный скролл (его не должно быть)

Типичные ошибки при адаптации

Не проверяют промежуточные размеры. Сайт хорошо выглядит на iPhone 14 (390px) и на десктопе, но ломается на Android-смартфоне с шириной 360px или на планшете 768px. Проверяйте разные размеры через DevTools.

Оставляют горизонтальный скролл. Если какой-то элемент шире экрана — пользователь будет двигать страницу горизонтально. Это раздражает и считается критической ошибкой.

Не адаптируют отступы. Большие отступы между блоками на десктопе хорошо смотрятся. На мобильном они создают ощущение «много пустого места». Уменьшайте вертикальные отступы для мобильной версии.

Забывают про интерактивные элементы. Выпадающие меню, табы, аккордеоны — всё это нужно проверять на тач-экране. То, что работает по наведению мыши, на мобильном не работает.

Чеклист мобильной адаптации

• Заголовки уменьшены для мобильных (H1 не больше 36px)
• Вертикальные изображения для первого экрана
• Сетки настроены на 1–2 колонки
• Навигация работает в виде бургер-меню
• CTA-кнопка видна в шапке
• Формы удобны для заполнения пальцем
• Декоративные элементы скрыты
• Горизонтального скролла нет
• Проверен на реальном iPhone и Android

Готовые шаблоны экономят время

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

Выбрать подходящий шаблон поможет статья Как выбрать идеальный шаблон для сайта на Tilda.