1. 1. Webflow видає чистий код, піддаються читання і правками
2. 2. Верстка сторінки тільки за допомогою своїх стилів
3. 3. Зрозуміла архітектура файлів
4. 4. Немає зайвих скриптів
5. 5. Зручний інтерфейс в Webflow
6. 6. Налаштування друкарні
7. 7. Адаптивний дизайн для різних типів пристроїв
8. 8. Можливість завантажити архів сайту або код
9. 9. Робота в браузері і стабільність редактора
10. висновок

В інтернет технологіях спостерігається загальна тенденція використання WYSIWYG (візуальних) редакторів сайтів і в цій статті я розберу особливості одного з таких редакторів, а саме Webflow.

Webflow - це візуальний редактор сайтів не вимагає знання таких мов програмування як HTML, CSS і JavaScript, він має зручний інтерфейс, в тому числі чуйними елементами управління.

Відразу хочу відзначити, що спочатку сервіс Webflow дозволяв створювати виключно сайти візитки і включав в себе елементи зворотного зв'язку, такі як контакти або заповнення електронних форм для відправки на email адміністратора, але на сьогоднішній день система пропонує використовувати їх власну CMS систему.

* Огляд на CMS від Webflow читайте пізніше *

Нижче я розберу виключно можливості візуального редактора, а також плюси і мінуси Webflow.

1. Webflow видає чистий код, піддаються читання і правками

Звичайно відносно чистий, код який видає Webflow не йде в порівняння з кодом від професійних веб-майстрів, але він на порядок краще ніж його видає Wix або Adobe Muse. В першу чергу це досягнуто архітектурою самого редактора, він дозволяє верстати сторінки використовуючи html елементи як блоки йдуть один за одним, в той час як Muse і Wix верстаються як візуальний редактор photoshop, незалежно від положення html елементів в коді сторінки.

Наприклад, меню верху сайту в Webflow буде завжди одним з перших блоків в коді, в той час як в інших редакторах воно може бути абсолютно в будь-якому місці, хоч в кінці. Тобто зберігається логічне становище елементів на сторінці і це чудово.

2. Верстка сторінки тільки за допомогою своїх стилів

Дана особливість властива тільки для Webflow, для зміни елементів на сторінці ми присвоюємо їм власний клас, а далі за допомогою кнопок в інтерфейсі WYSIWYG редактора міняємо властивості стилів цих класів. Це якісно виділяє даний редактор від інших, так як в інших редакторах ці стилі і класи під час верстки нам невідомі, ми бачимо тільки візуальний результат, він нас може влаштовувати, а код буде складено жахливо через що сторінка буде вантажиться помітно довше, так ж погіршиться співвідношення контенту до коду сторінки, а значить пошуковики ймовірно знизять рейтинг цих сторінок.

Фактично, дизайнер створює сайт в Webflow не володіючи знаннями програмування створює цілком стерпний html і css код, який легко можна буде змінити в майбутньому не використовуючи візуальний редактор. Немаловажним є той фактор, що під час конструювання сайту новачки швидше переймуться суттю веб верстки, а назви кнопок відповідають html тегам (наприклад header) і css стилям (наприклад margin), завдяки чому швидше запам'ятовуються різні елементи коду.

3. Зрозуміла архітектура файлів

Ми отримуємо адекватну код і адекватну кількість файлів, але це властиво і Adobe Muse, хоча в Webflow це краще опрацьовано, ми отримуємо на кожну сторінку по одному html файлу, а так само всього 3 css файлу:

1. Стандартні стилі normalize;
2. Файл зі стандартними стилями webflow;
3. Файл зі стилями які зробили ми.

Для зображень система створює свою окрему папку.

4. Немає зайвих скриптів

Під час збереження проекту, Webflow створює папку для JavaScript і зберігає туди тільки використовувані скрипти, таким чином сервіс не змушує вантажити користувачів сайту невикористаний JavaScript.

5. Зручний інтерфейс в Webflow

Сам інтерфейс заслуговує на окрему увагу, темний дизайн з приємними сірими відтінками і затишній кольоровою гамою активних елементів виглядає класно, а головне він функціональний і зрозумілий. Елементи управління відмінно укомплектовані, все під рукою, нічого зайвого в очі не лізе це прискорює процес редагування дизайну сайту.

6. Налаштування друкарні

Меню редактора так само включає в себе можливість редагування шрифтів, починаючи від кольору і закінчуючи простором між символами, всі можливості css стилів застосовуються до шрифтів вклалися в невелике меню «Друкарня».

7. Адаптивний дизайн для різних типів пристроїв

Під час дизайну сторінок Webflow максимально адаптує структуру під різні платформи, такі як планшети або смартфони, а так само дозволяє переключиться на редагування версій сайту для різних пристроїв.

При зміні дизайну в режимі редагування виду для мобільних пристроїв відбуваються зміни в стилях на рівні @media запитів, тобто при зменшенні розміру екрану пристрою з якого виконаний вхід на сайт починають використовуються стилі під конкретний дозвіл екрана.

8. Можливість завантажити архів сайту або код

Ця перевага в першу чергу перед сервісом Wix, який не дозволяє вам завантажувати створені вами сайти і встановлювати на сторонні хостинги, так як Adobu Muse також має таку можливість.

Ця функція так само буде корисна новачкам, які можуть зверстати окремі елементи сайту в Webflow, а після просто експортувати їх на свій сайт.

9. Робота в браузері і стабільність редактора

Це не ключова перевага, але цілком істотне, Adobe Muse вимагає установки на ПК, а Wix під час роботи досить не стабільний і пригальмовує. У той час як Webflow відмінно працює в браузері і в той же час вкрай рідко гальмує або глючить.

висновок

Сервіс Webflow дозволяє працювати в ньому необмежену кількість часу безкоштовно і публікувати не більше 1 сайту, але для збільшення кількості сайтів необхідно придбавати плани підписки, мінімальна вартість платних послуг починається від 16 доларів в місяць, але вона дозволяє запустити вам до 20 сайтів.

Посилання на сайт редактора: https://webflow.com

Приклади робіт і шаблони сайтів: https://webflow.com/templates

Наші послуги з розробки сайтів: CloudMakers.ru