Как создавать, адаптировать и поддерживать сайты в несколько раз быстрее: авто-лейауты vs абсолюты
Расскажу, как с помощью авто-лейаутов можно ускорить создание адаптивных сайтов и уменьшить «боли» от внезапно прилетевших правок дизайна и контента. Заодно разберемся, чем верстка отличается от дизайна, а авто-лейауты — от абсолютных координат.
Привет! Я Игорь Литвинцев, мы с командой разрабатываем no-code платформу Taptop, чтобы дизайнеры и владельцы бизнеса могли самостоятельно создавать крутые сайты без программирования. Мы добавили в Taptop профессиональные инструменты для верстки, которые позволяют создавать и адаптировать сайты гораздо быстрее, чем в стандартных конструкторах. В статье расскажу про один из них — авто-лейауты.
Язык дизайна и язык верстки
Графические программы и браузеры говорят на разных языках. Это факт. А конструкторы сайтов работают переводчиками с дизайнерского на браузерный. Попробуем их послушать и узнать, какие сложности могут возникнуть в процессе.
Вот так примерно выглядит процесс создания сайта.
1. Рисование макета в графическом редакторе.
Графические программы: дизайнеры, кидайте на холст фигуры, картинки и текст. У нас полет творчества — где хотим, там и поставим.
У созданных элементов интерфейса — абсолютные значения по осям X и Y, а также фиксированные размеры и отступы.
2. Сборка сайта в конструкторе из кастомных блоков.
Дисклеймер: далее речь про большинство типичных конструкторов. Есть и другие случаи — некоторые вообще не дают возможности делать кастомный дизайн, а другие дают, но подход к работе у них отличаются (об этом позже).
Конструкторы сайтов: дадим дизайнерам полную свободу — drag&drop куда угодно. Потом разберемся, как всё закодить, главное, чтобы было красиво. Всё сделали? — теперь переводим эту красоту в код. Как надизайнили, так и переводим — всё четко на своих позициях, и добавим побольше оборачивающих элементов, чтобы ничего не развалилось.
Еще нужна мобильная версия? Собирайте всё заново. Другой размер экрана — прошлая красота сюда не влезает, теперь всё подгоняйте ручками, уменьшайте, переставляйте. Когда закончите, это тоже в код переработаем. Больше версий, больше кода.
Как и в макетах, координаты здесь заданы в абсолютах, размеры элементов и отступы четко фиксированы в пикселях. Не учитываются особенности классической верстки сайтов. Код получается грязный, т.к. в нем много лишних элементов и оберток. Адаптация к разным устройствам очень трудоемкая.
3. Интерпретация кода браузером.
Браузер: графику читать не умею, умею только язык верстки — html и css. Мне бы четкую структуру и иерархию элементов — куда что вложено и кто кому родитель? Читаю всё, что написано — чем больше наворочено, тем медленнее загружаю.
Абсолютные координаты так и останутся фиксированными числами в коде. Могут быть проблемы с отображением сайта на разных устройствах. Избыточный код от конструкторов приведет к медленной загрузке сайта.
Основная разница между дизайном и версткой:
- дизайн — графика, координаты и фиксированные величины (px)
- верстка — иерархия, вложенность элементов и относительные величины (%, em, vh, vw и т.д.)
Почему важно знать оба языка — дизайна и верстки
Когда вы создаете сайт, говоря только на языке дизайна, возникают три основные проблемы:
- Сложно получить хороший с технической точки зрения результат. Сайт вероятно будет выглядеть, как на макете, но внутри — нагромождение лишнего неоптимального кода.
- Мобильная адаптация сайта, созданного в конструкторе на абсолютах, — это полная его пересборка. Придется вручную перестраивать лейаут, переставлять все элементы и менять их размеры.
- Внесение изменений в дизайн сайта, особенно многостраничного — очень трудоемкий процесс. Доработки и правки от клиента занимают много времени, т.к. при добавлении новых элементов или изменении размеров нужно передвигать и менять все остальные вручную.
Поэтому важно уметь пользоваться языком верстки. Даже собирая сайт в конструкторе, можно делать это по принципам классической верстки. Но, конечно, для этого в конструкторе должны быть соответствующие возможности и функциональность.
Разберемся, как сочетать особенности верстки с работой в конструкторе сайтов — посмотрим, как это устроено у нас в Taptop. В процессе узнаем, как собрать технически грамотный сайт и заодно автоматизировать рутинные процессы.
Принципы верстки сайтов на flex
В профессиональной верстке страница имеет структуру, в которой действуют понятия иерархии элементов — родитель и ребенок. Все элементы вписаны в эту иерархию, а родительские элементы могут управлять расположением и внешним видом дочерних.
Сетка сайта выстраивается по принципам, позволяющим автоматизировать расположение и выравнивание элементов. Сейчас используются два основных метода построения лейаута — flex и grid. Пока остановимся на flex.
Для дизайнеров, использующих Figma, будет проще понять принципы работы flex, если посмотреть на Auto layout. Объединив несколько элементов в Auto layout, можно автоматически выравнивать их по горизонтали и вертикали и устанавливать расстояния между ними. Если включить опцию переноса элементов, то при уменьшении размеров контейнера элементы будут переходить на другую строчку, сохраняя выравнивание.
При верстке для создания авто-лейаута используется flex-отображение. У каждого элемента сайта есть параметр отображения — display. По умолчанию он обычно установлен в значение block и не имеет опций выравнивания. Если выбрать для элемента значение flex, то он превращается в авто-лейаут и может управлять расположением своих дочерних элементов — выравнивать их по горизонтали и вертикали, задавать отступы, перенос на другую строку и порядок элементов.
Итак, элементы внутри авто-лейаута выравниваются автоматически по заданным вами правилам. Дочерние элементы не привязаны к абсолютным координатам страницы и зависят только от их контейнера-родителя.
Авто-лейауты в Taptop
В Taptop работает иерархическая структура элементов, как в традиционной верстке. Пользователь сам управляет иерархией, вкладывая одни элементы в другие. Это отличает Taptop от многих платформ, где структуру элементов задает конструктор, не давая пользователю возможности ей управлять.
Вложенность элементов отображается на панели Слоев в Редакторе дизайна, там же можно ее изменять.
Любой блок можно сделать авто-лейаутом, установив для него отображение flex на панели Дизайна. После этого вы можете настроить все параметры авто-лейаута с помощью визуального интерфейса. Эти параметры совпадают со стилями css, используемыми при написании кода, так что они будут напрямую перенесены в код сайта.
Так у вас получится говорить с браузером на одном языке, даже не будучи программистом.
Давайте рассмотрим на примерах, как работают авто-лейауты.
Кейс №1: Как выравнивать блоки в авто-лейауте
В примере выше блок с карточками курсов — это авто-лейаут. Чтобы карточки сами распределялись по строкам, у блока выставлена опция переноса. У авто-лейаута настроено выравнивание по вертикали на всю высоту, поэтому карточки одинаковые по размеру, независимо от количества контента.
Ширина карточки задана в значение 50%, поэтому каждая из них занимает половину родительского блока и они располагаются в строке по две. Если мы захотим, например, поставить три карточки в строке, нужно будет просто сделать ширину равной 33.3%.
Гибко менять размеры элементов в Taptop можно благодаря относительным единицам измерения. Вы можете устанавливать размеры в процентах от родительского элемента (%), а также в процентах от ширины или высоты экрана (vw и vh). Это помогает в несколько кликов перестраивать лейаут при изменении в дизайне или для адаптации под разные экраны.
Изначально карточки равномерно растянуты по высоте. Мы можем настроить выравнивание блоков по вертикали по верхнему краю, тогда они будут прижаты к верху каждой строки, и их высота будет зависеть от количества контента в каждом. Можем также сделать другой вариант — с вертикальным выравниванием посередине.
На видео можно наблюдать, как меняется вид карточек при разных вариантах настроек:
Если вы не хотите, чтобы блоки слипались, можно установить расстояние между ними — по горизонтали или по вертикали. Например, сделаем расстояние по вертикали 20px.
Кейс №2: Как адаптировать сайт для разных устройств
Настроим отображение блока с карточками для разных устройств. Для широкоэкранных мониторов (1920px и выше) выстроим карточки по четыре в ряд. Для этого ширину карточки установим в значение 25%.
Для смартфонов и планшетов поставим карточки в один столбец, чтобы их было лучше видно. Для этого ширина карточки должна быть 100%.
Итак, подбирая нужную ширину внутренних блоков в процентах, вы можете гибко перестраивать интерфейс для любого устройства. Вам нужно лишь один раз задать настройки выравнивания у авто-лейаута, и перераспределение блоков внутри него будет происходить автоматически.
Главный бонус: с авто-лейаутами вам не придется перетаскивать блоки и подгонять их размеры вручную, как в стандартных конструкторах сайтов, использующих абсолютные координаты элементов.
Таким образом можно настроить отображение для любых размеров экрана — от смартфонов до широкоформатных мониторов. В Taptop есть набор из семи брейкпоинтов — вы можете выбрать любые в зависимости от требований к дизайну.
Посмотрите, как быстро это делается на практике:
Кейс №3: Как выравнивать элементы на карточках
Каждая карточка в примере — авто-лейаут. Направление расположения элементов установлено вертикальное, сверху вниз. Мы можем выравнивать элементы по горизонтали и вертикали, переключая опции в авто-лейауте.
Сделаем выравнивание по горизонтали. Изначально контент расположен по левому краю, настроим варианты с центральным выравниванием и расположением по правому краю. Результат и настройки:
Теперь распределим элементы по вертикали. Изначально контент выравнивался по верхнему краю, для примера сделаем другие варианты. Например, с распределением посередине: тогда контент центрируется по высоте. Или с равномерным распределением по высоте: тогда верхние и нижние элементы у всех карточек располагаются на одном уровне. Вот как это выглядит:
Можно также установить расстояние между элементами. В нашем примере расстояние по высоте 40px.
Даже если мы изменим количество текста в элементах, заданное выравнивание сохранится — блоки будут автоматически подстраиваться под новую высоту.
Кейс №4: Как вносить правки — менять структуру блоков и контент
Вы сделали сайт для клиента, и вдруг прилетают правки — нужно добавить тексты, поменять расположение элементов в блоке и тому подобное. Знакомо?
При работе в конструкторах, использующих абсолютные координаты, такая задача вызывает боль. Придется перетаскивать элементы вручную и подгонять размеры. Текст будет вылезать из блока, накладываясь на другой элемент, поэтому блок нужно будет растягивать, а потом снова передвигать и расставлять остальные элементы. Это очень долго и скучно.
Авто-лейауты позволяют вносить правки в сайт гораздо проще и быстрее. Всё максимально автоматизировано — блоки сами подстраивают свой размер под изменившийся контент и выравниваются нужным образом. Добавление нового элемента не приведет к тому, что блок порушится, и его придется пересобирать заново.
Возьмем пример блока с карточками. При создании новой карточки вам не нужно заниматься ее расположением и выравниванием вручную. Вы просто копируете карточку и вставляете в блок авто-лейаута — в любое место, хоть в середину списка. Выравнивание будет сделано автоматически в соответствии с настройками родительского блока.
На видео показано копирование карточки в середину списка. Это можно сделать с помощью горящих клавиш Ctrl+C, Ctrl+V, а можно просто перетащить карточку с зажатым Alt.
Содержимое карточки тоже редактировать очень просто. Добавляете текстовый контент — высота карточки автоматически подстраивается под него. Вставляете новый элемент — он встроится в общую структуру и расположится нужным образом. На примере показано добавление в карточку картинки:
Авто-лейауты vs абсолюты
Оба эти подхода имеют место быть, однако каждый из них обладает своими преимуществами, поэтому лучше использовать их по назначению.
Абсолюты:
- Удобно на этапе создания дизайна, когда еще не представляешь результат. Хороший подход для графических программ — Figma, Sketch, Photoshop.
Авто-лейауты:
- Удобно при верстке сайта, когда важна мобильная адаптация и возможность быстрого внесения изменений в дизайн и контент.
Методика верстки с помощью авто-лейаутов не всегда очевидна и проста для дизайнеров, которые привыкли работать в абсолютах. Понимание и освоение этого метода может занять некоторое время. Но это того стоит, т.к. вы получите несравнимо больше преимуществ в скорости и гибкости работы.
Вы будете создавать сайты по вашим макетам в несколько раз быстрее. Адаптация сайтов к разным устройствам будет занимать гораздо меньше времени и сил, а правки от клиентов перестанут быть бесконечным тормозящим процессом.
Если вам интересно попробовать, как работают авто-лейауты на практике, приходите к нам в Taptop. Наша платформа заточена под то, чтобы автоматизировать верстку сайтов и сделать процесс максимально эффективным. В Taptop есть много полезных фишек, которые помогут быстро и качественно создать сайт любой сложности — от лендинга до многостраничного проекта.
Чтобы быстрее научиться использовать инструменты верстки, записывайтесь на бесплатный курс от Академии Taptop — будут видео-уроки и домашка с обратной связью от преподавателя.