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

Мобильная версия сайта на Тильде

Мобильная версия сайта – это, по сути, полноценный отдельный сайт со своей версткой, разработанный под маленькие узкие экраны.

Люди все больше времени проводят в телефонах, растет разрыв между использованием мобильных браузеров и десктопных. Этот факт подтверждает то, что, создавая компанию, предстоит не просто создать сайт, но и позаботиться об адаптации для мобильных устройств и планшетов. Иначе, вы потеряете до 88% потенциального трафика!

Как происходит адаптация в Тильде?

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

Для проверки корректности отображения сайта на разных устройствах я использую сервис I LOVE ADAPTIVE.

Вы можете продублировать блок, сделав в нем контент именно для мобильных устройств – сделать другую картинку на главном экране, добавив или убрав отдельные элементы и прочее. Для этого необходимо конкретному блоку задать диапазон видимости от 0 до 980px. Это и будет мобильная версия блока.

2. Адаптация в Zero Block для разных устройств более «податлива» и пластична. Все элементы можно настроить самостоятельно и создать дизайн, который будет смотреться более выигрышно на маленьких экранах.

И помните золотые правила «мобильных» сайтов:

1. Ориентируйте контент правильно. Оставьте только нужную информацию, чтоб пользователь не скроллил сайт до кровавых мозолей.

2. Облегчайте функционал. У пользователя нет мышки или лупы под рукой.

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

4. 80% пользователей уходит с сайта уже после 5 секунд ожидания загрузки, поэтому следите за «весом» контента, который располагаете на сайте.
Ну и напоследок хочу сказать, что мобильной версии стоит уделить больше времени и внимания, проработав дизайн до мелочей. Пользователь должен не только быстро найти информацию, которую искал, но и захотеть купить Ваш товар или воспользоваться предлагаемыми услугами. А вот как сделать «продающий» сайт это уже совсем другая история.

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

Тильда автоматически подстраивает сайт для просмотра на планшетах, смартфонах, нетбуках, ноутбуках и компьютерах.

Дополнительно можно изменить размеры отступов между блоками для мобильных, настроить диапазон видимости блока на разных устройствах, сделать свою адаптивную версию с помощью редактора Zero Block либо отключить адаптивность сайта.

Как сделать разные версии блока для компьютера и мобильных
Как поменять величину отступов для мобильных
Как сделать свою версию для мобильных с помощью редактора Zero Block
Как отключить подстройку сайта для разных экранов
Диапазон видимости на устройствах

Функция, которая определяет, на каких устройствах будет виден данный блок, а на каких нет. Есть в настройках каждого блока.

Зачем нужно и как это работает

Если определенный блок (например, обложка) хорошо выглядит на компьютере, но на экране мобильного отражается плохо, вы можете установить диапазон видимости данного блока 980 px и выше. Это будет десктопная версия блока, она перестанет отображаться на мобильных телефонах.

Затем нужно скопировать этот блок и настроить его внешний вид специально для мобильных (поменять фотографию, размер шрифта и т. д). Этому блоку задайте диапазон видимости от 0 до 980px. Это будет мобильная версия блока.

Таким образом, на компьютере пользователь будет видеть десктопную версию, а на мобильных устройствах — мобильную.

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

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

Создание адаптивного сайта

который будет корректно и точно отображаться на любых устройствах!

Создать адаптивный сайт самому можно на конструкторе сайтов «Tilda Publishing»

Тильда автоматически подстроит сайт для просмотра на планшетах, смартфонах, нетбуках, ноутбуках и компьютерах.

Разработка адаптивных сайтов

Tilda Publishing предлагает не просто получить сайт таким, каким вы его хотите видеть, но стать обладателем ресурса с подвижным веб-дизайном. Пользователям будет удобно просматривать его с любых экранов вне зависимости от формата и разрешения. И ни один клиент не пройдёт мимо нужной ссылки!

Как сделать отображение разных блоков для мобильной и десктопной версии?

Это можно реализовать с помощью настройки диапазона видимости.

Создайте разные блоки: одни для мобильной версии, другие — для десктопной.

На блоках для мобильных перейдите в «Настройки» и в разделе «Диапазон видимости на устройствах» установить значение от 0 до 980px. На блоках для десктопов — установите значение от 980px до Max.

Подробнее о диапазоне видимости в Справочном центре.