Webflow поклав на лопатки конкурентів, а ми в нього закохалися
Як ми в Once Agency вбили Tilda та за місяць перейшли на швидшу, передбачуванішу й варіантивнішу платформу Webflow для створення сайтів і лендингів.
Розповідає Женя Маденов (UI & Tech директор Once).
Передісторія.
Ми користуємось Webflow вже пів року, до цього працювали з іншими конструкторами сайтів типу Tilda чи Readymag.
Чому ми відмовилися від них? По-перше, ці конструктори перестали відповідати нашим вимогам, по-друге (і головне), після 24 лютого вирішили перестати шукати «хорошіх руськіх» і «хорошіє рускіє продукти» та попрощатися з усіма сервісами, які хоч якось були помічені у зв’язках з окупантом.
Так за російським кораблем із наших ноутів пішло ще декілька сервісів, зокрема, Miro.
Але ми про Webflow.
То що ж таке Webflow — це nocode (у деяких випадках :)) чи lowcode професійна платформа, що дозволяє швидко створювати професійні адаптивні сайти, лендинги, блоги та інтернет-магазини з допомогою візуального редагування. Вишенька на тортику — оптимізований чистий код і анімації рівня топових інтернет-проєктів. З Webflow ти стаєш повноцінним front-end розробником.
Тут можна створювати як прості сайти без використання коду, так і складні з додаванням кастомного коду HTML чи стилів CSS або власних скриптів.
Платформа дозволяє додавати код і на весь сайт глобально, і на окремі сторінки, щоби код чи скрипт працював тільки на них.
Процес створення сайтів.
Після переходу на Webflow з’ясувалося, що сам процес створення сайту не настільки простий, як у тієї ж Tilda чи інших схожих сервісів, де ти просто перетягуєш елементи або робиш за шаблонами. Але в цьому є свої плюси: у Webflow можна зробити практично все. Тут ти не скований темплейтами й тунельними рішеннями, які часто бувають у таких редакторах.
Так, у Webflow вищий поріг входу — вам потрібно хоча б базово вміти верстати, знати трохи принципів HTML і CSS і розуміти, чим відрізняються «position: relative;» від «position: absolute;» або «display: block;» від «display: flex;» :).
Щоби повністю розібратися у Webflow, нам у Once Agency знадобився десь місяць, кілька відеоуроків і декілька зроблених на цій платформі проєктів, все — банальна практика. Але воно того варте!
Для чого воно нам як агенції?
Нам у Once Agency був потрібен інструмент, щоби збирати красиві лендинги та сайти: і прості, і складні, водночас закриваючи задачу всередині команди. Щоби це було швидше для нас і для клієнта.
Коли ми зверталися до спеціалістів, які пропонують класичний підхід до верстки, то не завжди вдавалося робити те, що задумали: і за таймінгом, і за результатами. До того ж, з класичним підходом не завжди вдавалося робити за схемою pixel perfect. Webflow дає такі можливості: ми завжди впевнені, що результат вийде точно таким, як ми запланували.
Можливості для самореалізації дизайнерів і агенцій.
Спільний із нашим арт-директором Вітьою Грудаковим проєкт Fight for Ukraine in Illustrations — живий приклад цьому. Це ілюстрована хроніка подій початку повномасштабного вторгнення росії в Україну.
Cайт арт-проєкту створений з нуля на Webflow у форматі онлайн-галереї, він доволі непростий і має кастомні анімації та нестандартну верстку. Ми подали його на Awwwards — платформу, що нагородами відзначає таланти й зусилля найкращих вебдизайнерів, розробників і агенцій у світі.
За пару тижнів сайт Fight for Ukraine in Illustrations отримав високі бали (8.52 з 10.0) і нагороду «Honorable Mention». Такий бейджик дають, якщо твій проєкт отримав більше 6.5 балів на голосуванні, у якому брали участь керівники крутих студій, представники агенцій, офіційні журі та звичайні люди зі всього світу.
Зараз сайт очікує на нову нагороду «Site of the day», яку ми сподіваємося отримати в найближчі місяці.
Чому Webflow — зручно для клієнта?
- Швидкість і простота. Клієнти можуть дуже швидко отримати готовий продукт і швидко керувати своїм контентом, оновлювати його в зручний час САМОСТІЙНО. Це не до порівняння з адмінками Wordpress (і керуванням бекендом та фронтендом у них). Навіть якщо клієнт залучає до редагування проєкту агенцію, це однаково буде в рази швидше й дешевше, ніж переробляти вже готовий сайт у класичних вебдевелоперів.
- Сервери Webflow. У серверів на Webflow Hosting дуже висока продуктивність. Якщо планується великий потік користувачів на сайт, платформа з легкістю це витримає — не треба купувати окремий сервер із потужними характеристиками, як у звичайних хостингів.
- Безпека та надійність. Сервіс Webflow є хмарним, тому більш безпечним і надійним. Клієнту не треба турбуватися щодо типових ситуацій, які стаються з класичним хостингом у зв’язці з класичною CMS. Наприклад, коли сайт виходить із ладу (під час автоматичного оновлення адмінки чи збою в базі даних), це стає особистою проблемою клієнта. Адже клієнт не знає, що робити, треба розібратися зі страшною cPanel чи знову кликати на допомогу розробника або службу підтримки хостингу. Таких проблем у Webflow просто немає.
- Backup. Ще один плюс до надійності Webflow — це бекапи. Якщо хтось ненароком видалить або відредагує class, який спричинить зміни на всьому сайті, то ми легко відкотимося на пів години чи кілька годин або днів назад.
- Перенесення сайтів між користувачами. Ви можете переносити проєкти між обліковими записами Webflow, зокрема між своїми особистими та груповими панелями керування обліковим записом. Коли переноситься проєкт, уся робота в конструкторі переноситься на нову панель інструментів, включно зі стилями, сторінками, контентом (і контент CMS) та кодом користувача.
- Простий білінг. Клієнт може прив’язати свою картку для оплати сервісу, а кошти будуть автоматично зніматися окремо за хостинг (Workspace Plan) і кожен сайт (Site plan) на цьому хостингу. Можна більше не ставити собі нагадування про оплату — ви не пропустите момент.
- Вивантаження коду готового сайту. Клієнт може експортувати HTML, CSS і JavaScript свого проєкту з Webflow: для резервної копії або щоби розміщувати сайти де завгодно за межами Webflow (але без адмінки).
SEO сайту.
- Google PageSpeed Insights. Внутрішньо Webflow дуже гарно оптимізований, тому сайти завантажуються швидко й стабільно працюють. Навіть такі досить складні можуть спокійно отримати 80–99 балів у Google PageSpeed Insights у мобайлі та десктопі.
- Чистий код. Webflow будує чистий код і гарну ієрархію — на відміну від тієї ж Tilda, де замість коду просто авгієві стайні. Крім того, код можна оптимізувати, мінімізувавши його одним кліком.
- Теги. Ще Webflow підтримує всі вимоги пошукової оптимізації. Наприклад, ви можете додавати meta tag, title tag, meta description, великий плюс — одразу видно, як це буде виглядати в Google.
- Open Graph. Є зручна підтримка Open Graph і окремо прев’ю картинок кожної сторінки на сайті.
- Вбудовування коду в head чи body. В head tag чи body tag можна вбудовувати будь-який код чи скрипт. Наприклад, якщо вам треба вказати канонічність сторінки чи мовну приналежність або взагалі будь-що. Усе це робиться як глобально для сайту, так і для окремої сторінки.
- Підтримка заголовків і параграфів. Повністю підтримується ієрархія заголовків (H1, H2, H3 тощо), а також параграфів і звичайного тексту.
- Аудитор. Також у Webflow є вбудований аудитор. Якщо ви забули вказати alt text для посилань чи зображень, то Webflow нагадає вам про це, будьте впевнені.
- SSL. Сервіс безплатно надає свій офіційний SSL-сертифікат і хостинг сайту на своєму безкоштовному домені або на вашому кастомному.
Автоматична оптимізація сайту під екрани різних розмірів.
Чому? Бо Webflow використовує візуальний підхід, але з класичними елементами верстки на кшталт класів і позиціювання.
Верстати адаптив тут одне задоволення: із правильним підходом до верстки (не будемо заглиблюватися в деталі) ми отримуємо адаптивний сайт, верстаючи його ще в десктопній версії. А вже потім, просто переходячи на брейкпойнт нижче, робимо незначні виправлення у верстці та економимо багато часу й нервів.
У класичних редакторах таке неможливо: треба вручну тягати елементи туди-сюди в кожному брейкпойнті або ж за межі редактора, змінюючи їхній розмір.
Крім цього в Webflow є всього 4 брейкпойнта для адаптації сайту, але вони покривають абсолютно всі розміри пристроїв. У Tilda їх 5, що знову збільшує час на розробку.
Колекція вже готових шаблонів Webflow.
У Webflow можна створювати все з нуля, верстати намальовані в Figma сайти або використовувати вже готові, що розміщені в ком’юніті «Made In Webflow».
Окрім шаблонів із цього ком’юніті можна копіювати вже готові рішення. Наприклад, якщо тобі сподобався якийсь слайдер чи окремий блок або анімація, усе це можна скопіювати собі в проєкт. У 80 % випадків це безкоштовно, але є і платні варіанти.
Додавання користувацького коду.
HMTL, CSS, JavaScript. Webflow дозволяє гнучко працювати з кастомним кодом і скриптами, навіть якщо ви не є розробником. Сервіс надає багато способів використання кастомного коду, тож ви можете створювати будь-які елементи на сторінці як окремо, так і на всьому сайті глобально. Кастомний код можна інтегрувати навіть у CMS.
На відміну від Tilda чи Readymag, тут додавання коду не створює багато «поверхів» із блоків із цим кодом у самому дизайні макету, після чого важко побачити, що ти верстаєш.
Тому, якщо ви вмієте верстати, то технічних обмежень у Webflow взагалі немає — можете зробити що завгодно. Якщо тільки навчаєтесь, можете робити лише те, що не виходить за основну функціональність Webflow.
Embed code. Ще Webflow дозволяє використовувати Embed code з будь-яких ресурсів. Тут не стане проблемою вставити будь-яке відео просто чи на тло, як і карту з MapBox або Google Maps.
Символи Webflow.
На платформі є дуже зручна фіча — Symbols. Якщо ви працюєте з Figma, це можна порівняти з її Components.
Symbols дозволяє повторно використовувати елементи на сайті. Наприклад, зробити меню на головній сторінці, перетворити його на символ і скопіювати на інші сторінки. Де би ви це меню не оновлювали чи не редагували, зміни перенесуться на всі макети одночасно, де є це меню.
Тонке налаштування форм.
Як ми знаємо, форми дозволяють активно та ефективно збирати інформацію на сайтах. Webflow надає дуже легку та тонку настройку цих форм, форматів полів, дизайну та тексту відповідей success message під свої потреби.
Можна навіть налаштовувати, які дані з форми ви хочете отримувати на свій email як власник сайту. Також можна налаштувати дублювання відповідей із форми відразу на декілька електронних пошт.
Інтегрована CMS.
Користуватися CMS Webflow суттєво простіше, ніж іншими класичними CMS. До того ж, вона потужніша за ті, що є в Tilda чи Readymag.
CMS Webflow — візуальна база даних, де ви можете швидко керувати вмістом і створювати записи в блозі, товарах, статтях, змінювати зображення — усе це пакетно.
Описати цю CMS — завдання для окремої статті. Щоби зрозуміти це наочно, Webflow надає багато відеоуроків, які демонструють цю функціональність детальніше.
Створення інтернет-магазину.
Щоби створити інтернет-магазин, достатньо лише натиснути на кнопку Ecommerce зліва в сайдбарі, і Webflow запропонує апгрейднути ваш тариф до плану «інтернет-магазин». Ви одразу отримаєте кошик, колекції та інші корисні штуки.
Ще в пакеті eCommerce є можливість імпорту та експорту товарів з XML-файлу. Кількість товарів залежить від вашого тарифного плану.
Так, великий інтернет-магазин типу Amazon чи Rozetka тут зробити не вдасться, але щось середнє — дуже просто.
Підтримуються всі стандартні властивості товарів і категорій: зображення, ціна, валюта, податки, артикули та ще багато іншого, плюс додаткові кастомні поля. Звичайно ж, є різноманітні фільтри та багато інтеграцій, наприклад, із Shopify.
Анімації та інтеграція з Adobe After Effects.
Просто зверстати сайт — це чудово, але взаємодії та анімації зроблять його суттєво інтерактивнішим, що приверне ще більше уваги та довіри користувача.
Webflow не був би собою, якби й тут не придумав круту фішку. Тут є підтримка lottie-анімацій — це полегшений формат, який можна експортувати з Adobe After Effects як файл JSON, а потім імпортувати у Webflow. Це дуже розв’язує руки та дає втілити навіть найскладніші анімації. Звісно, платформа підтримує і звичайні та класичні анімації.
Для lottie-анімацій знадобиться плагін Bodymovin — Lottie. З ним дуже швидко та просто можна робити кастомні та складні анімації елементів буквально створивши їх у After Effects
Webflow University.
З Webflow ви не залишитеся віч-на-віч зі своїми проблемами. Навколо платформи побудоване ціле ком’юніті та власний онлайн-університет.
Webflow University — це бібліотека відеоуроків і текстових мануалів з усіма можливими питаннями. Усе розділено зручно за категоріями.
Для початківців є пришвидшений користувацький курс із розробки на Webflow.
Інтеграція з різними сервісами.
У Webflow настільки багато інтеграцій із різноманітними сервісами, що простіше назвати, з чим він поки не інтегрується.
На платформі можна підключити хмарні сервісами MailChimp чи Zapier, інтернет-магазинами типу Shopify. Тут є інтеграції від Hotjar до SoundCloud, від G Suite до Instagram.
Усі приклади можна подивитися на цій сторінці.
Наші проєкти на Webflow
Сервіс для спільного придбання нерухомості — https://www.inzhur.reit/
Сайт Once Agency — https://once.agency/
Чекап здоров’я ШКТ — https://checkup.olymed.ua/
The Fight for Ukraine in illustrations — https://once.agency/ukraine
Висновок
Webflow — дуже потужний інструмент, що легко поклав на лопатки попередників: Кастомні сайти можна створювати набагато швидше, водночас отримувати передбачувано високий результат.
Більшість задач — питання кількох днів, а не тижнів чи місяців.
Практично немає обмежень — потрібні лише ідеї та уява.
Слава Україні! 🇺🇦
Once.agency — маркетингова агенція, що мріє зростити #100НовихВеликих на українському ринку.
Більше про нас тут: https://once.agency
Якщо ви хочете долучитися до команди або стати НовимВеликим брендом, пишіть сюди: cucumber@once.agency
