Как создавать, адаптировать и поддерживать сайты в несколько раз быстрее: авто-лейауты vs абсолюты

Привет! С вами команда конструктора сайтов Taptop. Сегодня мы будем переводить с языка дизайна на язык верстки сайтов. Разберемся, какая разница между абсолютными координатами и авто-лейаутами. А также как авто-лейауты помогают создавать сайты быстрее, а главное — делать мобильный адаптив за считанные минуты и легко вносить правки в дизайн и контент.

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

Вот так примерно выглядит процесс создания сайта.

1. Рисование макета в графическом редакторе.

У созданных элементов интерфейса — абсолютные значения по осям X и Y, а также фиксированные размеры и расстояния.

2. Сборка сайта в конструкторе из кастомных блоков.

Дисклеймер: далее речь про большинство типичных конструкторов. Есть и другие случаи — некоторые вообще не дают возможности делать кастомный дизайн, а другие дают, но подход к работе у них отличаются (об этом позже).

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

3. Интерпретация кода браузером.

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

Итак, есть три основные проблемы:

А можно ли по-другому? Отвечаем — можно. Даже собирая сайт в конструкторе, можно делать это по принципам классической верстки. Но, конечно, для этого в конструкторе должны быть соответствующие возможности и функциональность.

Разберемся, как сочетать особенности верстки с работой в конструкторе сайтов — посмотрим, как это устроено у нас в Taptop. В процессе узнаем, как собрать технически грамотный сайт и заодно автоматизировать рутинные процессы.

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

Сетка сайта выстраивается по принципам, позволяющим автоматизировать расположение и выравнивание элементов. Сейчас используются два основных метода построения лейаута — flex и grid. Расскажем про верстку на flex.

Для дизайнеров, использующих Figma, будет проще понять принципы работы flex, если посмотреть на Auto layout. Объединив несколько элементов в Auto layout, можно автоматически выравнивать их по горизонтали и вертикали и устанавливать расстояния между ними. Если включить опцию переноса элементов, то при уменьшении размеров контейнера элементы будут переходить на другую строчку, сохраняя выравнивание.

Вернемся к верстке. Здесь для создания авто-лейаута используется flex-отображение. У каждого элемента сайта есть параметр отображения — display. По умолчанию он обычно установлен в значение block и не имеет опций автоматизации. А вот если выбрать для элемента значение flex, то он превращается в авто-лейаут и может управлять расположением своих дочерних элементов.

У авто-лейаута есть следующие параметры управления внутренними элементами:

В Taptop реализована иерархическая система элементов, как в традиционной верстке. Пользователь сам управляет иерархией, вкладывая одни элементы в другие. Это отличает Taptop от многих платформ, где структуру элементов задает конструктор, не давая пользователю возможности ей управлять.

Вложенность элементов отображается на панели Слоев в Редакторе дизайна, там же можно ее изменять.

Любой блок можно сделать авто-лейаутом, установив для него отображение flex на панели Дизайна. Далее вы можете настроить все параметры авто-лейаута с помощью визуального интерфейса. Это те же параметры, которые в стандартной верстке разработчики прописывают в css-файле, так что они будут напрямую перенесены в код сайта.

Давайте рассмотрим на примерах, как работают авто-лейауты.

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

Ширина карточки задана в значение 50%, поэтому каждая из них занимает половину родительского блока и они располагаются в строке по две. Если мы захотим, например, поставить три карточки в строке, нужно будет просто сделать ширину равной 33.3%.

Изначально наши карточки равномерно растянуты по высоте. Мы можем настроить выравнивание блоков по вертикали по верхнему краю, тогда они будут прижаты к верху каждой строки, и их высота будет зависеть от количества контента в каждом. Можем также сделать другой вариант — с вертикальным выравниванием посередине.

На видео можно наблюдать, как меняется вид карточек при разных вариантах настроек:

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

Настроим отображение блока с карточками для разных устройств. Для широкоэкранных мониторов (1920px и выше) выстроим карточки по четыре в ряд. Для этого ширину карточки установим в значение 25%.

Для смартфонов и планшетов поставим карточки в один столбец, чтобы их было лучше видно. Для этого ширина карточки должна быть 100%.

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

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

Посмотрите, как быстро это делается на практике:

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

Каждая карточка в примере — авто-лейаут. Направление следования элементов установлено вертикальное, сверху вниз. Мы можем выравнивать элементы по горизонтали и вертикали, переключая опции в авто-лейауте.

Сделаем выравнивание по горизонтали. Изначально контент расположен по левому краю, настроим варианты с центральным выравниванием и расположением по правому краю. Результат и настройки:

Теперь распределим элементы по вертикали. Изначально контент выравнивался по верхнему краю, для примера сделаем другие варианты. Например, с распределением посередине: тогда контент центрируется по высоте. Или с равномерным распределением по высоте: тогда верхние и нижние элементы у всех карточек располагаются на одном уровне. Вот как это выглядит:

Можно также установить расстояние между элементами. В нашем примере расстояние по высоте 40px.

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

Вы сделали сайт для клиента, и вдруг прилетают правки — нужно добавить тексты, поменять расположение элементов в блоке и тому подобное. Знакомо?

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

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

На видео показываем, как скопировать карточку в середину списка. Это можно сделать с помощью горящих клавиш Ctrl+C, Ctrl+V, а можно просто перетащить карточку с зажатым Alt.

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

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

Абсолюты:

Авто-лейауты:

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

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

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

Создавайте уникальные сайты на платформе Taptop.
Читайте полезные материалы и новости продукта в нашем Телеграм канале или в группе ВКонтакте, а также заходите посмотреть на наши проекты на Dprofile.