Мы с командой разрабатываем no-code платформу Taptop, чтобы дизайнеры и владельцы бизнеса могли самостоятельно создавать крутые сайты без программирования. В 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%.
Гибко менять размеры элементов в Taptop можно благодаря относительным единицам измерения. Вы можете устанавливать размеры в процентах от родительского элемента (%), а также в процентах от ширины или высоты экрана (vw и vh). Это помогает в несколько кликов перестраивать лейаут при изменении в дизайне или для адаптации под разные экраны.
Изначально карточки равномерно растянуты по высоте. Мы можем настроить выравнивание блоков по вертикали по верхнему краю, тогда они будут прижаты к верху каждой строки, и их высота будет зависеть от количества контента в каждом. Можем также сделать другой вариант — с вертикальным выравниванием посередине.
На видео можно наблюдать, как меняется вид карточек при разных вариантах настроек:
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
12262 тендера
проведено за восемь лет работы нашего сайта.
Если вы не хотите, чтобы блоки слипались, можно установить расстояние между ними — по горизонтали или по вертикали. Например, сделаем расстояние по вертикали 20px.
Настроим отображение блока с карточками для разных устройств. Для широкоэкранных мониторов (1920px и выше) выстроим карточки по четыре в ряд. Для этого ширину карточки установим в значение 25%.
Для смартфонов и планшетов поставим карточки в один столбец, чтобы их было лучше видно. Для этого ширина карточки должна быть 100%.
Итак, подбирая нужную ширину внутренних блоков в процентах, вы можете гибко перестраивать интерфейс для любого устройства. Вам нужно лишь один раз задать настройки выравнивания у авто-лейаута, и перераспределение блоков внутри него будет происходить автоматически.
Главный бонус: с авто-лейаутами вам не придется перетаскивать блоки и подгонять их размеры вручную, как в стандартных конструкторах сайтов, использующих абсолютные координаты элементов.
Таким образом можно настроить отображение для любых размеров экрана — от смартфонов до широкоформатных мониторов. В Taptop есть набор из семи брейкпоинтов — вы можете выбрать любые в зависимости от требований к дизайну.
Посмотрите, как быстро это делается на практике:
Каждая карточка в примере — авто-лейаут. Направление расположения элементов установлено вертикальное, сверху вниз. Мы можем выравнивать элементы по горизонтали и вертикали, переключая опции в авто-лейауте.
Сделаем выравнивание по горизонтали. Изначально контент расположен по левому краю, настроим варианты с центральным выравниванием и расположением по правому краю. Результат и настройки:
Теперь распределим элементы по вертикали. Изначально контент выравнивался по верхнему краю, для примера сделаем другие варианты. Например, с распределением посередине: тогда контент центрируется по высоте. Или с равномерным распределением по высоте: тогда верхние и нижние элементы у всех карточек располагаются на одном уровне. Вот как это выглядит:
Можно также установить расстояние между элементами. В нашем примере расстояние по высоте 40px.
Даже если мы изменим количество текста в элементах, заданное выравнивание сохранится — блоки будут автоматически подстраиваться под новую высоту.
Вы сделали сайт для клиента, и вдруг прилетают правки — нужно добавить тексты, поменять расположение элементов в блоке и тому подобное. Знакомо?
При работе в конструкторах, использующих абсолютные координаты, такая задача вызывает боль. Придется перетаскивать элементы вручную и подгонять размеры. Текст будет вылезать из блока, накладываясь на другой элемент, поэтому блок нужно будет растягивать, а потом снова передвигать и расставлять остальные элементы. Это очень долго и скучно.
Авто-лейауты позволяют вносить правки в сайт гораздо проще и быстрее. Всё максимально автоматизировано — блоки сами подстраивают свой размер под изменившийся контент и выравниваются нужным образом. Добавление нового элемента не приведет к тому, что блок порушится, и его придется пересобирать заново.
Возьмем пример блока с карточками. При создании новой карточки вам не нужно заниматься ее расположением и выравниванием вручную. Вы просто копируете карточку и вставляете в блок авто-лейаута — в любое место, хоть в середину списка. Выравнивание будет сделано автоматически в соответствии с настройками родительского блока.
На видео показано копирование карточки в середину списка. Это можно сделать с помощью горящих клавиш Ctrl+C, Ctrl+V, а можно просто перетащить карточку с зажатым Alt.
Содержимое карточки тоже редактировать очень просто. Добавляете текстовый контент — высота карточки автоматически подстраивается под него. Вставляете новый элемент — он встроится в общую структуру и расположится нужным образом. На примере показано добавление в карточку картинки:
Оба эти подхода имеют место быть, однако каждый из них обладает своими преимуществами, поэтому лучше использовать их по назначению.
Абсолюты:
Авто-лейауты:
Методика верстки с помощью авто-лейаутов не всегда очевидна и проста для дизайнеров, которые привыкли работать в абсолютах. Понимание и освоение этого метода может занять некоторое время. Но это того стоит, т.к. вы получите несравнимо больше преимуществ в скорости и гибкости работы.
Вы будете создавать сайты по вашим макетам в несколько раз быстрее. Адаптация сайтов к разным устройствам будет занимать гораздо меньше времени и сил, а правки от клиентов перестанут быть бесконечным тормозящим процессом.
***
Если вам интересно попробовать, как работают авто-лейауты на практике, приходите к нам в Taptop. Наша платформа заточена под то, чтобы автоматизировать верстку сайтов и сделать процесс максимально эффективным. В Taptop есть много полезных фишек, которые помогут быстро и качественно создать сайт любой сложности — от лендинга до многостраничного проекта.
Чтобы быстрее научиться использовать инструменты верстки, записывайтесь на бесплатный курс от Академии Taptop — будут видео-уроки и домашка с обратной связью от преподавателя.
