Огляд конструктора сайтів 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 може надіслати ці дані електронною поштою, SMS або чат 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 користувачів на місяць.