Webflow в маркетинге больших компаний. Опыт онлайн-школы «Фоксфорд»
Я Саша, руководитель студии Webflow-разработки и дизайна Div Block Studio, и сегодня у нас интервью с Никитой Каргашиным, лидом направления Fastdev в онлайн-школе «Фоксфорд». Никита рассказал, как они используют инструмент в компании, поделился его плюсами и минусами, рассказал о процессе разработки и показал примеры проектов.
Расскажи немного про себя, Фоксфорд, и чем ты занимаешься в компании?
Зовут меня Никита Каргашин, тимлид в команде быстрой разработки в Фоксфорде.
Фоксфорд — это крупнейшая онлайн-школа для учеников 1−11 классов, учителей и родителей. Мы помогаем подтянуть оценки, подготовиться к экзаменам и олимпиадам, поступить в вуз. У нас даже есть Домашняя школа — полноценная замена очной школы. А наш сайт ежемесячно посещают 5 миллионов человек.
Наш отдел занимается в основном маркетинговыми проектами — лендингами, квизами, спецпроектами и т.д. Иногда делаем более сложные вещи — например, блог Фоксфорда на тысячи страниц, портал для вакансий, планер целей на год и игру с поиском элементов на картинке.
Ты говорил, что вы используете Webflow в своих процессах. Какие задачи вы им решаете?
Основная задача отдела — сделать что-то быстро и качественно.
Webflow используем по назначению: для быстрой верстки, то есть только для HTML и CSS. Удобный WYSIWYG-редактор позволяет быстро верстать, а возможность переиспользовать компоненты и стили между страницами позволяет ещё больше ускориться.
Всю «динамическую» часть мы пишем на javascript вне Webflow, а затем подключаем её к проекту. Не вдаваясь в детали, это тоже позволяет нам ускориться и делать проекты качественнее.
Что побудило вас использовать Webflow а не Tilda, или код, например?
Webflow любим за гибкость и мощность — он позволяет создавать страницы и проекты, которые неотличимы от сделанных при помощи «обычных» средств разработки. Ну и немаловажный момент — стоимость разработки. Найти разработчика на Webflow дешевле, чем на React.
💡 Webflow позволяет тестировать больше гипотез, запускать больше различных страниц и акций.
Как давно вы уже пользуетесь Webflow внутри Фоксфорда?
Больше шести лет.
Как Webflow встраивается в вашу традиционную разработку?
Это основной инструмент в команде быстрой разработки. Каждая задача делается в Webflow.
Какие плюсы и минусы инструмента можешь выделить?
👍 Плюсы:
— Наверное, один из самых удобных инструментов для HTML и CSS
— Возможность указывать классы, id и атрибуты
— Продуманная и удобная система для создания адаптивности на странице
— Высокая скорость разработки
— На выходе получаем чистый код
— Хорошее SEO
— CMS коллекции для блога и не только, бекапы, редакторский доступ
— Возможность легко опубликовать сайт
— Простота в подключении внешних скриптов
— Удобный редактор анимации
— Возможность через интеграцию с Zapier довольно просто выполнять разные задачи. Например: собирать данные в гугл-таблицы, отправлять данные в слак/почту, создавать pdf-файлы и так далее
Тут можно перечислить все возможности Webflow, и почти каждая из них будет плюсом.
👎 Минусы:
— Стоимость: платим за аккаунт и за каждый проект
— Общий CSS файл тянется на все страницы внутри проекта. Когда проект большой, это становится проблемой
— Нельзя редактировать одну страницу сразу нескольким людям
— Нет как таковой локальной разработки
— Когда проект растет, Webflow становится «мал», начинает подтормаживать, не работают бекапы, CSS становится очень большим
Как устроена работа команды в Webflow? Сколько человек работает, как выглядит процесс от дизайна до релиза?
На данный момент у нас в команде 4 дизайнера, 4 разработчика, проджект-менеджер и тестировщик.
Сначала мы создаем дизайн, потом согласовываем его с заказчиком, и дальше задача попадает к разработчику.
- Все начинается с копирования “Заготовки”. Это проект в Webflow с базовыми настройками: в кастом коде указаны нужные URL, в настройках проекта проставлены необходимые галочки, добавлены шрифты, а внутри проекта уже лежат базовые элементы с настроенными стилями (секции, контейнеры, кнопки, заголовки).
- Далее мы выгружаем из макета в Figma необходимые картинки, сжимаем и добавляем в вебфлоу. Верстаем страницу согласно дизайн-макету.
- После завершения верстки мы создаем отдельный JS bundle, в котором содержится вся логика взаимодействия пользователя с сайтом: клики, переключение табов, слайдеры, формы и так далее.
- Выгружаем на тестовый URL, который уже передаем тестировщику
- Исправляем найденные баги
- Передаем проект заказчику
- После одобрения заказчика выкладываем проект в продакшн
Повлиял ли Webflow на показатели бизнеса после внедрения в процессы? Экономия времени, бюджета, что-то еще?
Высокая скорость разработки, чистый код на выходе, возможность реализовать практически любую задумку, и всё это за относительно небольшие сроки — да, Webflow повлиял на бизнес как в деньгах, так и в количестве созданных проектов.
С какими ограничениями инструмента вы сталкивались? Как обходили?
Лимит в 100 страниц. Нашли решение через разделение на несколько проектов и настройки реверс прокси.
Ограничение в 10 000 символов кода на странице. Создали свой репозиторий, в котором настроили prettier, eslint для стандартизации кода, flow для типов, rollup для сборки проекта. Также настроили ci для деплоя. На выходе получаем ссылку на готовый JS bundle. Его и подключаем к проекту.
Отсутствие тестового стенда. Подключаем к проекту 2 домена: продакшн и тестовый. Тестовый закрываем логином/паролем. При разработке сначала выкладываем проект на тестовый стенд, а так же подключаем тестовый JS bundle.
Отсутствие локальной разработки при написании JS. Настроили одну из команд в репозитории так, что при ее запуске получили ссылку (через npm пакет ngrok) на наш локально собранный JS bundle. Это позволяет получать обновления на странице без необходимости заново публиковать проект в webflow.
Можешь поделиться парой ссылок на странички, которые вы собирали?
Да, конечно. Вот несколько:
Надеюсь, вы нашли что-то интересное или полезное для себя в этом коротком интервью.
А если возникли какие-то вопросы, то не стесняйтесь задавать их в комментариях. Я постараюсь пригласить ребят из Фоксфорда, чтобы по мере возможностей они на них ответили.
Отдельное спасибо за помощь в подготовке материала нашему дизайнеру Томе и ребятам из Фоксфорда: Никите Каргашину и Вите Герасимову 🙏
Понравилась статья? Подписывайся на мой бложик тут, на VC, или в телеграм, где я рассказываю про Webflow, наши проекты, и делюсь моментами из жизни студии.
А если вам тоже хочется делать все шустро - напишите мне, и мы обсудим как можно применить Webflow у вас в компании.
Посмотреть другие мои статьи можно тут 👇
Что такое у меня на экране в левом нижнем углу? И это НЕ проскроллить...