19.11.2015

Webflow — конструктор сайтов, лучший WYSIWYG редактор

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

Webflow — это визуальный редактор сайтов не требующий знания таких языков программирования как HTML, CSS и JavaScript, он обладает удобным интерфейсом, в том числе отзывчивыми элементами управления.

Сразу хочу отметить, что изначально сервис Webflow позволял создавать исключительно сайты визитки и включал в себя элементы обратной связи, такие как контакты или заполнение электронных форм для отправки на email администратора, но на сегодняшний день система предлагает использовать их собственную CMS систему.

Webflow - создание нового сайта, шаблоны

*Обзор на CMS от Webflow читайте позже*

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

1. Webflow выдает чистый код, поддающиеся чтению и правкам

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

Webflow - просмотр html и css кода сайта

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

2. Верстка страницы только с помощью своих стилей

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

Webflow - меню редактирования css стилей

Фактически, дизайнер создающий сайт в 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

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

My Sites - админ панель веб дизайнера

6. Настройки типографии

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

Webflow - настройка шрифтов с помощью редактирования css

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

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

Webflow - дизайн сайта под мобильные устройства

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

8. Возможность скачать архив сайта или код

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

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

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

Это не ключевое преимущество, но вполне существенное, Adobe Muse требует установки на ПК, а Wix во время работы достаточно не стабилен и притормаживает. В то время как Webflow отлично работает в браузере и в тоже время крайне редко тормозит или глючит.

Заключение

Webflow - создавайте и творите свои веб сайты с помощью WYSIWYG редактора

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

Ссылка на сайт редактора: https://webflow.com

Примеры работ и шаблоны сайтов: https://webflow.com/templates

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