логотип Taptop
Автоматическое масштабирование в Tilda: плюсы и минусы Autoscaling
Навигация по статье:

    Автоматическое масштабирование в Tilda: плюсы и минусы Autoscaling

    Функция Autoscale в конструкторе сайтов Tilda – отличный инструмент для так называемой резиновой верстки сайта. Ее использование позволяет задать всему макету и его отдельным блокам не фиксированные параметры длины и ширины в пикселях, а указать процентное соотношение этих показателей. Таким образом, с помощью функционала Тильды дизайнеры без особых сложностей могут адаптировать портал для разных экранов.

    Проще говоря, контент автоматически масштабируется под конкретную диагональ, но все элементы дизайна при этом остаются на своих местах. Например, если макет будущего веб–ресурса разрабатывается под ширину экрана в 1200 пикселей, то включенный автоскейл в Тильде при ширине экрана в 1920 пикселей меняет его размер примерно на 60%. Соответственно, 10 кегль любого шрифта при увеличении масштаба сохраняет свое расположение по сетке, но увеличивался до 16–го. Это касается и изменения размера изображений и видеоконтента, которые также увеличиваются или уменьшаются по ширине и высоте. Изменения осуществляются при помощи CSS–трансформации.

    С точки зрения дизайна, автоскейл – очень удобная функция, которая позволяет всего за пару кликов сделать сайт удобным для просмотра как с монитора компьютера, так и с экранов смартфонов и планшетов. Однако совсем недавно все изменилось: Tilda выкатила обновление, и все ресурсы с включенным автоматическим масштабированием перестали работать. Практически все слайдеры и отдельные моды перестали корректно отобраться на тех страницах, где в коде имелась запись «window.dispatchEvent(new Event('resize')) или window.dispatchEvent(new CustomEvent('resize'))». И, хотя через пару дней разработчики конструктора устранили эту проблему (а некоторые владельцы сайтов нашли способы исправить ее самостоятельно), неприятный осадок у пользователей Tilda остался.

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

    Очевидные плюсы Autoscale Tilda

    Быстрая адаптация всех элементов страницы без ручной настройки каждого фрагмента значительно облегчает жизнь верстальщикам и дизайнерам. Включение автоскейла при создании сайта в Тильде имеет целый ряд плюсов:

    • Улучшение пользовательского опыта. Вне зависимости от того, какой гаджет или монитор предпочитает посетитель вашего ресурса, контент будет отображаться корректно. Это значит, что сайт не будет закрыт через несколько секунд, а информация останется доступной широкому кругу пользователей;
    • Возможность отказаться от window–фиксации и дополнительных разрешений. Опытные дизайнеры знают, что часто элементы, расположенные по краям экрана, при открытии страницы на широкоформате чудесным образом оказываются совсем не там, где нужно. При их фиксации c помощью window container элементы съезжают довольно далеко от основного контента, или, наоборот, слишком близко по сетке смещаются к центру страницы, наползая на другой контент. Некоторые используют дополнительные адаптивы для отдельных элементов, однако большое количество разрешений тормозит загрузку страницы. Автоскейл стандартных блоков в Тильде позволяет отказаться и от того, и от другого.
    • Экономия времени и ресурсов. Использование дополнительных адаптивов, необходимость создавать дополнительные версии ресурса значительно удорожает реализацию любого проекта, а для новичков, впервые работающих над созданием своего портала, и вовсе становится непосильной задачей. Нажатие единственной кнопки – автоскейл, экономит массу времени и позволяет реализовать любую дизайнерскую концепцию.

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

    Почему Autoscale – не идеальное решение?

    Функция автоскейла стандартных блоков скрывает немало подводных камней.

    Снижение качества изображений и читаемости текста

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

    Сокращение производительности

    Масштабирование в Tilda осуществляется при помощи CSS–трансформации, что значительно снижает скорость загрузки страницы. Это приводит к ухудшению пользовательского опыта: посетители скорее закроют сайт, чем будут в течение длительного времени ждать, пока он загружается.

    Ограниченная гибкость

    Разные устройства – это не только различные диагонали экранов, но и собственная специфика. Сайты, которые работают на Тильде с включенным автоскейлом, часто ее не учитывают: даже включенное масштабирование не адаптирует страницу.

    Потеря интерактивности

    Автоматическое изменение размера не всегда корректно работает для интерактивных элементов страницы. Из–за этого взаимодействие с всплывающими формами и кнопками может быть затруднено. Как следствие – портал будет демонстрировать снижение конверсии, а вы – терять своих клиентов, которые попросту не смогут оставить контакты.

    Таким образом, автоскейл в Тильде – это своеобразный костыль, который поддерживает возможность адаптации под разные устройства, но в любой момент может подвести вас. И дело не только в неумении правильно пользоваться данной функцией. Как показало последнее обновление конструктора, автоматическое масштабирование может подвести в любой момент, и исправить ситуацию до того, как в дело вступит служба поддержки Tilda, будет практически невозможно.

    Taptop и адаптивность сайтов

    В конструкторе Taptop для резиновой верстки используются относительные единицы измерения – vw (Viewport Width). При верстке своего сайта можно сначала выставить размер каждого элемента в пикселях, как в макете, а затем – применить к ним Viewport Width. Они позволяют автоматически задавать размеры в зависимости от ширины экрана устройства, на котором будут просматривать портал. Таким образом, проект будет корректно отображаться как на небольшом дисплее смартфона, автоматически подстраивая размер изображений, текста и графики под его диагональ, так и в десктопной версии на любых мониторах.

    Этот способ, в отличие от автоскейла в Тильде, не приводит к багам сайта. Использовать Viewport Width можно даже без знания кода, тонко управляя настройками отдельных блоков и элементов макета. 

    Подробно о том, как выполнить адаптивную верстку в Taptop, читайте в нашей Базе знаний, в разделе «Дизайн и стилизация».
    Может быть интересно
    все статьи
    Оставить заявку
    Имя
    Это поле обязательно для заполнения
    Телефон
    Это поле обязательно для заполнения
    Почта
    Это поле обязательно для заполнения
    Радио группа
    Это поле обязательно для заполнения
    Комментарий
    Это поле обязательно для заполнения
    Галочка
    Это поле обязательно для заполнения
    Спасибо!
    Форма отправлена
    Что-то не так. Попробуйте позже