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

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

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

Язык дизайна и язык верстки

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

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

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

Графические программы: дизайнеры, кидайте на холст фигуры, картинки и текст. У нас полет творчества — где хотим, там и поставим.

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

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

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

Конструкторы сайтов: дадим дизайнерам полную свободу — drag&drop куда угодно. Мы потом разберемся, как это всё закодить, главное, чтобы было красиво. Всё сделали? — теперь переводим эту красоту в код. Вот как надизайнили, так и переводим — всё четко на своих позициях, и добавим еще оборачивающих элементов побольше, чтобы ничего не развалилось.

О, у вас тут еще мобильная версия есть? Это вы заново всё собирайте. Вот вам другой размер экрана — прошлая красота сюда не влезает, так что всё подгоняйте ручками, уменьшайте, переставляйте. Когда закончите, мы это тоже в код переработаем. Больше версий, больше кода.

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

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

Браузер: графику читать не умею, умею только язык верстки — html и css. Мне бы четкую структуру и иерархию элементов — куда тут у вас что вложено и кто кому родитель? Читаю всё, что написано — чем больше наворочено, тем медленнее загружаю.

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

Важно понимать:

Язык дизайна — графика, координаты и фиксированные величины (px),
язык верстки — иерархия, вложенность элементов и относительные величины (%, em, vh, vw и т.д.).

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

  1. Начиная создавать сайт из дизайнерского подхода, сложно прийти к хорошему результату с технической точки зрения. Сайт вероятно будет выглядеть, как на макете, но внутри — нагромождение лишнего неоптимального кода. Если только вы не напишете код самостоятельно или не делегируете эту задачу разработчику.
  2. Мобильная адаптация сайта, созданного в конструкторе на абсолютах, — это полная его пересборка. Придется вручную перестраивать лейаут, переставлять все элементы и менять их размеры.
  3. Внесение изменений в дизайн сайта, особенно многостраничного — очень трудоемкий процесс. Доработки на этапе создания сайта или дополнительные правки от клиента занимают много времени, т.к. при добавлении новых элементов или изменении размеров нужно передвигать и менять все остальные вручную.

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

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

Принципы верстки сайтов на flex

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

Родитель (div-блок) управляет дочерними элементами (item)
Родитель (div-блок) управляет дочерними элементами (item)

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

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

Авто-лейаут в Figma
Авто-лейаут в Figma

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

display: flex = auto layout

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

  • направление выравнивания: по горизонтали или вертикали или обратный порядок,
  • параметры выравнивания по обеим осям: по левому или правому краю, по центру, равномерное распределение,
  • перенос: возможность переноса элементов на следующую строку,
  • параметры выравнивания строк при переносе: по верхнему или нижнему краю, по центру или равномерное распределение,
  • расстояние между элементами,
  • определение порядка элементов.
Опции flex в коде
Опции flex в коде

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

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

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

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

Панель Слоев в Редакторе дизайна Taptop
Панель Слоев в Редакторе дизайна Taptop

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

Так у вас получится говорить с браузером на одном языке, даже не будучи программистом.

Авто-лейаут в Taptop
Авто-лейаут в Taptop

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

Кейс №1: Как выравнивать блоки в авто-лейауте

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

Опции выравнивания по высоте и переноса элементов
Опции выравнивания по высоте и переноса элементов

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

Гибко менять размеры элементов в Taptop можно благодаря относительным единицам измерения. Вы можете устанавливать размеры в процентах от родительского элемента (%), а также в процентах от ширины или высоты экрана (vw и vh). Это помогает в несколько кликов перестраивать лейаут при изменении в дизайне или для адаптации под разные экраны.

Ширина каждого блока — 50%
Ширина каждого блока — 50%

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

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

Выравнивание по вертикали

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

Расстояние по вертикали между элементами — 20px
Расстояние по вертикали между элементами — 20px

Кейс №2: Как адаптировать сайт для разных устройств

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

Отображение для широкоэкранных мониторов
Отображение для широкоэкранных мониторов

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

Отображение для смартфонов
Отображение для смартфонов

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

Главный бонус:

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

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

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

Адаптация для разных устройств

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

Кейс №3: Как выравнивать элементы на карточках

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

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

Выравнивание элементов на карточках по горизонтали

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

Выравнивание элементов на карточках по вертикали

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

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

Кейс №4: Как вносить правки — менять структуру блоков и контент

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

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

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

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

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

Добавление новой карточки

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

Добавление в карточку нового элемента

Авто-лейауты vs абсолюты

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

Абсолюты:

  • Удобно на этапе создания дизайна, когда еще не представляешь результат. Хороший подход для графических программ — Figma, Sketch, Photoshop.

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

  • Удобно при верстке сайта, когда важна мобильная адаптация и возможность быстрого внесения изменений в дизайн и контент.

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

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

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

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

1515
2 комментария

Зачем Вы тянете транскрипцию "лейаут", когда можно по-русски понятно написать "макет"

Ответить

Да, могут быть разные варианты. Бывает сложно определиться, каждому свое нравится. Мы решили остановиться на этом, т.к. кажется, что "авто-лейаут" больше раскрывает смысл, чем "макет". Опять же можно на английскую версию интерфейса переключиться, многим так даже удобнее.

Ответить