Обзор конструктора сайтов Webflow

Webflow — мощный и интуитивно понятный конструктор Landing Page, который позволяет создавать не только саму структуру страницы, но и совершенствовать дизайн и прорабатывать верстку. Подобно тому, как в Photoshop можно создавать графический дизайн, этот сервис позволяет внедрять этот дизайн на страницу в удобном рабочем пространстве.

Создание проекта в Вебфлоу можно сравнить со сборкой дома из конструктора «Лего». Вам не нужно самостоятельно изготавливать блоки, потому что они уже предоставлены в наборе. Соответственно, вам не потребуется писать код для создания блоков на сайте, так как они уже предварительно разработаны и визуализированы.

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

Что такое Webflow?

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

Вебфлоу — достойный преемник традиционных десктопных программ, применяемых для визуальной верстки веб-страниц, ярким примером которых была Adobe Muse (сейчас разработчики прекратили ее обновление в пользу Adobe XD). Однако, в отличие от своих предшественников, Webflow является более универсальным, позволяя создавать адаптивные макеты любой сложности и назначения.

С его помощью вы можете легко создавать впечатляющие сайты-визитки, портфолио, корпоративные сайты, резюме, промо-страницы и многое другое. Кроме того, платформа предоставляет возможность интеграции с разными CMS. Например, установив специальный модуль Вы можете динамически обновлять контент на сайте используя функционал системы.

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

Обзор преимуществ платформы Webflow

1. Безопасность. Ко всем ресурсам, созданным на конструкторе сайтов Webflow бесплатно подключается SSL-сертификат, что обеспечивает шифрование данных, передаваемых между сервером и посетителями, защищая конфиденциальную информацию от перехвата. Его наличие повышает доверие посетителей и улучшает позиции веб-ресурса в поисковых системах. При этом, стандартная стоимость такого сертификата — до 100 долларов в год (в зависимости от регистратора).
2. Быстрый хостинг. Онлайн-конструктор использует хостинг от Amazon Web Services (AWS), одного из ведущих провайдеров облачных услуг в мире. Он обеспечивает высокую скорость загрузки и минимальное время простоя благодаря распределенной сети серверов по всему миру. Это гарантирует стабильную производительность даже при высокой нагрузке.
3. Возможность подключить несколько сайтов на одном аккаунте. Это удобно для веб-студий, фрилансеров и агентств, которые работают с множеством клиентов. Каждый ресурс имеет свое отдельное рабочее пространство, настройки и права доступа, что обеспечивает конфиденциальность и безопасность данных.
4. Командный доступ. Владелец аккаунта может приглашать других пользователей в качестве сотрудников и назначать им роли с различными уровнями доступа (дизайнер, разработчик и т.д.). Встроенный трекинг активности отслеживает кто и какие внес изменения, что упрощает координацию и контроль над процессом разработки.
5. Каталог дизайнеров. Платформа имеет собственный каталог исполнителей, где можно найти подходящего специалиста для своего веб-проекта. Вы можете отфильтровать исполнителей по различным критериям — стоимости услуг, языку общения и компетенции. Веб-дизайнер может оформить в каталоге собственную страницу с подробной информацией о себе, своем опыте, портфолио и отзывами от предыдущих клиентов.
6. Встроенная CDN. Сервис по умолчанию использует сеть доставки контента (CDN) для обеспечения быстрой загрузки страницы. CDN представляет собой распределенную по всему миру сеть серверов, которая кэширует и отправляет на компьютер пользователя статический контент (изображения, видео, CSS и JavaScript) с сервера, географически близкого к пользователю.
7. Бесплатный тестовый период. Это отличная возможность для новичков познакомиться с функционалом, попробовать создать свой первый веб-сайт и оценить платформу. В бесплатном плане доступны практически все функции —дизайн, верстка, интеграции и многое другое.
8. Резервное копирование. Вебфлоу автоматически создает бэкапы, гарантируя восстановление данных в случае возникновения непредвиденных обстоятельств. На бесплатном тарифе сохраняются две последние резервные копии, а если вам нужна более длительная история бэкапов, то в платных тарифах они не ограничены ни по количеству, ни по времени хранения.
9. Адаптивный дизайн. Встроенные инструменты для разработки визуала позволяют создавать сложные макеты, которые автоматически подстраиваются под различные размеры экрана. С помощью визуального конструктора вы можете настраивать стили для разных устройств, а результат виден в реальном времени.

Основные недостатки сервиса Webflow

• Сложен в освоении для начинающих. Продукт ориентирован на профессиональных веб-дизайнеров и программистов, поэтому новичкам потребуется время, чтобы разобраться в принципах работы и освоить все доступные инструменты. Для эффективного использования необходимо иметь базовые знания HTML и CSS, что может стать барьером для начинающих.
• Технические ограничения по хостингу. В дешевых тарифах ограничены количество посетителей, элементов в базе данных и запросов по API. Потому при высокой посещаемости Вы можете легко достичь установленных лимитов, что может привести к дополнительным расходам на апгрейд тарифного плана, что необходимо закладывать в бюджет проекта.
• Ограничения в бесплатной версии. На базовом тарифе нельзя подключить собственный домен, а сайт будет размещен на субдомене webflow.io, что может выглядеть непрофессионально для коммерческих проектов. Также имеются ограничения по количеству страниц, подключению электронной коммерции и ряду других функций.
• Высокая стоимость тарифных планов. Для ресурсов с большим объемом динамического контента (блоги, порталы) и онлайн-магазинов тарифы могут быть достаточно дорогими.
• Особенности экспорта. Если Вы захотите выгрузить созданный шаблон, чтобы использовать его на другой CMS, для корректного отображения анимаций, интерактивных элементов и обработки форм, Вебфлоу создает несколько файлов со скриптами. Один из этих файлов имеет значительный размер — около 300 КБ, что может влиять на скорость загрузки, особенно на мобильных устройствах или при медленном интернет-соединении.
• Плохо продумана пагинация. Для перехода между страницами в сервисе Webflow предусмотрены только кнопки «Вперед/Назад», а вот числовой разбивки для быстрого перехода на определенную страницу нет. На одной странице пагинации можно вывести максимум 100 элементов.

Обзор возможностей конструктора сайтов Webflow

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

Режим дизайнера

Главным рабочим пространством считается режим дизайнера, который предоставляет доступ к конструированию структуры и дизайна веб-страниц. Кроме того, в платформу встроен редактор для оперативного добавления контента в готовые блоки и верстку дизайна практически любой сложности. Система использует архитектуру HTML и таблицы стилей CSS для управления визуалом, поэтому понимание этих языков существенно упрощает процесс работы.

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

Экспорт сверстанных шаблонов

При использовании платной версии пользователям предоставляется возможность выгрузить сверстанный шаблон в виде архива, содержащего HTML, CSS, JavaScript и медиа-исходники.

Вебфлоу генерирует достаточно чистый код, без длинных и запутанных идентификаторов (ID) и дата-атрибутов. Это позволяет использовать веб-страницы на других CMS (например, сверстать тему для WordPress, Joomla! И т.д.), без необходимости значительной доработки.

При грамотном подходе к верстке можно добиться высоких результатов в тестах производительности — Google Page Speed и его аналогах. По отзывам в интернете, часто сайты, написанные на Вебфлоу получают 95-100 баллов для настольных компьютеров и 75-90 баллов для мобильных устройств. Это улучшает ранжирование сайта в поисковых системах и улучшает юзабилити проекта.

Визуальный редактор

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

Редактор удобен для внесения небольших правок на сайт (после изменения можно проверить в режиме предварительного просмотра). Однако его функции ограничены: нельзя добавлять новые блоки или менять структуру — для этого понадобится все же освоить режим дизайнера.

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

Темы оформления

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

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

Большинство тем платные и стоят $25 до $150, а их качество стабильно остается на высоком уровне. В коллекции представлены шаблоны для визиток, портфолио, интернет-магазинов, лендингов, промо-страниц и блогов. Около 40 шаблонов доступны бесплатно, при этом, качество сопоставимо с платными версиями.

Подключение интернет-магазина

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

Количество товаров, которые можно разместить, зависит от лимита, предусмотренного вашим тарифным планом. Аналогичное ограничение действует и для статей в блоге. Поэтому для больших интернет-магазинов сервис не подойдет. При этом, предусмотрен удобный импорт/экспорт товарных данных в формате XML, по готовому шаблону.

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

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

Для eCommerce проектов на базе Вебфлоу Вы также можете:

• Продавать как физические товары, так и цифровые;
• Добавлять произвольные поля для категорий и отдельных товаров;
• Создавать свои акционные подборки товаров, привязывая к ним скидку или бесплатную доставку;
• Принимать оплату онлайн — для этого в движок интегрированы Stripe и PayPal;
• Использовать API или Zapier для интеграции сторонних сервисов без навыков программирования;
• Отслеживать активные и завершенные заказы в панели редактора (урезанный аналог CRM-системы);
• Создавать свои посадочные страницы под определенные товарные позиции;
• Отправлять клиентам автоматические уведомления по настраиваемым шаблонам (для этого можно подключить стороннюю систему e-mail рассылки или использовать встроенную);
• Импортировать темы оформления из ThemeForest;
• Использовать шаблоны для автоматической генерации Title и Description для страниц (эту функцию по достоинству оценят SEO-специалисты);
• Отправлять пользователям индивидуальные предложения и купоны на скидки.

Dashboard

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

Дашборд также предоставляет доступ к объединенному сообществу пользователей. Здесь можно посмотреть портфолио других веб-дизайнеров и разработчиков и подписаться на авторов, чьи дизайны пришлись по душе. Свои лучшие работы тоже можно опубликовать для самопрезентации (таким образом, талантливый верстальщик может получать заказы на свои услуги).

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

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

Интеграции со сторонними сервисами

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

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

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

Служба технической поддержки

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

По отзывам в интернете, получение ответа от представителя компании может занимать до 48 часов, что прямо очень долго. За это время решение проблемы обычно находят самостоятельно и ответ поддержки уже не актуален.

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

Возможности по продвижению сайта на платформе Webflow

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

Ведение блога

На Вебфлоу можно как создать блог с нуля, так и добавить соответствующий раздел в уже готовый одностраничник или интернет-магазин. Функционирование блога основано на CMS Collections — наборе шаблонов страниц под разные задачи.

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

Также можно задать правила вывода постов, указать пароль для закрытого блога, настроить SEO, RSS и параметры страниц в соцсетях. Когда база постов готова, происходит автоматическая генерация блога с лентой записей в хронологическом порядке. Визуальное решение можно полностью настроить самостоятельно или использовать готовые пресеты.

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

SEO оптимизация

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

Но помимо этого платформа также дает настраивать мета-теги, заголовки, ЧПУ- URL, редактировать robots.txt, а генерация sitemap.xml происходит в автоматическом режиме на основании базы всех созданных страниц. Для корректного отображения сайта в соцсетях и мессенджерах, встроена разметка Open Graph.

Также для больших сайтов предусмотрена автоматическая генерация Title и Description с использованием переменных. А подключить сбор статистики и аналитику Google Analytics и Facebook Pixel можно буквально в один клик.

Кому подойдет сервис Вебфлоу?

Конструктор сайтов Вебфлоу разработан преимущественно для профессиональных веб-дизайнеров и веб-студий. Он позволяет им создавать веб-проекты быстрее и дешевле за счёт ряда преимуществ:

• Вам не потребуется отдельно разрабатывать макеты в Figma или Adobe Photoshop, а потом переносить их с помощью верстальщика. Весь процесс происходит в одном интерфейсе — от прототипа до готового ресурса, что ускоряет работу в 2-3 раза.
• Система сама преобразует созданный дизайн в чистый HTML и JavaScript, готовый к публикации. При этом профессиональный уровень кода не уступает ручной вёрстке.
• CMS позволяет организовать эффективный рабочий процесс в команде дизайнеров и разработчиков над одним онлайн-проектом в режиме реального времени. Для этого есть инструменты контроля версий, правок и комментирования действий.
• Для полноценного обслуживания сайта не нужна команда разработчиков. Все необходимое уже внедрено. Потому с платформой сможет работать даже один дизайнер самостоятельно, без привлечения фронтэнд и бэкэнд программистов
• Вы можете легко экспортировать созданный сайт и использовать его на любой CMS. Будет полезно как для своих проектов, так и при разработке на заказ для клиентов.

Тарифные планы конструктора Webflow

Конструктор Webflow предлагает 4 основных тарифа:

1. Free. На этом проектов вы можете создавать неограниченное количество веб-проектов, но с ограничением в 2 страницы и 50 позиций на временном домене типа name.webflow.io. Поэтому такой вариант хорошо подойдет лишь для ознакомления с функционалом.
2. Basic. План за $14 в месяц позволяет публиковать веб-ресурсы на собственных доменах с базовыми функциями и предусматривает лимит в 150 страниц и 250 тысяч посетителей. Тариф подходит для размещения простых одностраничных сайтов-визиток или небольших промо-сайтов, но не подойдет для среднего и крупного бизнеса.
3. CMS. Тариф с ежемесячной платой $23 предлагает размещение онлайн-проектов на неограниченном числе собственных доменов с полноценным функционалом, но с лимитом в 150 страниц и 2000 товаров. Здесь уже можно создавать полноценные магазины. Правда, количество товарных позиций все же ограничено.
4. Business. Тарифный план за $39 предназначен для веб-студий и агентств. Здесь можно выгружать разработанные собственноручно дизайны для использования на других движках, подключать до 10 учетных записей администратора, а пропускная способность по трафику — 300 000 пользователей в месяц.