Как команда разработки в JetBit свою “Тильду” писала

Заказчик
Маркетинговое агентство «Market Group» — это коммуникационное агентство, которое входит в ТОП 15 национального рейтинга коммуникационных агентств HP2K, членство в АКМР, АКАР, РАСО
Задача
Разработать новый сайт с удобной админкой и конструктором страниц, как на Tilda, чтобы для SEO был удобен и всё это недорого чтобы было.

Компании приходят к нам за эффективными решениями и экспертизой, чтобы мы подсказали, как лучше и быстрее решить их задачи. За 15 лет работы мы научились находить самые короткие пути к решению проблем клиентов, которые бы оставались рентабельными для их бизнеса и могли потом поддерживаться не только самими авторами разработки. С одной стороны стараемся использовать готовые решения или старые наработки, которые подстраиваются под новые задачи, для минимизации затрат клиентов, а с другой — обеспечить удобство использования и гибкость продукта. Когда клиенты приходят с просьбой сайта, который можно было бы редактировать конструктором, сразу на ум приходит лидер рынка по конструкторам сайтов Тильда. Но с уходом с российского рынка из-за санкций другого сервиса конструктора сайтов  Wix, использование Тильда становится рисковым.  О поиске компромиссов и золотой середине и будет этот кейс. 

 Поехали!

марком

ПАРА СЛОВ О КЛИЕНТЕ И ЗАДАЧЕ

«Market Group» — Это коммуникационное агентство, которое входит в ТОП 15 национального рейтинга коммуникационных агентств HP2K, членство в АКМР, АКАР, РАСО. С 1999 г.  успешно работает с крупными корпоративными и государственными клиентами, привнося в эти проекты креатив и современные технологии. Сайт такой компании должен обладать WOW эффектом и делать упор на портфолио по выполненным проектам, чтобы привлекать различные тендерные комиссии при беглом взгляде последних. А чтобы был траффик и по коммерческим клиентам, сайт должен быть и SEO оптимизированным.

идеи в ТЗ

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

Цели

  • Создать сайт на готовой системе управления сайтом с открытым кодом, которая имела бы основной функционал управления сайтом: распределение прав пользователей, создание редактирование удаление страниц, шаблонизатор и т.п.;
  • Создать визуальный конструктор страниц из разных настраиваемых типовых блоков;
  • Листинг портфолио должен был иметь динамическую структуру, чтобы блоки разных размеров собирались в цельную сетку без пробелов (что-то вроде тетриса).
  • Перенести информацию со старого сайта и заполнить новые страницы.

В итоге — сделать более привлекательный современный сайт и минимизировать время его дальнейшего наполнения и обслуживания.

Варианты решения

Исходя из вводных данных были отброшены варианты реализации на фреймворках с написанием собственного конструктора. Из распространенных готовых бесплатных решений из нашего стека оставались Тильда, WordPress + Elementor и ModX (Evolution). 

Wordpress — нормальная история для клиентов, которым нужно что-то доброе и вечное для блога, с максимальными возможностями из коробки. Тильда хороша для визиток и лендингов. Тильду отмели, так как она не отвечала удобству управления многостраничным сайтом, его сео оптимизации и динамическому листингу портфолио ( + с недавней блокировкой конструктора Wix, Тильда на очереди на уход из России).  WordPress с Elementor отпугнул тем, что для гибкого управления блоками elementor уже нужен не бесплатный плагин Elementor Pro и тем, что при долгой эксплуатации сайтов на WP с множеством реализаций функционала через готовые плагины с их постоянным обновлением част закрадываются какие-то баги в работе сайта. Потому остановились в выборе на ModX Evolution, как готовое гибкое решение, оставался вопрос с конструктором. 

КАК РЕШАЛИ ЗАДАЧУ

Для реализации конструктора страниц на базе CMS ModX Evo за основу был взят функционал ModX MultiFields. В MODX MultiFields — это дополнительное поле (TV — Template Variable), позволяющее работать с набором полей внутри одного TV. Оно особенно полезно, когда необходимо создать сложную структуру данных (например, несколько текстовых полей, изображений, ссылок и т.д.), которая будет храниться в одном месте и выводиться на странице.

### Основные возможности MultiFields:

  1. Набор полей внутри TV — MultiFields позволяет создавать группы полей (текстовые, изображение, ссылка и т.д.) и выводить их как единое целое.
  2. Гибкость в настройке — Вы можете добавить различные типы данных, такие как:
  •    Текстовые поля (input)
  •    Поля для ввода ссылок
  •    Поля для загрузки изображений
  •    Выбор даты (Datepicker)
  •    И другие кастомные поля.
Удобство редактирования — Поля в MultiFields могут быть динамическими (их можно добавлять, удалять и редактировать прямо из интерфейса MODX).

Таким образом, MultiFields значительно упрощает работу с набором данных в одном TV, обеспечивая удобное управление и гибкий вывод. Технически работает так: 

Указывается для какого-то TV тип multifields и создаётся одноимённый файл файл-конфиг. Этот файл содержит многоуровневый массив блоков и их настроек.  Блок содержит список полей, их типы и шаблоны для вывода как в админке, так и во фронте. Блок может быть публичным - его можно выбирать в админке в конструкторе, а может быть приватным - в конструкторе он не виден, но его можно вставлять внутрь другого блока в качестве поля. Таким образом можно создавать блоки с полями большой вложенности. Вместе с этим, в настройках поля можно указывать, что поле, это контейнер множества блоков: внутри поля можно плодить вложенный блок. В этом случае появляется + и можно множить однотипные блоки нужное число раз. Это применимо для повторяющихся блоков, списков, галерей.

Используя этот файл-конфиг, в админке модх специальный плагин скрывает поле TV и выводит конструктор. Визуальное оформление блоков можно настраивать в css. Собранная конструктором страница сохраняется как json в TV.

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

Что еще удалось решить

  • Исправили показатели Google Page Speed и оптимизировали скорость загрузки страниц;
  • Сделали динамическое построение миниатюр страниц портфолио в списках, которые разделены по тегам. Если работа относится к нескольким тематикам сразу, то в каждом списке она может занимать разное положение в сетке проектов. Это поведение настраивается в админке ;
  • Скорректировали sitemap.xml и robots.txt, сгенерировали карту сайта;
  • Перевезли страницы на ModX;
  • Подключили к страницам конструктор из модуля;
  • Перенесли исполнение части JS-скриптов в отдельные потоки;

Таким образом, используя наработки продуктового подхода. Команда «JetBit» использовала решения, которые максимально соответствуют потребностям клиента и основаны на анализе задач и болях заказчика. Исходя из аналитики, мы выделили ключевые аспекты проекта и определили стратегию, которая обеспечивает оптимальное сочетание эффективности и функциональности. Работа над проектом стартовала в январе 2024 года. В команде со стороны «JetBit» были бизнес-аналитик, дизайнер, full-stack программист, контент менеджер и аккаунт менеджер  и один менеджер был со стороны клиента. Весь процесс внедрения изменений завершился через 2 месяца.

Был медленный и устаревший вариант сайта, а теперь — конфетка, комбайн, на котором можно все, что угодно. На конструкторе собрали около 90 страниц: портфолио и экспериментальные для А/Б тестов. Перенесли информацию со старых страниц; контент стал управляемым, менеджерам больше не нужно было изучать программирование в свободное от основной работы время. Стало возможным полное изменение структуры страниц на фронтенде. Переписанное на современной CMS ModX Evolution, которая в основе своей создана на Laravel и компонентный подход позволили объединить хранение скриптов, ускорить загрузку сайта на 45%.

РЕЗУЛЬТАТЫ РАБОТЫ

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

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

  • быстро и бесплатно собирать яркий лендинг;
  • размещать полезные материалы и кастомизировать любые страницы;
  • внедрять любые не шаблонные решения там, где они нужны;
  • наращивать положительный клиентский опыт;
  • оптимизировать скорость загрузки страниц
  • забыть про ограничения!

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

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

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

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

ПРО SEO ОПТИМИЗАЦИЮ САЙТА 

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

Также это решает проблему дальнейшего роста. Если бизнесу в будущем понадобятся сложные, дорогие в обслуживании и ресурсозатратные связки ПО/сервисов. Какой-нибудь условный airtable + zapier + webflow + еще пару сервисов, то модульная система ModX позволит расти без полного рефакторинга проекта. 

Для того, чтобы было удобно администрировать такие сайты, добавляются шаблоны метатегов, массовое редактирование свойств страниц и т.п. , чтобы количество действий, которые надо совершить для внесения изменений на все 100500 страниц, было минимальным. 

РЕЗЮМЕ

  • в 5 раз ускорили работу менеджеров по наполнению сайта.
  • в 2 раза ускорили онбординг новых контент-менеджеров
  • сделали более конверсионный сайт

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


Перейти на сайт

В карточку агентства

Письмо автору кейса

Пользуйтесь реальным опытом в IT и следите за успехами потенциальных подрядчиков и конкурентов
Подпишитесь на рассылку
Читайте также
Кейсы по теме#Маркетинг, дизайн, реклама
Проекты компании Proactivity Group