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

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

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

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

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

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

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

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

• Шаблоны (Templates) — готовые сайты на базе Webflow. Есть платные и бесплатные шаблоны.
• Компоненты (Libraries) — набор проектов Webflow с готовым оформлением отдельных компонентов проекта: меню, слайдеры, экраны и прочее.
• Расширения (Apps) — внешние сервисы, которые упрощают работу с Webflow. Также есть платные и бесплатные решения.

• Эксперты (Experts) — каталог исполнителей Webflow с возможностью фильтрации по стоимости, языку компетенциям. Также есть функция подбора исполнителей под запрос после заполнения опроса. У каждого эксперта есть своя страница с более подробной информацией.
• Коллекция работ (Made In Webflow) — работы экспертов Webflow с возможностью просмотра проекта и страницы эксперта. Ряд проектов можно клонировать и использовать на своем аккаунте.
• Дизайнеры (Designers) — более старый аналог раздела “Эксперты”. Также представлен в виде каталога исполнителей, на страницах дизайнеров можно увидеть список их проектов.

• Университет (University) — курсы и обучающие видео по платформе: как верстать сайты, как настраивать CMS, как работать с Lottie-анимациями и другое.
• Блог (Blog) — отдельные статьи на тему дизайна и работы в вебфлоу. Менее полезно чем Университет, но есть отдельные интересные статьи, например… интересные.
• Книги (Ebooks) — лонг-риды на темы Web3, no-code и веб-дизайна. Полезно для понимания трендов и общего обзора отрасли.
• Документация (Developers) — техническая документация API Webflow. Полезно, если есть задача интегрировать Webflow в другой веб-сервис, например, вывести каталог CMS Collections в мобильное приложение.

• Поддержка (Support) — место, где можно задать вопрос или обозначить баг и получить ответ от платформы или от сообщества. Также полезно изучать чужие вопросы: зачастую в них содержится ответ на то, что вы ищите.
• Форум (Forum) — раздел для общения сообщества, здесь помимо вопросов по платформе обсуждаются смежные темы.

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

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

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

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

• RSS-лента.
• Каноническая ссылка.
• Favicon.
• OG:Image.
• Динамические Meta Title, Meta Description.
• Семантические теги.
• Возможность установки сервисов аналитики и ключей Я. Вебмастера, Google Search Console.

Экспорт чистого кода — вебфлоу на платном тарифе аккаунта дает возможность экспорта кода проекта в формате архива с 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 — американская платформа, соответственно, в текущих условиях оплачивать ее российской банковской картой не выйдет. Это не является неразрешимой проблемой, в статье рассказали какие есть способы оплаты внутри РФ.

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

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

• В одной CMS Collection может быть не более 30 полей.
• В одной CMS Collection может быть не более 5 полей-связей с другими Collections.
• Ограничения верстки каталогов: нет фильтрации и сортировки без перезагрузки страницы. Пагинация представлена только кнопками «Вперед/Назад», нет числовой разбивки. На одной странице пагинации можно вывести до 100 объектов.
• В разделе «Дизайнер» в режиме просмотра не поддерживаются вставки кода. Чтобы полноценно протестировать страницу, требуется публикация и проверка в отдельном окне браузера.
• При экспорте Webflow отдает 3 JS-файла (один из них весит ~300kb) , без которых не работают анимации и обработчик форм. Потребуется либо отказаться от этих преимуществ при переносе, либо интегрировать скрипты.
• Если подключаете свой домен, Webflow согласно тарифному плану ограничивает число визитов на сайт. Например, на первом платном тарифе «Basic» — это 250 000. На практике не замечали данного ограничения и были прецеденты, когда выходили за рамки. Однако не стоит надеяться на удачу — хуже потерять проект из-за нарушения правил платформы, чем получить выгоду от обхода тарифов.
• Нельзя иметь две CMS Collections с одинаковым слагом, но разными префиксами. Из-за этого сложно организовать мультиязычный сайт без сторонних интеграций.

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

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

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

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

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