Как собирать многостраничные сайты в 2 раза быстрее. И тратить в 4 раза меньше времени на правки от клиента

Ищем бустер скорости создания многостраничных сайтов. Особенно не шаблонных, а с кастомным дизайном. Хотим сократить повторяющиеся шаги и не делать одни и те же настройки элементов на каждой странице. Особенно, если страниц больше 10. Мечтаем быстро вносить правки от клиента. Особенно глобальные. Вы с нами? Расскажем, как ускорить создание многостраничников в билдере сайтов Taptop. Посмотрим на примерах работу с компонентами и настройку собственной дизайн-системы.

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

Отдельная боль — правки от клиентов. Когда уже собрал сайт — и внезапно оказалось, что нужно поменять размеры заголовков или цвет кнопок, перестроить меню или добавить картинки в блоки с отзывами. Для лендинга это еще можно пережить, но делать такие правки на сайте 10, 20 или 50 страниц — очень существенные вложения сил и времени.

Как сделать себе лучше? Прямой путь к ускорению работы — автоматизировать повторяющиеся действия. В конструкторе сайтов Taptop для этого есть много полезных инструментов. Сегодня остановимся на двух из них:

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

Это главный принцип компонентов. Конечно, «10 раз» — это просто пример, компоненты можно переиспользовать бесконечно. Они делают работу удобнее и быстрее — можно избавиться от рутины и не повторять несколько раз одни и те же действия при создании элемента.

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

В видео показываем, как добавлять компоненты на страницу:

Кажется, что при обычном копировании элемента мы получим такой же результат, как при использовании компонента. Ведь копий тоже можно сделать любое количество. Но есть отличие. Копия элемента никак не связана с оригиналом. Если мы изменим оригинал, то копия не поменяется. Так что любые правки придется делать отдельно для каждого скопированного элемента.

Посмотрим на видео пример добавления кнопки в компонент меню:

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

Дизайн-система — удобный инструмент для поддержания единого стиля сайта и консистентности интерфейса. В Taptop можно разработать дизайн-систему любой степени сложности с помощью css-классов.

Css-класс — это понятие из профессиональной верстки, описывающее стили элемента. Но мы не будем писать код, а сделаем всю работу с помощью визуального интерфейса.

Коротко о том, как работать с классами:

• один раз настраиваем дизайн элемента
• сохраняем настройки в класс, придумав для него название
• каждый раз, когда нужен новый элемент с подобным дизайном, добавляем ему этот класс

Посмотрим алгоритм создания дизайн-системы на практике:

1. Находим в макете повторяющиеся элементы стиля.

Пример: заголовки H1, H2 и других уровней, кнопки нескольких размеров, поля формы. Также выписываем основные цвета, используемые в дизайне. Возможно, у вас в дизайн-макете уже есть Style guide — тогда этот этап работы уже готов.

2. Создаем в проекте отдельную страницу для Style guide.

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

3. Создаем элемент и настраиваем параметры дизайна.

Примеры элементов и параметров:

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

4. Придумываем для элемента название класса, которое его описывает.

Примеры: text--h1, btn--large, container--content

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

Создание дизайн-системы требует времени. Но это будет гораздо быстрее, чем отдельно настраивать дизайн каждого элемента на нескольких страницах сайта.

Посмотрим на видео пример создания новых элементов по образцу из Style guide:

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

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

Например, редактируем размер шрифта у одного из заголовков H2 (выбрав у него класс text--h2) — и шрифт изменится у всех заголовков H2 на всех страницах сайта.

Подобным образом мы можем поменять любые параметры дизайна — от цвета шрифта или фона до отступов или позиционирования элемента.

Для редактирования мы можем выбрать любой элемент с нужным классом. Можно вносить правки в элементы на странице Style guide или на любой рабочей странице сайта. Результат будет один и тот же — поменяются все элементы с этим классом.

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

Попробуем представить, какую экономию времени дает использование дизайн-системы при редактировании проекта. Например:

• Дано: сайт из 10 страниц, на каждой 10 блоков.
• Задача: Нужно поменять ширину контейнера во всех блоках с 960 до 1200 пикселей.
• Вопрос со звездочкой: Сколько времени займет такая задача, если настраивать каждый блок по отдельности?

А теперь представьте, что эту задачу можно решить, всего лишь изменив ширину одного блока на одной странице — и все остальные подстроятся под него. Как думаете, сколько времени мы сэкономим? Делаем ставки)

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

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

1. Структурировать страницы сайта и составляющие их блоки.
2. Выделить элементы, дизайн и контент которых будет одинаковым на всех страницах. Для них лучше использовать компоненты.
3. Выделить элементы с похожим дизайном и продумать, какие классы будут использоваться для их настройки. Также сделать список общих параметров дизайна сайта (например, основные цвета). Это основа для дизайн-системы проекта.

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