Webflow: что нужно знать о сервисе в 2023

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

В первую очередь, Webflow — это инструмент визуальной верстки и хостинга сайтов. На платформе это реализовано через четыре раздела:

Дашборд (Dashboard) — здесь находятся все сайты. Это первая страница, на которую попадает пользователь после авторизации. На базовом тарифе аккаунта доступно 2 сайта.

Настройки сайта (Settings) — общие параметры, которые влияют на все страницы сайта. Здесь подключается домен, выбирается тарифный план хостинга, добавляются редакторы сайта, настраивается Favicon, часовой пояс и язык сайта, а также размещается кастомный код в шапку и подвал.

Раздел дизайнера (Designer) — пространство, в котором происходит разработка сайта: создание страниц, проектирование и интеграция базы данных (CMS Collections) , размещение контента.

Раздел редактора (Editor) — раздел внесения изменений в контент сайта. Можно изменять тексты, изображения, наполнение базы данных через удобный визуальный интерфейс.

Кроме основных разделов на сайте вебфлоу есть еще множество полезного. Разбили все ссылки на четыре группы:

Визуальный редактор — раздел дизайнера дает возможность наблюдать результат верстки в режисе реального времени. Процесс создания страниц интуитивно понятен и основан на выборе, перетаскивании и настройки блоков сайта. По сравнению с другими конструкторами сайтов, Webflow дает широкий набор настроек стилей CSS, а библиотека блоков содержит такие элементы как DIV или P, которые можно настраивать по своему усмотрению. Это позволяет реализовать дизайн любой сложности, который к тому же не будет иметь ассоциации с платформой.

Дизайн-система — Webflow позволяет сохранять и переиспользовать CSS-классы, HTML-компоненты (Symbols) , а также библиотеку цветов. Это делает платформу удобным местом для создания и улучшения дизайн-системы проекта, которую затем можно использовать как в самом вебфлоу, так и на других CMS через экспорт кода.

Адаптивность — платформа по умолчанию содержит 4 брейкпоинта (991px+, 768-991px, 468-767px, 477-px) , а также возможность добавить дополнительные ширины экрана. Это позволяет гибко настроить адаптивную верстку сайта, а раздел просмотра с возможностью изменения ширины экрана — способ оперативно проверить результат.

SEO-дружелюбность — Webflow обладает широким набором функций, которые помогают повысить позиции сайта в поисковых системах, среди которых:

Экспорт чистого кода — вебфлоу на платном тарифе аккаунта дает возможность экспорта кода проекта в формате архива с HTML, CSS, JS и медиа-исходниками. Код, генерируемый платформой, в значительной степени чистый и не содержит длинных и запутанных ID и дата-атрибутов. Это позволяет использовать сверстанные в вебфлоу страницы на других платформах, в частности, на WordPress или 1С:Битрикс.

Если верстка сделана толково, она отдает высокий результат в Google Page Speed Insight: несложно добиться результата в 95-100 баллов для ПК и 75-90 баллов для мобильных.

База данных (CMS Collections) — на платном тарифе проекта есть возможность конструирования базы данных. Выбор обширный: более 20 видов полей: текст, редактор текста, изображение, видео, связь с другими таблицами базы данных. На базе Collections можно создавать страницы-каталоги и страницы отдельных записей (например, страницы «Блог» и «Статья»).

Внешние интеграции — если функционала Webflow недостаточно, есть возможность подключать внешние сервисы, в частности, можно через Zapier при получении данных форм настроить отправку этих данных по почте, СМС или в телеграм-чат.

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

Ecommerce — если вы планируете создать интернет-магазин для западной аудитории, Webflow обладает всем необходимым: каталог товаров и система оплаты.

[Beta] Личный кабинет — одна из предстоящих новинок платформы. Ограничение доступа к контенту и страницам при наличии или отсутствии авторизации на сайте.

[Beta] Логика — еще одна новинка. Возможность разработки бизнес-процесс на основе действий пользователя на сайте.

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

Сложно оплатить из России. Webflow — американская платформа, соответственно, в текущих условиях оплачивать ее российской банковской картой не выйдет. Это не является неразрешимой проблемой, в статье рассказали какие есть способы оплаты внутри РФ.

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

Технические ограничения:

Если проект допускает возможность хостинга в США, можно использовать вебфлоу по прямому назначению: разработка и хостинг сайтов. Сделать сайт-визитку или многостраничный каталог.

Если такая опция не подходит, можно использовать Webflow как часть общего процесса разработки сайта:

Короткий ответ — да, можно. Зависит от ваших целей. Мы в Atman используем платформу по-разному: есть проекты, которые были созданы и продолжают жить на Webflow. Есть проекты, которые переносили на WordPress или 1С:Битрикс. Сейчас Webflow регулярно используем как инструмент верстки и согласований с клиентом, знание платформы и экспертиза помогают сокращать затраты на разработку и положительно сказываются на маржинальности проектов.

Кстати, в 2023 году мы прошли сертификацию Webflow. Если у вас есть запрос на работу с платформой — обращайтесь =)