Обзор Webflow: это серьезный вариант для разработчиков?

Сервисы онлайн-конструкторов сайтов существуют уже более 25 лет. Теоретически концепция прекрасна: позвольте пользователю сконцентрироваться на контенте, о котором он знает, — пусть сервис обрабатывает всю эту сложную техническую веб-тарабарщину в фоновом режиме.

*Примечание. Этот обзор содержит партнерские ссылки.

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

Но это все еще ожидание в 2022 году? Сервисы онлайн-строителей прошли долгий путь со времен Geocities, Angelfire и Xoom. Современные веб-приложения, такие как Webflow, Squarespace и Editor X, успели усовершенствовать свои предложения, чтобы удовлетворить потребности более искушенных, технически подкованных пользователей.

Это НЕ стандарт «Работает ли этот продукт?» рассмотрение. Конечно, это так. SitePoint — это технический сайт для сообщества разработчиков и дизайнеров, поэтому мы будем рассматривать Webflow как разработчики. Мы будем спрашивать:

Какую функциональность и гибкость предлагает Webflow?

Какие трудности и ограничения?

Является ли Webflow настоящей альтернативой созданию собственного сайта с нуля?

Что мы строим?

Чтобы правильно протестировать функции, я начну с пустого шаблона и создам этот дизайн Figma с нуля. В ближайшие недели я сделаю то же самое с другими конкурирующими сервисами (Editor X, Squarespace и другими), чтобы мы могли сравнить их сильные и слабые стороны.

Критерии оценки нашего конструктора сайтов

Мы рассмотрели Webflow по следующим пяти факторам:

1. Инструменты компоновки и дизайна. Обладает ли компетентный дизайнер достаточной гибкостью, чтобы делать большинство вещей?

2. CMS/управление данными: может ли он обрабатывать повторяющиеся типы данных, такие как элементы галереи, продукты или сообщения?

3. Интеграции: электронная коммерция, мультимедиа и другие нестандартные вещи.

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

. 5. Ценообразование: практический результат.

Имея это в виду, давайте начнем.

Настройка веб-потока

Как и следовало ожидать, Webflow предоставляет вам мастер вопросов и ответов, который устанавливает вашу учетную запись, домен, часовой пояс, шаблон (в нашем случае нет) и тип сайта. Везде, где я мог, я включил расширенные параметры, чтобы получить полный доступ ко всем инструментам и панелям.

Страница создания учетной записи Webflow

Мастер настройки вопросов и ответов Webflow.

1. Визуальные инструменты для дизайна и верстки

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

Секции (блоки полной ширины от края до края)

Контейнеры (центрированный столбец с ограниченной шириной)

Сетки (карты и галереи)

Столбцы

Эти блоки можно перетаскивать на ваш «холст», быстро перемещать и перенастраивать.

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

Создание макета с компонентами

Пользовательский код — это премиум-функция

Примерно на этом этапе я столкнулся со своим первым «техническим препятствием». Первоначально я разработал макет из 5 столбцов для строк галереи (см. Figma), но инструмент Webflow предоставляет варианты из 12 столбцов (т. е. 1, 2, 3, 4, 6, 12).

Теперь я подозреваю, что технически возможно загрузить отдельную таблицу стилей, содержащую дополнительные 5 столбцов макета CSS (или 7 столбцов, если вы предпочитаете), если у вас есть время для взлома. В настройках вашей панели инструментов есть панель «Пользовательский код» (см. Выше), но она доступна только в платных планах.

По общему признанию, это не будет препятствием для большинства людей, но стоит отметить, что отказ от 12-колоночной модели макета нетривиален.

Таким образом, после компрометации и переключения моей 5-колоночной раскладки на 4-колоночную, заблокировать «кости» сайта было относительно быстро и легко.

Настройка столбцов

Добавление и изменение размера столбцов

Вы можете перетаскивать и переставлять единицы макета с левой панели. Выберите макет миниатюры в инструменте «Настройки столбцов», чтобы вставить столбцы, а затем перетащите границы, чтобы изменить их размер. Вы можете настроить почти все свойства CSS с правой панели.

Добавление текстовых элементов

Добавление текстовых элементов

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

Символы

Часто мы создаем новый компонент пользовательского интерфейса, например карточку, а затем должны повторно использовать этот тип компонента в приложении. Webflow позволяет вам сохранять компонент как «символ», повторно использовать экземпляры этого символа в другом месте и настраивать все эти экземпляры из одной точки. Это отличный способ стандартизировать ваш пользовательский интерфейс.

Поддержка SVG превосходна

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

2. CMS и управление данными

Webflow предлагает гибкую систему CMS, хотя для доступа к ней необходимо иметь план подписки 2-го уровня (16 долларов в месяц). Я создал новый тип контента «произведения искусства» (Webflow называет их «коллекциями») со слотами для изображения, названия, описания, даты публикации и цены.

Элементы коллекции Webflow CMS

Элементы коллекции Webflow CMS

Как только вы введете свой контент в «Список коллекций», его можно будет отфильтровать и добавить в макет. Коллекции выделяются фиолетовыми элементами пользовательского интерфейса в вашем пользовательском интерфейсе (см. ниже).

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

Коллекции веб-потока

Создатель «коллекции» CMS Webflow

3. Интеграции, расширения и другие инструменты

Webflow предлагает некоторые полезные возможности, выходящие за рамки стандартного создания веб-сайтов.

электронная коммерция

Базовое средство электронной коммерции предоставляется по их плану за 29 долларов в месяц. Поскольку это обеспечивает до 500 единиц продаж при годовом объеме продаж менее 50 тысяч долларов, это должно охватывать большинство начинающих предприятий. Следующий уровень подскакивает до 74 долларов в месяц за 1000 товаров и 200 тысяч долларов продаж.

Товары для продажи обрабатываются как новый тип CMS «Коллекция», что упрощает их размещение в вашем макете.

Продажи — это новые коллекции

Продажи рассматриваются как новые коллекции.

Видео и YouTube

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

Лотти Анимации

Lottie — популярный формат векторной анимации, хорошо подходящий для веб-приложений. Хотя я, конечно, не ожидал этого, загрузка Lottie — долгожданное дополнение для меня.

4. Мобильная производительность

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

Webflow имеет четыре вида устройств, настроенных по умолчанию:

Рабочий стол

планшет

Мобильный пейзаж

Мобильный портрет

Отображение переключателей адаптивного дизайна

Переключайтесь между видами устройств в верхней части экрана.

Вы можете создавать собственные точки останова и настраивать существующие ширины. Любые изменения стиля, которые вы вносите в представлении планшета/мобильного устройства, автоматически добавляются к соответствующему медиа-запросу. Это упрощает нацеливание на отдельные стили, но мне было труднее прийти к последовательному пониманию того, какими должны быть хорошие решения CSS в этой настройке. Это не проблема Webflow; это проблема «визуального конструктора сайтов».

Как вы можете видеть выше, Webflow обрабатывает представление «Рабочий стол» как «базовую точку останова», а затем добавляет различные стили к меньшим представлениям устройства.

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

«Сначала рабочий стол» не идеален, но я понимаю его аргументацию.

5. Ценообразование

Webflow имеет многоуровневую модель ценообразования, но, вероятно, лучше всего упростить ее до:

Статический сайт CMS сайт Базовый сайт электронной коммерции

Функции Домен Домен + CMS Домен + CMS + Эко

Расходы $12/м $16/м $29/м

Резюме

Плюсы:

Гибкое создание макета

Простое делегирование домена

Сложные медиа-запросы

Простая реализация электронной коммерции

Доступ к реальным свойствам CSS относительно прост

Хорошая поддержка SVG

Минусы:

Некоторые ограничения макета (колонка 5,7)

Отказ от рабочего стола в первую очередь

Создать полезный обзор вашего CSS в целом непросто. Возможно, со временем это прояснится.

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

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

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