А что вообще такое Taptop
Tilda или Taptop: зависит от задачи
А потом Taptop написал о нас
Новый сайт стал рабочим примером для клиентов
Что мы поняли после переезда
У агентств есть особый тип внутренних проектов — собственный сайт. Клиентские задачи всегда идут первыми: у них есть сроки, ответственные, запуски. А свой сайт ещё немного поживёт, даже если команда уже давно выросла из него.
У нас получилось примерно так.
Предыдущие версии сайта Эдс были собраны на Tilda. Для своего времени они отлично решали задачу: тёмная тема, кислотные акценты, много анимации — сайт был скорее демонстрацией характера агентства, чем спокойной корпоративной страницей.
Но за несколько лет изменился сам Эдс. Появилось полноценное веб-направление, стало больше услуг, кейсов и контента. Мы начали делать более сложные сайты клиентам — и в какой-то момент стало странно, что собственный сайт уже не показывает уровень, до которого выросла команда.
Поэтому решили пересобрать его сами и заодно попробовать платформу, к которой давно присматривались, — Taptop.
Проблема была не в Tilda
Сразу оговоримся: мы не переезжали потому, что Tilda внезапно стала плохим инструментом. Мы продолжаем с ней работать.
Если нужен понятный лендинг, промостраница или проект с жёсткими сроками, Tilda может быть вполне рациональным решением. Мы хорошо знаем платформу, понимаем её возможности и можем достаточно точно прогнозировать сроки.
Но собственный сайт Эдс постепенно стал для неё не самым удобным сценарием. На сайте много внутренних страниц: направления, услуги, кейсы, статьи. Контента становится больше, появляются новые проекты и форматы.
На предыдущей версии каждая новая промостраница довольно быстро превращалась в отдельный небольшой дизайн-проект. Копировались блоки, появлялись новые решения, менялась композиция. В результате страницы начинали всё сильнее отличаться друг от друга — не потому, что так было задумано системой, а потому, что каждая создавалась в своё время и под свою задачу.
Хотелось решить сразу две вещи: сохранить свободу в дизайне, анимации и нестандартной вёрстке, но при этом навести порядок внутри большого сайта, чтобы новую страницу можно было добавлять без очередной ручной пересборки всего вокруг.
А что вообще такое Taptop
Если название пока ни о чём не говорит — это нормально.
Taptop — российская no-code-платформа, которую сама команда называет визуальным редактором кода. В ней можно работать с flex- и grid-сетками, компонентами, классами, брейкпоинтами, коллекциями, подключать собственный код и при необходимости экспортировать HTML, CSS и JavaScript.
Для нас интереснее всего оказались две вещи: свобода в вёрстке и коллекции. Здесь меньше ощущения, что дизайн нужно подстраивать под заранее заданную логику конструктора, а повторяющийся контент можно собрать в систему.
Коллекции — это встроенный способ управления однотипными данными. Можно один раз собрать дизайн страницы, задать поля, а дальше создавать на этой основе новые услуги, статьи, проекты или другие сущности с разным содержанием.
Для небольшого лендинга это может быть не принципиально. Для сайта агентства, где постоянно появляются кейсы, статьи и услуги, — уже очень.
В нашем случае Taptop оказался интересен именно как промежуточный вариант: больше свободы и системности, чем нам требовалось от привычного конструктора, но без полноценной кастомной разработки с отдельной командой фронтенда и бэкенда.
До этого мы пробовали Webflow, но этот опыт не захотели повторять. Кастомная разработка для собственного сайта тоже выглядела избыточной по ресурсам. Поэтому решили проверить Taptop.
Как проверяли новую платформу
Новый инструмент лучше сначала проверить на своём проекте
Это был вполне сознательный выбор. Можно посмотреть презентацию платформы, пройти курс, собрать тестовую страницу и решить, что всё понятно. А потом взять клиентский проект и обнаружить ограничения уже внутри реальной задачи.
Нам такой сценарий не очень нравился.
Собственный сайт для эксперимента подходит лучше: можно проверить не демонстрационный лендинг, а настоящий проект с большим количеством страниц, адаптивами, анимацией, контентом, аналитикой, редиректами и всем остальным, что обычно появляется в процессе.
Основную сборку взял на себя Кирилл, руководитель веб-направления Эдс. До начала проекта он прошёл бесплатный курс Taptop. Базовые знания HTML, CSS и JavaScript у него уже были, поэтому привыкнуть к логике редактора оказалось несложно.
При этом работа над сайтом шла параллельно с клиентскими задачами и управлением направлением. Вся сборка с нуля заняла чуть больше двух месяцев.
Что изменилось в работе с сайтом
Самое полезное — коллекции
Главное преимущество нового подхода стало заметно не на первом экране, а на внутренних страницах.
На сайте Эдс есть шесть больших направлений, услуги, кейсы, блог. Всё это нужно не просто один раз опубликовать, а потом регулярно обновлять и расширять.
Раньше новая внутренняя страница могла потребовать заметного количества ручной работы. Теперь для однотипных страниц можно сначала собрать структуру, настроить поля и условия отображения, а затем наполнять её контентом. Так были собраны крупные внутренние страницы: у каждой своё содержание и свои кейсы, но общая архитектура остаётся управляемой.
Для агентского сайта это принципиальная вещь, потому что он никогда не бывает окончательно готов. Сегодня вышел новый кейс, завтра появилась услуга, через месяц нужно добавить раздел, а ещё позже — новый формат контента.
Если каждое такое изменение требует заново собирать дизайн, сайт быстро начинает жить отдельными кусками. Коллекции эту проблему сильно упростили.
При этом мы не стали пытаться загнать в них вообще всё. Например, кейсы Эдс сильно отличаются друг от друга: где-то много изображений, где-то большая история, где-то нестандартная последовательность блоков. Для них оставили более свободную сборку через Rich Text и отдельные элементы.
Логика получилась простой: систематизировать то, что действительно повторяется, и не ограничивать то, что должно оставаться разным.
С первым экраном пришлось разбираться отдельно
Самой заметной технической проблемой стала большая Lottie-анимация на главной. Первоначальный JSON-файл весил около 50 МБ.
Анимация работала, но первый экран загружался слишком долго. Для эффекта, который должен создавать первое впечатление от сайта, это довольно существенная проблема.
В итоге анимацию пришлось разбить на отдельные JSON-файлы и изображения, а сами файлы вынести в Яндекс Cloud. После оптимизации всё заработало нормально.
Сам случай довольно показательный. На этапе дизайна легко оценивать анимацию по тому, насколько хорошо она выглядит. На реальном сайте появляется второй вопрос — насколько хорошо она работает.
И если красивого эффекта приходится долго ждать, его ценность быстро уменьшается.
Без кода тоже не обошлось
Taptop — no-code-платформа, но мы изначально не ставили перед собой задачу сделать весь сайт принципиально без единой строки кода.
Там, где возможностей редактора хватало, использовали их. Где требовалась нестандартная механика — добавляли кастомный код. Например, он понадобился для отдельных решений с коллекциями и горизонтального скролла.
Для нас это скорее плюс. No-code хорош не потому, что код запрещён, а потому, что типовые задачи можно решать быстрее, а в нестандартной ситуации инструмент не мешает пойти дальше.
С какими ограничениями столкнулись
Что оказалось неудобным
Совсем без компромиссов, конечно, не получилось.
На момент нашей разработки весь контент коллекций приходилось заводить вручную. В проекте их около пятнадцати, основные — блог, кейсы и услуги. Когда материалов много, наполнение становится отдельной заметной задачей.
Не хватало некоторых возможностей работы коллекций с виджетами и отдельных типов данных. Были сложности и с квизами: для рекламных проектов мы используем их регулярно, а подходящего нативного сценария для глубокой кастомизации на тот момент не нашли.
При переносе пришлось отдельно разбираться с редиректами старых URL. Часть из них не заработала с первого раза, но вопрос быстро решили с поддержкой Taptop.
Некоторые ограничения платформы с тех пор могут меняться — Taptop активно развивается. Поэтому здесь речь именно о нашем опыте на момент создания сайта, а не о постоянном списке недостатков продукта.
Но главный вопрос после проекта был даже не в функциональности, а в скорости нашей собственной работы.
Tilda или Taptop: зависит от задачи
На Tilda команда работает давно. Мы знаем, где могут возникнуть сложности, сколько займёт тот или иной этап и что реально можно обещать клиенту по срокам.
С Taptop такого объёма опыта у нас пока нет. Возможностей больше — но вместе с этим появляется больше вариантов решения одной и той же задачи. Иногда на выбор и проверку этих вариантов требуется дополнительное время.
Поэтому после проекта мы не решили:
«Всё, Tilda больше не используем».
Наоборот, теперь выбор стал шире. Для одного проекта рациональнее Tilda, для другого — Taptop, а для третьего нужна полноценная кастомная разработка.
Платформа сама по себе не должна становиться идеологией. Клиенту в конечном счёте нужен не Taptop, Tilda или определённый стек. Ему нужен сайт, который подходит его задаче, нормально работает, развивается вместе с бизнесом и укладывается в разумные сроки и бюджет.
Выбрать для этого технологию — уже наша работа.
Подробнее о том, как мы проектируем и разрабатываем сайты, — в направлении «Сайты».
А потом Taptop написал о нас
У этой истории появился ещё один приятный поворот. После запуска команда Taptop выпустила большой кейс о переезде сайта Эдс у себя в блоге.
Нам это, конечно, приятно. Одно дело — самим рассказывать, что сделали интересный проект на новом для себя инструменте. Другое — когда команда самого продукта считает этот опыт достаточно показательным, чтобы подробно разобрать его у себя.
Причём их материал получился полезным дополнением к нашему: там больше технических деталей, скриншотов редактора, особенностей работы с коллекциями, кастомным кодом и комментариев команды.
Так что если хочется посмотреть на тот же проект глазами Taptop — вот их версия истории.
Новый сайт стал рабочим примером для клиентов
После проекта у нас появился не только новый сайт Эдс. Появился ещё один инструмент, который мы теперь понимаем не по документации и демо, а по собственной практике.
Мы знаем, как устроена сборка большого сайта, как работают коллекции, где потребуется код, с чем возникают сложности при переносе, что происходит с тяжёлой анимацией и сколько времени занимает освоение новой платформы.
Это намного полезнее любой презентации для клиента. Когда обсуждаем похожий проект, не нужно объяснять возможности платформы на абстрактных примерах — можно открыть ads.band и показать работающий сайт.
При этом Taptop для нас — не новый стандарт, на котором теперь нужно делать вообще всё. В веб-направлении задачи сильно отличаются: где-то важнее скорость запуска, где-то — сложная структура, где-то — интерактив и имиджевая подача.
Например, в сайте для бизнес-центра К7 задача была совсем другой: создать сильную цифровую презентацию объекта, спроектировать многостраничную структуру и отдельные сценарии под разные типы бизнеса.
Поэтому новый опыт с Taptop не заменил прежние подходы, а расширил выбор технологий под конкретный проект.
После собственного пилота мы начали использовать Taptop и в клиентской работе. Для нашего веб-направления это ещё один рабочий сценарий — новый вариант для проектов, которым уже тесно в более простом конструкторе, но полноценный кастом будет неоправданно сложным.
Что мы поняли после переезда
Главный вывод вообще не про Taptop.
Новый инструмент имеет смысл осваивать не потому, что он новый. Переезд оправдан, когда существующий подход действительно начинает ограничивать проект.
В нашем случае таких ограничений накопилось достаточно: сайт вырос, внутренних страниц стало больше, хотелось свободнее работать с дизайном и при этом получить более управляемую архитектуру. Taptop подошёл под эту задачу.
Но не менее полезным оказался сам способ его проверить.
Сначала сделали реальный проект для себя — со всеми ограничениями, ошибками и доработками. И только после этого начали использовать накопленный опыт в клиентской работе.
Для агентства это, пожалуй, самый разумный способ осваивать новую технологию: сначала разобраться на собственном проекте, а потом уже предлагать её другим.
Если вы тоже выросли из текущего сайта, выбираете между конструктором, Taptop и кастомной разработкой или просто не понимаете, нужен ли вам переезд, — можем посмотреть на задачу вместе. Иногда действительно нужна новая платформа, а иногда разумнее оставить существующую и исправить то, что мешает ей нормально работать.
