Плюсы и минусы Webflow в обзоре от Насти
18 октября '18
Настя Кузнецова
Frontend-разработчик
Иногда бывает так, что работу внутри студии хочется оптимизировать для получения быстрого результата. Именно так нашему директору пришла мысль: почему бы дизайнерам не начать верстать простые страницы?
Так мы сможем освободить время фронтендеров для более сложных задач!
Звучит безбашенно, но мы такие.

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

Webflow — это сервис для проектирования адаптивных сайтов. Он имеет удобный и простой визуальный редактор. Позволяет, как я называю «проектировать мышкой» благодаря drag-n-drop интерфейсу.

С первого проекта Webflow нам понравился, некоторым даже очень. Но, как бывает часто, были в нем и плюсы, и минусы. Думаю, начать можно с приятного — с плюсов.
Плюсы
Быстро

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

Анимация

Кажется, это то, во что разработчики вложили все свои силы. И получилось у них весьма и весьма достойно. Такой простой настройки анимации я не припомню со школьных лет, когда пользовалась Microsoft Power Point для создания презентаций :)
Комьюнити и уроки

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

Webflow по умолчанию имеет следующие брейкпоинты: 480px, 768px и 992px, а управлять адаптивностью можно буквально парой кнопок. Плюс шаблонные блоки при вставке на страницу уже адаптированы.
Экспорт кода

Когда сайт, наконец, готов, все можно скачать одним архивом или сразу опубликовать.
Чистый HTML

Если не вставлять пользовательский код в HTML, то при экспорте он не содержит в себе инлайн-стилей. Чего нельзя сказать о некоторых конструкторах, увидев код которых, любой верстальщик пойдет тихонько плакать в уголок.
Справедливости ради, нужно сказать, что сайт, который мы делали на Webflow, попал к нам — фронтендерам — в руки после того как был собран не верстальщиком.
Некоторые блоки пришлось переделывать. Думаю, это отчасти повлияло на общие впечатления. Повлияло еще и то, что я в принципе не очень люблю конструкторы сайтов. Но я старалась относиться к Webflow объективно.

После более глубокого изучения функционала выявились пробелы. Дальше расскажу про минусы, которые можно выразить моим любимым стикером. Не то чтобы я люблю поплакать, но с этим проектом мне хотелось, и очень часто.
Сразу оговорюсь, что эти минусы весьма субъективны, но для меня они весомы.
Клянусь, мне он даже снился в кошмарных снах. И не мне одной.
Минусы
Адаптивность

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

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

Отсутствие псевдоклассов и псевдоэлементов

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

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

Если хочешь добавить в форму, например, инпут с типом «файл» (input type="file"), то придется заплатить — не все возможности Webflow бесплатны.

Отсутствие каскадности

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

К тому же сформированный код приходилось очень часто допиливать, чтобы он более-менее соответствовал нашим требованиям.
Вывод
Как я ни старалась объективно отнестись к Webflow, у меня это, кажется, не очень хорошо получилось. Ну не нравится мне чувство беспомощности и бесконтрольность ситуации. Поэтому, если вам нужно сделать страницу быстро, не обращая внимания на качество кода, то можно смело пользоваться этим сервисом. Если же вы умеете, а главное любите писать код, то Webflow явно не для вас.
Есть мысли, которыми хотите поделиться?
Пишите нам в facebook и instagram
назад к блогу