Инструменты адаптивного дизайна нового поколения: Webflow, Edge Reflow, Macaw | Веб-дизайн

http://www.internet-technologies.ru/articles/article_2016.html

Инструменты адаптивного дизайна нового поколения: Webflow, Edge Reflow, Macaw

В процессе подготовки статьи о том, насколько меняется сегодня роль веб-дизайнеров и разработчиков - она была опубликована несколько месяцев назад - я взял интервью у представителей более 20 веб-агентств. И оказалось, что многие из них столкнулись с трудностями, связанными с включением в рабочий процесс адаптивного дизайна.

А функции большинства веб-дизайнеров на сегодняшний день существенным образом изменились, так как они вынуждены заниматься в той или иной форме и кодами.

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

Эти средства проектирования адаптивного дизайна предназначены для тех, кто разбирается в HTML и CSS (или желает научиться) и хочет, чтобы можно было визуально проектировать адаптивный сайт, а код иметь отдельно.

К новейшим и самым значимым визуальным билдерам адаптивных сайтов относят Webflow, Adobe Edge Reflow CC и Macaw. Да, есть и миллион других, в том числе Squarespace, FROONT и Easel, но мы в этой статье остановимся только на выше перечисленных инструментах.

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

Для справки, я являюсь разработчиком интерфейсов, пишущим руками коды для адаптивных сайтов, и использую несколько фреймворков и мой собственный код в качестве отправной точки (наряду с WordPress). Я всегда настороженно относился к автоматической генерации готового кода, и тому есть веские причины (помните GoLive?).

Но я также понимаю, что такие инструменты, как эти, хороши в определенное время, в определенном месте, и, да, для определенной аудитории.

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

Я даже как-то использовал некоторые их них для быстрого создания прототипов. Какое богохульство! Итак, давайте начнем с обзора WebFlow.

WebFlow

Как и все инструменты, которые мы рассмотрим, Webflow является относительным новичком на рынке.

Это браузерный drag-and-drop редактор, предназначенный для создания адаптивных сайтов без необходимости просмотра кода. Он оплачивается через ежемесячную подписку и имеет несколько уровней цен для отдельных категорий пользователей и групп пользователей.

Обязательной опцией для всех тарифных планов является возможность размещения в сети предоставления контента WebFlow через поддомен (yoursite.webflow.com). Если вы не хотите заплатить еще несколько долларов и разместить контент на хостинге с пользовательским доменом.

Но вы также можете просто экспортировать сгенерированный код и перенести его туда, куда захотите. Как же WebFlow генерирует это код, спросите вы? Он основан на Bootstrap 3.0, и, да, некоторые из нас смогли бы написать более чистый, более простой и более семантически корректный код, но многие говорят, что код WebFlow достаточно чистый.

После того, как вы зарегистрировались и вошли в систему, вы попадаете в панель администрирования WebFlow. Здесь вы можете управлять своей учетной записью, управлять настройками сайта и собственно начать создавать свой веб-сайт. По умолчанию, в админ панели размещено не так много инструментов.

Главный из них - это большая синяя кнопка, которая «смотрит» вам прямо в лицо, призывая создать свой сайт. Вы можете либо использовать шаблон, либо начать с нуля. Там даже есть площадка для шаблонов, платная и бесплатная, где вы можете продавать свои собственные шаблоны WebFlow:

Рабочие блоки

После того, как вы создали свой сайт, Вы попадаете в дизайнер WebFlow, где происходит все волшебство. Через конструктор, который в настоящее время поддерживается только в Google Chrome и Google Canary (который фактически представляет собой Chrome для разработчиков, с почти ежедневно добавляющимися новыми возможностями), вы увидите в браузере вашу первую страницу, слева от которой будут расположены панели инструментов, и несколько панелей справа.

Общие операции (такие как добавление страниц, публикация и предварительный просмотр) находятся слева, а более частные функции и опции форматирования расположены справа.

Из панели "+" справа можно перетащить элементы макета (блоки <div> или элементы HTML5, задаваемые для максимальной ширины или ширины в 100%) и настраиваемую сетку макета для рабочего стола по умолчанию.

Задав основную структуру, вы можете приступить к добавлению содержимого страницы. WebFlow поставляется с набором стандартных веб-компонентов (включая списки, ссылки и текстовые блоки) и рядом настраиваемых виджетов (таких как кнопки социальных медиа и адаптивные ползунки), которые можно перетаскивать на страницу.

Для изображений, вы можете использовать GIF, JPG, PNG или SVG, а также изображения, оптимизированные под Retina и дисплеи с высоким разрешением. Вы также можете перетащить виджет "Embed", чтобы добавить свой собственный код:

Дизайн

В то время как WebFlow является drag-and-drop приложением, он работает не совсем так, как Photoshop или Illustrator. Контент, который вы создаете, собирается, как пазлы головоломки, и позиционируется с помощью стандартных свойств CSS, таких как padding, margin и position.

Как кодер, я оценил, насколько эффективно WebFlow визуально отображает структуру HTML и CSS свойств. В результате, базовые знания HTML и CSS все же необходимы, и новички в сайтостроению могут быть немного озадачены некоторыми из опций, но обучающее видео поможет с этим разобраться. Как и кнопки вызова справки ("?"), расположенные повсюду.

Если быть честным до конца, панель стилей справа, где вы можете настроить большинство свойств CSS, интуитивна относительно, и способ, которым обрабатываются CSS свойства, такие как padding и margin, довольно мудреный. CSS кодеры могут почувствовать, что им этого мало, и захотят увидеть код.

Обмен содержимым между страницами довольно прост, а некоторые элементы SEO-контента, такие, например, как тайтлы и описания, могут быть установлены для каждой страницы:

Определение адаптивного дизайна

Когда дело доходит до того, как содержимое непосредственно адаптируется к размеру окна браузера, WebFlow следует изначальному подходу к адаптивному дизайну: через три устройства или контрольные точки. По мере добавления и создания собственного контента и областей можно определять, для какого размера устройства (из трех) они предназначены.

Вы также легко можете через интерфейс предварительно просмотреть внешний вид дизайна в трех разрешениях. В настоящее время, контрольные точки не редактируются в конструкторе. Вы можете только добавить собственный код в панели инструментов или экспортировать код и редактировать CSS в другом месте:

Шрифты, медиа, формы, ссылки

• Шрифты

В наши дни, предоставление шрифтов является обязательным сервисом для любого уважающего себя дизайнера. В панели инструментов можно осуществить интеграцию с Google Fonts или с набором из аккаунта Typekit, и эти шрифты будут доступны в меню «Font»;

• Медиа

Добавлять медиа (в том числе видео с Vimeo и YouTube) тоже довольно просто. WebFlow использует виджет "Embedly" для вставки содержимого от большого количества провайдеров;

• Формы

В системе доступны простые формы для связи, также довольно легко можно разработать свои собственные. Вы можете получать отправленные данные по электронной почте. Или просто извлеките данные, захваченные формой, из настроек в панели инструментов. Или подключите форму к другому скрипту (или просто вставьте собственный код формы);

• Ссылки

Помимо стандартных вариантов ссылок (ссылки между страницами сайта, электронная почта и телефон), WebFlow позволяет добавлять ссылки на разделы ваших страниц с помощью прокрутки между автоматически вставляемыми анкорами.

Вы также можете вставить блок-ссылку, который представляет собой область контента с одной ссылкой, применяемой к нему. Вы также можете легко настроить внешний вид ваших ссылок, задав для них стили.

Работа с кодом

Как и большинство других инструментов, здесь наиболее продвинутые HTML и CSS функции по умолчанию скрыты, но их можно подключить. Если вы ищете приключения, вы можете назначать контенту свои собственные классы, а также переименовывать и удалять их в Диспетчере стилей.

Если вы дружите с кодом, вы можете вставить свои собственные коды в head и body. Это открывает вам возможности для добавления пользовательских компонентов, таких как JQuery-плагины и многое другое:

Интеграция с CMS

WebFlow в настоящее время является билдером статических сайтов, и он не привязан к какой-либо системе управления контентом (CMS) или системе блогов.

Вы можете экспортировать код вашего дизайна из WebFlow и использовать его в качестве отправной точки для проекта на WordPress (или другой системе) или даже в качестве флэт-файла CMS. Но как только код экспортирован, он теряет связь с оригинальным дизайном в WebFlow.

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

При проектировании в WebFlow, вы можете вручную создать версию или задать автоматическое создание новой версии при каждом 20-ом сохранении.

Точка восстановления будет создана в настройках сайта, и вы сможете добавить к ней примечание. Тогда, если что-то случится, вы сможете восстановить весь файл (то есть весь веб-сайт) из ранее сохраненной версии. Так что написать короткое примечание по точке восстановления, в котором объясняется, на каком этапе сейчас находится сайт - это хорошая идея:

Публикация и экспорт

Публикация в сети контента WebFlow (входит в стоимость) осуществляется довольно просто. Как и экспорт, если вы предпочитаете взять код и использовать его в другом месте.

Я могу представить себе несколько применений для этой функции: люди, использующие WebFlow для создания своего собственного статического адаптивного веб-сайта; дизайнеры, использующие его для демонстрации адаптивного дизайна или передачи экспортированного кода разработчикам; разработчики, использующие фрагменты сгенерированного кода в своих проектах.

WebFlow также позволяет пользователям работать совместно (эта опция стоит дороже), в том числе обмениваться шаблонами, передавать веб-сайты клиентам и многое другое:

Adobe Edge Reflow CC

Edge Reflow является частью семейства инструментов и сервисов Edge, которые Adobe запустил в последние годы. Семейство включает в себя Edge Reflow, Edge Animate и Edge Inspect, они все входят в Creative Cloud, который распространяется на основе подписки.

В отличие от WebFlow, который работает в браузере, Edge Reflow в настоящее время представляет собой приложение, которое вы загружаете и устанавливаете на жестком диске.

Так как Reflow по-прежнему находится в режиме публичного тестирования (как бета-версия, доступная для всего мира), он еще не полностью доведен, и некоторые элементы, скорее всего, будут в будущих версиях изменены на основе отзывов пользователей.

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

Рабочие блоки

Когда вы начинаете проект в Reflow, вы можете использовать один из нескольких методов. Вы можете создать проект Reflow, содержащий страницы вашего сайта и начать с чистого листа.

Вы можете импортировать веб-изображения и контент Photoshop, а затем создать свой дизайн; следуя этим путем, вы можете даже импортировать контент в свой проект Reflow непосредственно из файла Photoshop CC (только версии 14.1+ - CS6 и более ранние версии работать не будут), если файл Photoshop (PSD) был установлен должным образом.

Третий метод - это экспорт проекта Reflow из Photoshop CC (14.1+) в качестве отправной точки для адаптивного дизайна в Reflow.

Это позволяет импортировать фигуры, текст и элементы, которые вы задали в документе Photoshop, при использовании встроенной технологии генератора Photoshop CC (14.1+), веб-оптимизированные изображения будут автоматически сгенерированы на основе имен слоев в Photoshop.

Эта возможность является главной приманкой для тех из нас, кто в веб-дизайне использует Photoshop, как базовое средство разработки.

Дизайн

Что касается дизайна, то Reflow очень похож на Photoshop или InDesign. Вы перемещаете элементы визуально, а не редактируете CSS и HTML. В Reflow нужно рисовать элементы содержимого страницы в области дизайна, а не перетягивать их (как в WebFlow).

Объявление float: left применяется по умолчанию ко всем элементам Reflow, поэтому перетаскивать элементы, содержащиеся на странице, сначала вы не сможете. И опять же, это приложение требует, чтобы вы понимали концепции HTML и CSS, потому что большинство связанных со структурой функций основываются на них.

Чтобы облегчить процесс создания дизайна, в Reflow реализована настраиваемая сетка, которая позволяет редактировать столбцы, средники и прозрачность. Каждая адаптивная контрольная точка может иметь разные настройки сетки.

Вы можете создать несколько страниц, и, что больше всего похоже на добавление CSS - вы можете скопировать и вставить визуальные стили от одного элемента в другой. Reflow также позволяет получить доступ к основным параметрам CSS для стилей body (так называемая «страница») и к содержимому блоков <div> (которые содержат все страницы Reflow).

Определение адаптивного дизайна

Так как создание адаптивного дизайна – это основная задача Reflow, то то, что его действительно выделяет среди других приложений, это как визуально задаются контрольные точки. В Reflow представлен весь адаптивный спектр (а не только три размера устройств, как в WebFlow).

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

Reflow даже позволяет установить максимальные и минимальные контрольные точки, а значит, вы сможете создать отправной вариант для самого минимального разрешения:

Шрифты, медиа, формы, ссылки

• Шрифты

В интерфейсе Reflow легко могут быть использованы шрифты от Tyepkit. В Reflow также реализован доступ к Edge Web Fonts (коллекция веб-шрифтов от Adobe, Google и других);

• Медиа

Так как вы не можете добавлять свой собственный код (кроме редактирования сгенерированного кода), добавление медиа в Reflow невозможно. Вы можете установить заполнитель для медиа (например, изображение) и использовать его в качестве визуального объявления, позволяющего перейти на сайт, предоставляющий медиа-контент;

• Формы

В Edge Reflow вы можете добавлять ряд стандартных элементов форм, таких как кнопки, поля для ввода текста и переключатели (а также некоторые другие). Добавление этих элементов формы в страницу не добавляет тэги форм в сгенерированный код - элементы форм не предусмотрены базовым функционалом приложения.

Это еще раз говорит нам о том, что на текущий момент Reflow является инструментом для создания макетов, он больше подходит для разработки и демонстрации концепции дизайна, нежели для генерации готового кода;

• Ссылки

В последней версии Edge Reflow CC вы можете добавлять ссылки на внутренние страницы, созданные в рамках проекта, и на внешние URL-адреса, а также операторы контроля, такие как hover и active для любых объектов вашего сайта.

Интеграция с CMS

Reflow в настоящий момент не поддерживает возможности интеграции с CMS. Вы можете взять код, сгенерированный приложением, и реализовать это самостоятельно вне системы.

Работа с кодом

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

Тем не менее, с помощью панели Elements вы можете назначать имена элементов и организовывать код (т.е. выполнять функции DOM) в иерархию, что может быть полезно для вас (и, возможно, для вашего разработчика).

Если вы хотите добавить, скажем, JQuery слайд-шоу, плавную прокрутку и видео или использовать собственный HTML код, вам придется отредактировать сгенерированный код в рамках другого приложения:

Публикация и экспорт

Имейте в виду, что Edge Reflow в настоящее время не поддерживает функции экспорта или публикации. При просмотре веб-сайта в поддерживаемом браузере Reflow генерирует HTML и CSS коды, но встроенные комментарии предупреждают о том, что данный код не рекомендовано использовать в производственной среде.

Судя по отзывам на форумах Edge Reflow, многие все же пытаются. Reflow позволяет скопировать и вставить сгенерированный CSS-код, чтобы использовать его в дальнейшем на вашем веб-сайте:

Macaw

И последним приложением, которое мы сегодня рассмотрим, будет Macaw, который был представлен общественности совсем недавно - версия 1.0 увидела свет 31 марта. Macaw позиционируется как инструмент веб-дизайна, в котором также реализована семантика HTML и CSS. Я думаю, что его слоган говорит сам за себя: «Хватит писать код, начните его рисовать».

Как и Edge Reflow, Macaw также устанавливается на жестком диске и связывается с зарегистрированной учетной записью. Но в отличие от WebFlow и Reflow, абонентская плата за использование Macaw отсутствует. Вы платите только один раз.

Поработав с Macaw несколько дней, я могу сказать, что он имеет большой потенциал в качестве инструмента для создания адаптивного дизайна. То есть уже версия 1.0 производит впечатление, несмотря даже на некоторые баги.

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

Рабочие блоки

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

Интерфейс Macaw довольно прост, и для среднестатистического дизайнера не составит большого труда разобраться, что тут к чему - настолько, насколько позволят его собственные знания HTML и CSS.

Как и Reflow, Macaw очень похож на Photoshop и InDesign, что касается подходов к дизайну. Вы рисуете и перемещаете элементы визуально, вместо того, чтобы редактировать CSS и HTML. Движок, который называется стрим, вычисляет все свойства, которые отвечают за расстановку элементов дизайна в статическом документе.

Как и в случае с WebFlow и Reflow, вы должны концептуально понимать HTML и CSS, потому что большая часть функций базируется именно на них:

Дизайн

В Macaw реализована функция, которая, как представляется, будет полезна многим дизайнерам и разработчикам. Она называется «Режим просмотра». С ее помощью элементы дизайна можно просматривать в трех режимах: «нормальный», «контуры» или «каркас».

Так как многие из вас будут использовать Macaw как инструмент для разработки каркаса или макета, то возможность просматривать страницу в виде черных контуров («контуры») или серых блоков («каркас»), станет весьма полезной:

Определение адаптивного дизайна

Проработав некоторое время с Edge Reflow, я был удивлен тем, как похожа на него рабочая область Macaw. Как и Reflow, Macaw позволяет визуально задать контрольные точки, хотя, по моему мнению, его интерфейс не такой приятный, как в Reflow. В нем представлен весь адаптивный спектр (а не только три размера устройств, как в WebFlow).

Если части вашего дизайна ломаются на каких-либо контрольных точках, вы легко сможете задать новую и внести необходимые изменения. К сожалению, Macaw в настоящее время не позволяет заложить "mobile-first" структуру дизайна, так как в нем не поддерживаются max и min контрольные точки.

DOM также блокируется при создании контрольных точек для малых разрешений, и вы не можете добавлять контент (большинство инструментов при этом просто неактивны). Но люди на форумах Macaw активно добиваются введения min-width контрольной точки (которая в первую очередь ориентирована на "mobile-first"дизайн):

Шрифты, медиа, формы, ссылки

• Шрифты

Веб-шрифты Google интегрированы в рабочую область. Вы также можете получить доступ к шрифтам Typekit, подключив свой аккаунт в меню «Font» раздела дизайна.

• Медиа

В настоящее время, Macaw не поддерживает простых способов вставки сторонней среды, такой как YouTube видео. Однако через панель "Scripts" вы можете вставить элемент-заглушку и привязать к ней JavaScript.

• Формы

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

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

• Ссылки

Вы можете проставлять ссылки на страницы, созданные в рамках проекта, как и на другие типы ссылок через меню «Links».

Работа с кодом

Самое тесное взаимодействие с кодом (кроме редактирования опубликованного кода) производится при редактировании элементов в панели «Outline», которая является представлением DOM.

В этой панели вы можете изменить HTML-теги, вставить и реорганизовать контент, применить имена CSS и многое другое. Вы также можете создать глобальные стили (CSS), которые могут быть применены к содержанию:

Интеграция с CMS

Как и Reflow, Macaw не интегрируется с CMS. Некоторые ребята из сообщества Macaw пытаются перенести рабочий процесс из Macaw в WordPress (и на другие платформы), но прямое взаимодействие текущей версией приложения не предусмотрено.

Публикация и экспорт

Macaw содержит опцию публикации. При выборе соответствующего пункта меню пользователю выводится окно предварительного просмотра. В отличие от Reflow, в Macaw в разделе «Настройки публикации» предлагаются варианты для экспорта.

В диалоговом окне вы можете выбрать, какие страницы хотите экспортировать, внедрить код (например, для Google Analytics) в head или body, дополнительно обработать CSS-код под свои потребности (создать сокращения, добавить вендорные префиксы, объединить стили и т.д.), создать оптимизированные изображения для экранов с высоким разрешением и многое другое.

Вы можете не только просматривать данный код, но выполнять над ним ряд операций. После публикации проекта программа выведет вам окно предварительного просмотра, где вы сможете просмотреть весь код (HTML, CSS, JavaScript) и даже просмотреть страницу в браузере.

Из трех рассмотренных нами сегодня приложений, код, формируемый Macaw, является самым кратким, и он ближе всех к тому, что мог бы написать непосредственно разработчик интерфейсов:

Заключение

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

	Webflow	Edge Reflow CC	Macaw
Цена	Месячная подписка, от $14	Часть Adobe Creative Cloud (месячная подписка)	$179 (одноразовая плата)
Хостинг	Включен (различный для каждого тарифного  плана)	Пять сайтов включены в подписку Creative Cloud, однако из Edge Reflow на данный момент нельзя экспортировать на веб-хостинг Adobe.	Отсутствует
Качество кода	Рабочее качество: на текущий момент используется Normalize.css (версия 2.1.3), Modernizr и jQuery (версия 1.11.0), а также собственные библиотеки. Код относительно чистый, используются классы вместо ID. Используется базовый файл CSS, а ваши изменения сохраняются в отдельном файле.	Тестовое качество: код оптимизирован только под WebKit браузеры (Google Chrome и  Safari). Основа - CSS из HTML5 Boilerplate, библиотеки JavaScript не используются. Код содержит много идентификаторов, и вам затем очень трудно будет использовать вместо них стили, когда вы редактируете код. После чистки код может быть использован, в качестве отправной точки.	Рабочее качество: Используются Normalize.css (версия 2.1.0) и jQuery (версия 1.8.3). Код относительно чистый, вместо ID используются классы. Используется базовый файл CSS, и каждая страница имеет отдельный CSS-файл для настроек сетки. Ваши изменения сохраняются в отдельном файле.
Адаптивный дизайн	Webflow поддерживает три контрольные  точки для различных устройств. Когда вы создаете контент или области, вы можете назначить, для какого типа устройств они предназначаются. На данный момент контрольные точки не могут быть отредактированы в пределах приложения.	Визуальное добавление и редактирование контрольных точек. Представлен весь адаптивный спектр. Добавление контрольной точки производится простым нажатием кнопки с последующим внесением необходимых изменений. Вы можете даже задать контрольные точки max и min , что предполагает создание mobile-first дизайна.	Macaw позволяет визуально задавать контрольные точки. Представлен весь адаптивный спектр. Вы не можете задавать контрольные точки max и min, поэтому создание  mobile-first дизайна не поддерживается. DOM блокируется при создании контрольных точек сверхмалого разрешения.
Шрифты	Интегрированы шрифты Google Fonts, также возможно подключение через панель инструментов набора шрифтов из аккаунта Typekit.	Возможна интеграция с Typekit. Также реализован доступ к коллекции Edge Web Fonts.	Шрифты Google Fonts интегрированы в рабочую область, вы можете также установить доступ к шрифтам Typekit.
Медиа	Добавление медиа (Vimeo, YouTube и т.д.) осуществляется очень просто. С помощью виджета "Embedly" можно установить связь со списками контента провайдера.	Так как вы не можете вводить в приложении собственный код, добавление медиа невозможно.	Добавление медиа, видео YouTube и др., проблематично. В то же время вы можете добавить заглушку и привязать ее через панель "Scripts" к JavaScript.
Формы	Вы можете добавлять формы обратной связи и легко  задавать их дизайн. Вы можете получать вводимые данные по электронной почте или привязать форму к другому скрипту (или использовать свой собственный скрипт).	Вы можете добавлять стандартные элементы форм, однако, при генерировании кода тег form не добавляется. Форма является просто заглушкой и не предполагает наличие функционала.	Вы можете добавлять стандартные элементы форм, однако сама форма будет скорее элементом дизайна, чем полноценной рабочей формой.
Работа с кодом	Дополнительные HTML и CSS функции по умолчанию скрыты, однако могут быть подключены. Вы можете назначать стили для элементов, а также переименовывать и удалять их в менеджере стилей. Вы также можете добавлять собственные стили в теги head или body.	Как таковая опция редактирования кода отсутствует. Вы можете задавать имена элементам HTML назначать стили CSS и организовывать DOM в иерархию. Дополнительный код в рамках проекта Reflow добавлен быть не может.	Самое большее, что система позволяет делать с кодом, это изменять HTML-теги, вставлять и реорганизовывать контент, применять имена CSS и производить другие подобные действия. Вы также можете применять к контенту глобальные стили и создавать классы.
Интеграция с CMS	Webflow является конструктором статических сайтов и не связан ни с одной CMS или платформой блогов. В то же время вы можете сохранять версии сайта.	В текущей версии интеграция отсутствует.	В текущей версии интеграция отсутствует.
Публикация и экспорт	Публикация в сети предоставления контента Webflow (включена в стоимость) осуществляется довольно просто. Как и экспорт, если вы предпочитаете использовать сгенерированный код на стороне.	Edge Reflow CC на текущий момент не поддерживает публикацию или экспорт. HTML и CSS коды генерируются в процессе предварительного просмотра, но они не предназначены для производства. Вы можете скопировать и вставить сгенерированный CSS-код в другом месте.	Поддерживается опция публикации, с различными настройками. Сгенерированный код наиболее чистый и наиболее близок к тому, который мог бы написать реальный разработчик интерфейсов, из всех трех рассмотренных приложений.

Рассмотренные инструменты адаптивного дизайна, вероятно, все еще будут присутствовать на рынке какое-то время. В той или иной форме. С тех пор, как на сцену вышли мобильные устройства, мы пытались настроить наши рабочие процессы так, чтобы в них нашлось место для адаптивного дизайна.

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

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

Имейте в виду, что Macaw и Reflow предназначены для интеграции в рабочий процесс, но не для того, чтобы начинать его или завершать.

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

Перевод статьи «Next-Generation Responsive Web Design Tools: Webflow, Edge Reflow, Macaw» был подготовлен дружной командой проекта Сайтостроение от А до Я