Tilda Publishing или Webflow

Что и для каких задач выбрать.

Tilda Publishing или Webflow

Предыстория: зачем нам так много?

А вы знали, что конструктор сайтов Squarespace вышел на биржу? Без IPO, прямым листингом, но вышел! Согласно расчетам W3Techs, на Squarespace работает 1.9% из топ-десяти миллионов сайтов мира. И Squarespace, и Wordpress (больше половины рынка), и Битрикс, и Тильда — это всё системы управления содержимым ваших веб-сайтов. В рейтинге W3Techs я насчитал 76 таких CMS (content management system) систем. 73 из них «захватили» себе от 0,1% до 2% рынка, получают от каждого платящего клиента жалкие 15-20 долларов в месяц и, судя по всему, этим довольны. Существуют и развиваются!

Но как в этом разобраться бедному новому пользователю, который впервые задумался о разработке собственного сайта?

Обычно такие люди реагируют на советы соседей, партнеров по бизнесу, по сексу… и рекламу в интернете. Получается, что «кто больше всего пиарится в моменте», тот и получает себе очередного клиента.

Последние месяцы, помимо традиционных WordPress-а и Wix-а, слышнее всех заявляют о себе Webflow и Tilda Publishing. К нам в студию приходит все больше запросов на сравнение этих двух CMS. Потребитель нынче пошел дотошный. Хочет знать что его ждёт, когда он останется один на один с… чем? Даже не с исходным кодом, а со ссылкой, логином и паролем (это если повезет).

Что ж, давайте попробуем их сравнить. Чувствую, что имею на такой обзор право, так как, не смотря на наличие банды профессиональных бойцов, лично сделал десятки сайтов на Тильде и Webflow. Вот такой у меня «бзик». Чтобы открыть ресторан, я сначала поработал официантом. Чтобы удержать ресторан, я периодически мою в нем посуду; )

Коротко для тех, кому некогда

Главное отличие Webflow — это визуальный редактор HTML и CSS. Бонусом идет хостинг, встроенная база данных, электрокоммерция и неплохой движок анимаций. Webflow лучше сравнивать с Pinegrow или MODX. То есть с профессиональными веб-редакторами.

Tilda Publishing — это конструктор лендингов и сайтов. Её правильнее сравнивать с Wix, WordPress. com, Squarespace, Elementor и Readymag. Кроме того, поскольку Tilda обладает функциями статистики и CRM, автоматические агрегаторы сравнения записывают её в конкуренты ClickFunnels и HubSpot.

Много лет назад Тильда мне попалась в каком-то ТГ-боте, выдающем по разным запросам разные инструменты маркетинга. На тот момент сайт моей компании лежал в пепле вирусного пожара. Сайт тот был сделан на WordPress и ни одна душа на свете (включая души хостинг-компании) не могла ответить на вопрос: «как же так получилось?! »

Тильда меня сразу же приворожила своей простотой, шаблонами, готовыми блоками и чуть ли не ежедневно пополняемым списком готовых блоков и интеграций. Сделав сайт для себя, начал делать и клиентам. В общем, всё у нас с Тильдой было хорошо до появления ужасного слова из трех букв: SEO. Ведь что собой представляет код сайта на Тильде… Не видели ни разу? Правильно: мусорную свалку близ Маарду.

Tilda Publishing или Webflow

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

Мне лично кажется, что главные преимущества Webflow зарыты вовсе не в самом продукте, а в его Университете и Комьюнити. Университет Webflow берет призы в области обучающих видео. А комьюнити устроено так, что я могу утром, перед завтраком, закинуть в фб-группу Webflow очень тупой вопрос. И вот уже я убираю последние крошки со стола, а телефон уже дрожит — прилетают сообщения. И не в стиле «ты чо тупой?! », а вполне себе полезные развернутые советы, со ссылками и лайфхаками.

Главной обратной стороной медали с надписью Webflow было озарение: его написали верстальщики для себя любимых. То есть для Webflow-вселенной нормально нанести заголовок на страницу с помощью вот такой цепочкои действий: добавить секцию, добавить контейнер, добавить div, добавить… нет, не Text, а Heading… Что, некрасиво? Давайте поиграем с Margines и Padding. Position Static? Absolute? Relative? А про Z-index не забыли? Ой, а вы хотите, чтобы Heading как-то коррелировал с лид-текстом? Тогда добавьте ещё div, потом ещё div… И сделайте один из div-ов флексом или даже гридом! И так далее.

Разумеется, столь близкое соответствие UI-настроек семантике HTML-а и CSS-а приводит к тому, что код у сайта на Webflow будет самым что ни на есть минималистичным и, с точки зрения SEO-шников, элегантным.

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

Лобовое столкновение

Поехали:

Сервера в РФ

Tilda — да

Webflow — фигушки.

Русский интерфейс

Tilda — да

Webflow — вы смеетесь?!

Готовых блоков

Tilda — наверное больше сотни уже

Webflow — чуть больше дюжины.

Интеграции

Tilda — много, но российских. Иностранные перестали работать с недавних пор. Но можно интегрироваться с вебхуками!

Webflow — очень много и лучшее со всего мира.

Бэкенд

В Tilda он как бы не нужен. Да что там, ни о каких таблицах или веб-приложениях тут просто нет и речи.

В Webflow бэкенда, как такового, тоже нет. Но есть инструменты сопряжения с AirTable, Google Sheets и прочими сервисами обладающими работоспособным API.

База данных

Tilda мимо.

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

eBusiness

На Tilda можно создавать небольшие интернет-магазины.

На Webflow — малые и средние.

Взаимодействие с no-code инструментами

Tilda — почти нет.

Webflow интегрируется с AirTable, Wized, Integromat, Intercom, Shopify, Zapier, Foxy. io… По-сути список бесконечен потому, что… добро пожаловать в мир ноукода!

Легкость освоения

Tilda — легкотня (кроме анимаций, в которых иногда чорт ногу сломит).

Webflow — если вы не уставший от Visual Studio Code фронтенд-разраб, вам сначала будет трудно, долго, потом снова трудно и… снова долго.

Легкость изменения дизайна уже работающего сайта

Tilda. Хотите поменять цвет всех H1-заголовков вашего многостраничного сайта? Я вам сочувствую! Хотите «поиграть» с межблоковыми расстояниями? Флаг вам и титаническое терпение в руки!

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

Memberships / личный кабинет

Tilda — есть своё, но без авторизации через аккаунты соцсетей и почтовиков. И нету там функций самообслуживания, типа Sign Up или «забыл пароль».

Webflow — есть своё в бетте, но может интегрироваться с флагманами и тогда вообще всё есть.

Мультиязычность сайта (с автоматическим переводом нового контента)

Tilda — нет.

Webflow — есть, хотя и через партнерское решение.

Обучение

Tilda — да, очень хорошие разнообразные курсы на русском языке.

Webflow — очень да, но только на английском.

Комьюнити пользователей

У Tilda не нашел такого, чтобы кто-то бесплатно для меня волонтёрил.

У Webflow крутое комьюнити и на сайте, и в соцсетях. Там можно не только получить реальную помощь по своим вопросам, но и найти исполнителя или даже клиента.

Встроенная CRM

В Tilda она просто есть, хоть и простейшая.

В Webflow её просто нет.

Встроенная аналитика/статистика

Как и про половину всей этой сравнительной таблицы, гики могут сказать «а нафига она нужна в CMS?! » И будут правы на своем высоком гиковском уровне. А для простого владельца сети кофеен, знате ли, удобно заглядывать в личный кабинет Тильды не только, чтобы цены в меню изменить, но и статистику посещений посмотреть.

И нет, в Webflow аналитики нет.

CDN

Content Delivery Network (CDN) — это такая сетка из серверов, которая позволяет сайт рожденный и выращиваемый на серверах Зимбабве загружать в ваш браузер так быстро, словно он хостится буквально за углом. И у Тильды, и у Webflow договора с такими сетками есть.

Адаптивная верстка

Оба наших «конкурента» позволяют одним щелчком мыши увидеть разрабатываемый блок веб-страницы в режиме десктоп, планшет, горизонтальная и вертикальная мобилка. Но! В Tilda это будет только один блок. А в Webflow — вся страница. Плюс, в Вебфлоу вы можете создать лэйауты для широких сайтов: от 1440 и 1920 пикселей.

Среда разработки

Tilda — веб-браузер.

Webflow — веб-браузер.

Ответственность за контент

Это очень щепетильный вопрос, когда дело касается веб-хостинга. Обычно мы же с вами не читаем пользовательские соглашения. Быстренько регистрируемся, делаем сайт и живем припеваючи. Но в один не самый прекрасный день к нам приходит уведомление: «Уберите мат из вашего поста. Иначе удалим весь сайт». Так все чаще предупреждает своих пользователей Тильда. Не исключено, что если на сайте сделанном на Webflow вы начнете размещать экстремистский контент, вам не прилетит от этой CMS тоже. Жизнь учит нас тому, что за буллинг со стороны придурков отвечает та соцсеть, в которой они себя самовыражают.

Что говорят о себе сами вендоры:

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

Webflow — это простой в использовании и легко настраиваемый инструмент для создания сайтов методом drag-and-drop. Wix и Weebly имеют тенденцию ограничивать количество настроек, которые вы можете сделать. У них это называется компромиссом за отсутствие необходимости кодировать сайт. Webflow предлагает один из самых настраиваемых конструкторов сайтов на рынке.

Готовые шаблоны

Готовые дизайнерские шаблоны страниц и компонент — сладкая фишка обеих платформ. Webflow пошел еще дальше. Есть в нем такие штуки — называются «Символы». Их используют для управления повторяющимися элементами сайта. Грубо говоря, вы можете сделать шаблон из всего. Пример: по вашему сайту разбросаны спецпредложения отличающиеся по контенту, но исполненные в единой стилистике. Делаете для спецпредложений один символ один раз и задаете в нём кастомные поля: заголовок, описание, цена. Дальше вы можете размещать этот символ в любом месте сайта и, там где нужно, менять его содержимое. Потребовалось изменить оформление? Меняйте пожалуйста любой экземпляр символа. Например формат валюты. Мгновенно изменятся все экземпляры символа!

Признаком хорошей разработки на Webflow является то, что минимум 60% блоков на сайте представляют собой такие вот «символы»: подвал-футер, меню, контакты, прайс-лист и т д.

Редакторский доступ

Когда сайт готов, его хочется наполнить настоящим контентом, а не этим вашим lorem ipsum.

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

Webflow в режиме дизайна
Webflow в режиме дизайна

придется дать ему такой доступ, чтобы он смог изменять текст и картинки, но не смел бы напортачить в самом сайте. Tilda для этого все равно требует захода в режим редактирования в «кишках» сайта. А в Webflow вы просто приписываете к URL-у "? edit" и вуаля: редактируйте себе на здоровье сайт прямо на лету.

SEO

Я уже говорил об этом камне преткновения, но повторюсь: в Тильде SEO нет (теги и заголовки есть, а нормальной скорости загрузки и читабельного исходного кода нет). В Webflow SEO — пальчики оближешь. Платформа не только автоматически генерирует карту сайта, но и предоставляет API для оптимизационного софта.

Дизайн

Tilda. Если вам достаточно шаблонной страницы, дизайн у вас уже есть. Но в большинстве случаев сперва требуется собрать дизайн в Фигме.

Мало кто знает, что опытный дизайнер может делать дизайн прямо в Webflow. Да еще и с 3d-анимациями, знаете ли.

Работа с формами

Да простят меня основатели Webflow (кстати, у них русские корни), их платформа по формам пока что проигрывает Тильде. Последняя (кстати, стопроцентно российская разработка) на фронте дает возможность построить целый калькулятор. А на бэке сразу же привязать форму хоть к Битрикс24, хоть к amoCRM, хоть к Гугл-таблицам, хоть к TypeForm.

Быстрое изменение стиля

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

Кастомизации с помощью кода

Как бы ни был хорош no-code, но нам с вами частенько хочется большего, да?! И тот и другой инструмент дают возможность встраивания HTML-кода в веб-страницу. У Webflow есть ограничение в 10 000 символов. В него быстро утыкаешься, если работать с большими SVG. Но мы решаем эту проблемку путем хостинга мега SVG-файлов на GitHub… Эм… извините за терминологический снобизм. В общем, у обеих CMS с HTML всё ок. Еще бы JS на Webflow можно было бы… всё-всё, больше не буду сыпать страшными буквами.

Цены

Цена на доступ к премиум функциям и хостинг у обеих платформ сопоставима. Если же сравнивать цены на разработку, то проект на Тильде по понятным причинам будет дешевле. Но это на рынке; ))

Анимация

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

3d-анимация (куда ж без неё?! )

В Webflow есть специальное «гнездо», куда можно воткнуть JSON-объект с вашей Lottie-анимацией. В Тильде такого нет, но вопрос довольно быстро решается при помощи Lottie-плеера, который затем так же просто вставляется в HTML-блок.

Lotte Reiniger
Изобретательница силуетной анимации

Lottie — это формат файлов для векторной анимации, названный в честь Шарлотты Рейнигер, немецкого пионера силуэтной анимации.
Lottie основан на JSON и, таким образом, доступен для чтения человеком. Он является более легкой альтернативой анимированным файлам GIF и APNG. Будучи векторным, он не зависит от разрешения устройства. Он также может включать растровые графические элементы. Может быть программируемым и интерактивным.

В Webflow 3d — это стандартная настройка. Такая же, как «тень», «бордюр» и Spacing.

Что не влезло в таблицу

Давайте я вам кое в чем признаюсь, но с условием, что вы не разболтаете это моим клиентам. Каждый полноценный проект на Тильде — это не красота и наглядность, а куча условностей, CSS и HTML (а частенько и JS) блоков.

CSS для no-code Тильды
CSS для no-code Тильды
И вот так приходится размещать элементы, чтобы CSS работала
И вот так приходится размещать элементы, чтобы CSS работала

Нам это кажется бесчеловечным.

Но у Webflow тоже есть ограничения. По масштабированию, например. Огроменный сайт (сотни страниц) лучше на нем или не делать вовсе, или подключать к нему через API всякие бэкенды. Например, сервис Wized позволяет делать настоящие веб-приложения. С помощью Wized можно быстренько построить функционал логинов, платежи и многое другое без (!) единой строчки кода.

Есть еще один трудно формализуемый критерий сравнения. Если вы фанат WordPress-а или заложник Shopify-я, но обожаете дизайнерские возможности Webflow, добро пожаловать в «конвертер из Webflow». Запилили умопомрачительный е-магазин, ахалай-махалай и… вот уже он превращен в тему для Shopify.

В Тильде никакой межплатформенной конверсии и близко нет.

А можно совсем коротко?

Важные схожести двух платформ:

  • Экспорт исходного кода
  • Хостинг.

Правда, профессионалы говорят, что экспорт кода Тильды в известном смысле бесполезен. Миллиарды кодированных цифрами классов ставят в ступор даже самого опытного фронтенд-разработчика.

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

И да, я бы Тильду преподавал в средней школе, ей Богу.

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

Webflow — профессиональный инструмент быстрой разработки крутого сайта. Есть встроенная БД и хостинг.

ЗЫ

Нынче каждый блогер обязан вести телеграм-канал. Вот мой: Marketing guru.

Тильдоводов в стране и мире тьма. А вот фанатов Webflow, как говорила моя дочка в три годика, «кот накакал». Поэтому давайте объединяться в закрытой фб-группе и помогать друг другу расти профессионально (а то и материально)!

ЗЫЫ

Какие еще веб-инструменты вы хотели бы сравнить?

2424
63 комментария

Классно, хоть и непонятно - открыли для меня Вебфлоу - ведь снова делать сайт пора - теперь вдруг про Какао. Раньше пёк их с пирожками на Вибли, но потом Вибли так постуПили... До них Джумла и ВордПресс (боюсь-боюсь обоих). А после уж Юкит и Вебнодь - больше пожалуйста не буду. А вот фотохост Смугмуг - держит Маркус, и без малейших признаков СЕО дерет все больше (так и фоток больше))

2
Ответить

Удачи вам! Главное, чтоб интересно было)

Ответить

JS на Webflow - проще простого, верстаешь, выгружаешь исходный код, хостишь его на своём любимом хостинге и пилишь туда хоть JS, хоть что.

1
Ответить

А зачем в этом случае верстать на вебфлоу? Если вы умеете писать js, так html/css наверняка тоже?
А обращаться к своей верстке намного проще, чем к сгенерированной

1
Ответить

Всё верно, но тогда ты теряешь ништяки самого дизайнера Webflow со всеми его Symbols, Collections, eCommerce и прочая.
Послушать вас так и Тильда ничего: экспотируешь её код и вперёд, пили туда React... Это же билет в один конец! А я хочу и дизайнером пользоваться и JS-ом подшаманивать иногда. Вот такой я мечтатель)))

Ответить

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

1
Ответить

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

1
Ответить