Мобильная версия сайта на Тильде
Мобильная версия сайта – это, по сути, полноценный отдельный сайт со своей версткой, разработанный под маленькие узкие экраны.
Люди все больше времени проводят в телефонах, растет разрыв между использованием мобильных браузеров и десктопных. Этот факт подтверждает то, что, создавая компанию, предстоит не просто создать сайт, но и позаботиться об адаптации для мобильных устройств и планшетов. Иначе, вы потеряете до 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?
Hi! Как адаптировать под разные размеры мобильного экрана в Tilda? В Тильде есть возможность адаптировать мобильную версию только под размер в ширину 320 px, а как сделать адаптив под 425 рх?
- Вопрос задан более года назад
- 1664 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Tilda Master @tildamaster
Все для Tilda → www.ilda.top
2 варианта решения:
1. Привязать положение и размере элементов к контейнеру а не сетке [элементы слева и справа будут постоянно на одном расстоянии от края экрана, широкий элемент будет иметь относительную величину, например 90 %]
2. Включить Autoscale [собранные под 320px макет будет пропорционально растягиваться под любое разрешение экрана]
Ответ написан более года назад
Комментировать
Нравится Комментировать
Мобильная версия на Тильде
Стандартные блоки Tilda автоматически подстраиваются под мобильные устройства: планшеты и смартфоны. Но выглядит это не всегда эстетично. При адаптации у каждого элемента Тильды прописаны обязательные функции. Заголовок уменьшается на X пикселей, текстовый блок становится 16 кеглем, а картинка автоматически центрируется, как и на десктопной версии.
Если отображение элементов на компьютере устраивает, то мобильная версия выглядит некрасиво. Заголовок стал маленьким, а текст под ним теперь невозможно прочитать. Появилась дырка между текстом и кнопками. А фотография отцентрировалась посередине и персонаж пропал из зоны видимости.
Как я работаю над такими проблемами
Самый простой способ для опытного дизайнера на Тильде — создать Zeroblock.
Это специальный блок, где вручную проставляются характеристики для каждого элемента в каждом разрешении экрана. Такой подход хорош тем, что дизайнер может добавлять элементы, не предусмотренные стандартными блоками: иконки, дополнительные текстовые блоки, кнопки и поля для ввода в любом количестве.
Но есть и минусы у Zeroblock. Во-первых, клиент уже не отредактирует этот блок, если захочет изменить текст или дополнить описание. Без навыков работы на Тильде он не справится, как со стандартным блоком. Второй минус — это цена и сроки. Ведь стандартный блок подгоняется автоматически, и дизайнер задает только общие характеристики: загружает 1 картинку, задает цвет шрифта и ссылку кнопки. Работая в Zeroblock, дизайнер проставляет характеристики и положение каждого элемента на 5 разрешениях монитора: десктоп (большой монитор или ноутбук), горизонтальный и вертикальный планшет и 2 размера смартфона.
Другой способ — создать стандартный блок под необходимую ширину экрана
Этот способ подходит, если отображение сайта страдает только на 1 из 5 устройств. Например на ноутбуке и компьютере сайт выглядит эстетично, а на смартфоне требуются изменения. Например, требуется отцентрировать, уменьшить текст и загрузить картинку, где персонаж будет расположен по центру на смартфоне. Для этого создается дополнительный стандартный блок, где настраиваются эти характеристики и параметры видимости.
Что нужно знать заказчику
Тильда рекламирует себя, заявляя о полной адаптивности и отсутствии проблем с отображением на мобильных устройствах. Но штатная адаптация подойдет только тем заказчикам, которых не волнует эстетика. Если задача состоит в том, чтобы сделать удобный и адаптивный сайт, уточняйте у дизайнера возможность проработки мобильной версии. Не у всех дизайнеров эта функция включена в стоимость.
Озвучивая вам цену за сайт, я обязательно включаю в него адаптив сайта. Все больше людей пользуются смартфонами и планшетами, совершают покупки и заказывают услуги с этих устройств. Делать сайт без мобильной версии — пустить деньги на ветер.