4 инструмента для упрощения разработки адаптивного дизайна
За последние два года в сфере веб-дизайна все изменилось настолько, что нам теперь нужны совершенно иные инструменты. В этой статье представлены четыре новых приложения, которые должны помочь вам в тестировании адаптивного дизайна.
Может быть, вы уже давно мечтали об этом, с тех пор, как Этан Маркотт взорвал настоящую бомбу адаптивно веб-дизайна (RWD). Может быть, это произошло совсем недавно. Но, скорее всего, что-то среднее. В любом случае вы уже поняли это. Создавать адаптивный веб-дизайн (RWD) тяжело.
Часть трудностей связана с тем, что RWD сложно представлять визуально. Как показать клиенту или девелоперу ваши идеи по одному элементу для нескольких контрольных вариантов, если физически под рукой нет устройства, для которого этот вариант оптимизируется?
Конечно, в некоторых случаях HTML и CSS хороши для реализации RWD, для разработки исключительно на основе кода. В других случаях сложнее, когда, например, дизайн через структуру оторван от кода. Тем не менее, необходимо иметь среду для тестирования различных вариантов.
До недавнего времени такой средой, как правило, являлись графические редакторы наподобие Photoshop. Хотя через Photoshop можно представить наш эскиз, но нельзя забывать, что он ограничен статическим образом представления.
Вы можете использовать графический редактор, чтобы сделать несколько макетов, но это утомительно, и, если уж совсем честно, то различные контрольные варианты должны отталкиваться от содержимого страницы, а не зависеть от удобства (просто изменять элемент, когда изменяются все остальные).
Наш предыдущий набор инструментов просто не может отвечать всей сложности, с которой связано визуальное представление адаптивного дизайна.
Для веб-дизайна необходимо, чтобы наши инструменты имели холсты с плавающей сеткой, интегрированные веб-шрифты и работали с CSS. На данный момент уже существует несколько таких приложений, которые отвечают всем этим требованиям.
Итак, что же мы рекомендуем в качестве инструментов для разработки адаптивного дизайна?
Давайте подробнее рассмотрим четыре приложения, которые предназначены для работы с адаптивным дизайном, и выделяются среди остальных.
Webflow
Платформа: Браузер
Цена: $16 в месяц для персонального использования (10 проектов). $35 в месяц за профессиональную версию (без ограничения количества проектов).
В свое время Сергей и Влад Магдалины почувствовали, что существующие инструменты веб-дизайна их разочаровывают, и что есть необходимость найти какое-то другое приложение. Сергей тогда занимался вопросами дизайна, а Влад больше внимания уделял разработке.
Однако они чувствовали, что постоянные повторения одного и того же для разных вариантов тормозят их работу. И вместо того, чтобы продолжать безуспешно биться об эту стену, они решили что-нибудь предпринять.
«Изначально, как и почти каждое дизайнерское агентство на планете, мы пробовали создать собственную систему управления контентом», - объясняет Влад Магдалин.
«В конце концов, эти усилия натолкнули нас на мысль о чисто визуальном подходе к веб-разработке, который бы удовлетворял нашим требованиям, и мы начали работать над прототипом», - добавляет он. Этот прототип стал первой версией WebFlow, который сейчас уже является полноценным веб-приложением.
«С самого начала этого проекта, мы хотели, чтобы WebFlow стал приложением. Чтобы он был максимально приближен к среде. Если он будет работать, как веб-приложение, то это позволит с большей долей уверенности утверждать: «то, что вы видите, то вы и получите». Потому что это точно такой же код и внешний вид, которые будут задействованы в разработке.
Например, веб-дизайн включает в себя много аспектов, которые выходят за рамки просто графического представления (взаимодействие с элементами, отправка форм, изменение размеров, изменение масштаба). Так что это действительно помогает работать как можно ближе к конечному продукту. Создание браузерного приложения помогает нам этого достигнуть», - говорит Влад.
Что действительно выделяет WebFlow, так это его универсальность. Конечно, существуют инструменты для создания макетов, и если вы ограничиваетесь только дизайном интерфейса, вам может быть вполне достаточно интуитивно понятных элементов управления приложения.
Тем не менее, есть еще один аспект, в котором WebFlow может оказаться полезным: оптимизация и ускорение хостинга с резервированием данных и управлением версиями. Теоретически, вы можете начать с создания макета, провести его отладку и создать код, который будет готов к закачке на хостинг - все это в пределах WebFlow.
Тем не менее, WebFlow имеет некоторые ограничения, и это в принципе тоже хорошо. Например, без ограничений вы могли бы создать блок и перетащить его туда, куда вам нужно, пренебрегая при этом некоторыми веб-стандартами.
«Мы сознательно применяли ограничения модели CSS (отступы, фоны), потому что это дает некоторые преимущества в построении адаптивных макетов (например, автоматически реагирующих макетов и плавающих конструкций).» Вы можете пожертвовать полной автономностью, но это дает вам дизайн, который становится адаптивным по умолчанию.
«Это начало новой платформы для веб-дизайна», - заявляет Влад. – «Мы скоро представим другие функции, которые помогут веб-дизайнерам работать гораздо более эффективно и избавиться от огромной части монотонной работы».
Кто же может использовать WebFlow в своей работе? Если вы ищете основное приложение, которое позволяет разрабатывать проект от прототипа до развертывания, возможно этот инструмент для вас.
Конечно, его можно использовать и для решения одной конкретной задачи, но WebFlow, способен на гораздо большее, чем просто быть рабочей лошадкой для каких-то отдельных задач.
Froont
Платформа: Браузер
Цена: Бесплатно для публичных проектов
Иногда лучшие идеи происходят из предыдущих. Как и в данном случае, когда дизайнер из Сан-Франциско Сандишс Рулукс всего несколько лет назад запустил простую WYSIWYG систему управления контентом, Berta.me. Изначально он планировал использовать ее только для своего собственного сайта.
Но позже, когда он начал делиться нею с друзьями, количество ее пользователей увеличилось настолько, что он смог брать плату за хостинг. Однако у этой системы была одна существенная проблема: невозможность разработки для небольших экранов.
Рулукс начал разрабатывать для нее линейку для контрольных точек, управление сеткой и несколько других адаптивно ориентированных функций. Из этого родился FROONT. Это в принципе довольно типичный сценарий.
Однако данный случай еще раз подчеркивает важность разработки различных решений при работе над конкретными прикладными проблемами, в ходе которой рождаются различные приложения.
«Мы сфокусировались на вещах, которые либо очень трудно решаются с помощью существующего набора инструментов, либо не решаются вовсе. Например, мы не планируем добавлять возможность создания пользовательских графических форм, Photoshop и Sketch достаточно хороши для этого.
Вместо этого мы сосредоточились на самых прогрессивных практиках адаптивного веб-дизайна, веб-шрифтах и интерактивных элементах. Мы не собираемся концентрировать свои усилия собственно на CMS, и мы категорически против полной автоматизации проектирования; это противоречит инновационному подходу», - говорит Рулукс.
Возможно, наиболее заметное различие между FROONT и другими инструментами веб-дизайна заключается в том, как он отражается на вашем кошельке. FROONT позволяет абсолютно бесплатно публиковать общедоступные сайты и предоставляет вам HTML и CSS коды, если вы хотите использовать их где-нибудь еще.
Рулукс обещает, что FROONT «будет бесплатным до тех пор, пока проекты являются публичными». (Для частных проектов приложение будет доступно на платной основе).
Почему это настолько важно? Возможно, некоторые разработчики, которые планируют использовать приложение для развития проекта от прототипа до реализации, посчитали бы, что это неплохие инвестиции - заплатить за инструмент проектирования следующего поколения.
Но что, если дизайнер хочет просто поэкспериментировать? Конечно, главным аргументом всегда является ценность и качество инструмента, но когда существует так много рабочих процессов, это может стать немаловажным фактором выбора.
Тестирование становится проще
Одним из преимуществ использования инструмента проектирования на основе браузера является доступность самого браузера.
Чтобы просмотреть свои работы из исходного приложения в варианте для мобильного устройства, должно существовать некоторое приложение-посредник. Возможность открыть URL-адрес с вашего телефона, чтобы просмотреть проект на FROONT, делает весь процесс чрезвычайно простым.
«Все, что вам нужно сделать - это просто открыть страницу с любого подключенного к интернету устройства, просто введя ее URL-адрес. Таким образом, разработчики могут тестировать свои проекты в реальной «жизненной среде», - добавляет Рулукс.
Обмен данными осуществляется так же легко. FROONT не требует загрузки или дополнительной настройки вне приложения. Просто отправьте клиенту URL-адрес проекта и обсудите его с ним.
«Размещение проектов в облачном сервисе облегчает совместную работу и развитие», - говорит Рулукс.
Адаптивные варианты
Каждое приложение, претендующее на звание инструмента следующее поколения, должно решать, как визуализировать варианты. Подход FROONT является довольно интуитивным: В верхней части приложения вы можете выбрать значение из «большой четверки» размеров 320 , 480, 768 и 1024 пикселей. Вы можете редактировать любое из них, просто заменив на нужное вам значение.
Этот инструмент, возможно, не так автономен, как Reflow, но все же позволяет сформировать свои варианты для различных устройств в отличие от других приложений. В любом случае вы можете рассмотреть это приложение, подготовка различных вариантов в нем является контент-ориентированной.
Reflow
Платформа: Оригинальное приложение
Цена: Включена в пакет подписки на Adobe Creative Cloud
Когда мы говорим об инструментах для разработки, естественно, речь не может не зайти об Adobe. Бренд, несомненно, заработал это право своими Photoshop, Illustrator, Fireworks (RIP 2013) и другими подобными продуктами.
Но мы сосредоточим свое внимание на инструментах Edge, линейке приложений, предназначенных для устранения трудностей, с которыми сталкиваются веб-разработчики. Reflow является инструментом для создания адаптивного дизайна, о чем говорит его принадлежность к данной линейке.
Идеология данного инструмента проста: «Reflow предназначен для того, чтобы помочь дизайнерам представить свое видение и для адаптивных настроек. Сегодня дизайнеры не могут позволить себе роскошь плодить статические варианты и надеяться, что они подойдут для разных случаев», - объясняет Джейкоб Сурбер, старший менеджер по продуктам Reflow.
В Photoshop существовала проблема с адаптивными взаимосвязями. Как показать варианты дизайна со статической компоновкой в абсолютных значениях и фиксированным расположением элементов? В Reflow холст имеет плавающую сетку, а элементы задаются в процентных соотношениях, что позволяет клиентам и разработчикам лучше представлять, как элементы адаптируются к различным размерам экрана.
Визуализация переключения различных разрешений в Reflow действительно впечатляет. На линейке, расположенной в верхней части приложения, отображаются зоны, соответствующие различным видам запросов. Каждая зона имеет свой цвет. Это становится полезно при навигации по Reflow.
В то время как другие приложения могут отдельно визуализировать различные варианты для разных разрешений, Reflow может представить «прозрачный» вид разных вариантов одновременно. Вы можете свободно добавлять столько вариантов разрешения, сколько посчитаете необходимым.
Концептуальное решение команды Reflow заключается в том, что размещение контента отталкивается от медиа запросов, а не от популярных размеров экрана пользовательских устройств, которые могут быть изменены в любой момент, когда, скажем, Apple выпустит на рынок новый девайс.
«Если вы собираетесь создать свой адаптивный сайт не только для IPhone, IPad и настольных устройств (которые обязательно нужно учитывать), Reflow позволяет изменить размеры вашего макета, увидеть, где структура контента ломается, а затем добавить новый медиа запрос», - объясняет Сурбер.
– «Вместо того чтобы устройства диктовали варианты разрешения, теперь главная роль отводится контенту. Благодаря этому дизайн выглядит отлично, независимо от того, на каком устройстве он просматривается».
Интеграция с Photoshop
На каком этапе процесса разработки лучше всего использовать Reflow? В некоторых случаях имеет смысл задействовать его с самого начала. Другие разработчики по-прежнему предпочитают начинать проектирование дизайна в Photoshop, чей статический экспорт заводит многих в тупик в плане адаптивности.
К счастью, существует возможность импортировать документ Photoshop в Reflow. Вы можете начать разработку дизайна в своем привычном приложении, а затем провести тонкую настройку с использованием плавающей сетки в Reflow.
Как отмечает Сурбер: «После того как вы закрепите элементы, текст и статические слои в PSD-файле, Reflow преобразует их в определяемые процентными соотношениями HTML и CSS, в которых расположение всех элементов соотносится друг с другом. Отталкиваясь от этого, вы можете добавить структуру и иерархию».
Использование кода
Одним из наиболее важных вопросов, который разработчики инструментов дизайна следующего поколения должны себе поставить - будем ли мы по-прежнему предлагать готовые к производству HTML и CSS? Мы дизайнеры и разработчики, как правило, очень придирчивы во всем, что касается чистоты экспортируемого кода.
Reflow предлагает в этом плане хороший компромисс: CSS-сниппеты доступны для тех, кто хочет их использовать (через всплывающие панели), но это не является ключевым моментом интерфейса или рабочего процесса. HTML экспортируется в папку элементов, которая включена в ваш проект на Reflow. Но опять же, только вам решать, хотите ли вы его задействовать.
Reflow не является инструментом, предназначенным для публикации проектов. Это инструмент разработки, который помогает преодолеть разрыв между дизайном и адаптивными настройками.
Если вы хотите получить из приложения чистый, оптимизированный код (он в значительной степени зависит от блоков <div> и абзацев ), попробуйте Reflow Cleaner Терренса Райана.
Открытое развитие
С самого начала команда Reflow исповедовала подход «открытое развитие», что достойно восхищения. Отзывы клиентов повлияли на добавление к приложению многих возможностей. Кроме того в Twitter, на форумах и других платформах проходили многочисленные обсуждения, которые также были учтены при выпуске предварительной версии программы.
В результате использование Reflow ограничивается только лимитом на 30 дней после скачивания, связанным с бесплатным аккаунтом Creative Cloud. Возможно, в будущем это будет изменено, но в данный момент это прекрасный способ поэкспериментировать без любых обязательств.
Macaw
Платформа: Оригинальное приложение
Цена: TBA
Традиционно, работа с приложением для разработки, которое генерирует код, происходит по принципу создания минимального файла, который затем заполняется. Приложение генерирует свой код. Он может работать, однако он лишен тех блоков, идентификаторов и оптимизированных элементов, которые добавляются разработчиком интуитивно.
Macaw стремится не только изменить такое положение вещей, но и предлагает создание CSS-кода который может быть более кратким, по сравнению с тем, что напишете вы.
Давний приверженец Photoshop Том Джианнаттазио понял, что для веб-дизайна нужно что-то более подходящее. «В 2012 году, на момент когда я решил посвятить себя веб-дизайну, такого инструмента не было, - говорит Джианнаттазио.
– «Я начал с простых экспериментов и, в конце концов, оставил работу в Массачусетском технологическом институте, чтобы уделять этому все свое время. В конце концов, я убедил моего партнера (Адама Крайста) также полностью заняться только этим».
С тех пор команда из двух человек превратилась в интересное сообщество разработчиков, любимым «питомцем» которого стал Macaw. Несколько скриншотов, видео с небольшим превью проекта (см. ссылки на источники в конце статьи) и дикий успех на Kickstarter, где нам удалось собрать 100% средств, необходимых на финансирование в первые же 24 часа, показали, что ребята из Macaw однозначно привлекли внимание отрасли.
Инструмент для продвинутых кодеров
Кроме того, включая пользовательский интерфейс с CSS юнитами и адаптивными контрольными точками на холстах с плавающей сеткой, Macaw позиционируется, как «инструмент разработки для продвинутых кодеров». Генерируемый, оптимизируемый код это не просто одна из функций приложения, это возможно то, что отличает его от всех других продуктов.
Как удается обеспечить создание чистых HTML и CSS? Одним словом – «Алхимия». Это внутренний движок Macaw, который создает код, который может конкурировать с тем, что делают разработчики-асы.
«На стороне HTML это дает разработчику полный контроль над семантикой документа, всего лишь присваивая элементам имена с использованием простого синтаксиса», - поясняет Джианнаттазио. Это так же просто, как присвоив имя слою, производить корреляцию.
Еще более впечатляюще то, как эта «Алхимия» обрабатывает CSS. Когда его спрашивают о закулисной магии, Джианнаттазио отвечает: «Теги и классы, установленные для HTML, затем используются для консолидации CSS в наиболее сжатой и практичной форме - с учетом таких концепций, как специфичность, применимость, каскадность, дополнительные селекторы и медиа запросы».
Это не простая задача, учитывая бесчисленные способы, которыми можно обрабатывать CSS. Однако, простите за каламбур, Macaw по-настоящему смотрит на все эти вещи с высоты птичьего полета (Macaw - в перевод с англ. «попугай ара», прим.): «Так как он обозревает весь проект, он часто пишет стили более кратко, чем я сам мог бы предположить».
И вашим, и нашим
При разработке кода, и это естественно, используя Macaw, определенные преимущества получают и дизайнеры интерфейсов, и разработчики-механики. Дизайнеры найдут для себя полезным интуитивное назначение HTML- и CSS- элементов и классов.
В то время как разработчики оценят чистоту получаемого кода. И дизайнеры, и разработчики эффективно «соприкасаются» с кодом, и происходит стыковка их работы.
«Будучи оригинальным приложением Macaw, обеспечивает большие возможности. Многие ожидают, что средства проектирования следующего поколения должны работать на платформе браузера. Мы считаем, что инструмент разработки следующего поколения будет сам оснащаться браузером.
Это тонкое, но важное различие. Обычно работающие на базе браузера приложения - это великолепные инструменты, но они несколько ограничивают возможности разработчиков в связи с тем, что браузер изначально предназначен для просмотра страниц.
Мы же хотим обеспечить оптимальные возможности для разработчиков, и избежать проблемных моментов, таких, например, как сочетания горячих клавиш, которые не могут быть (легко) переназначены».
Google Web Designer - полезное приложение, если вы хотите поиграть с анимацией. Набор его функций позволяет также создавать рекламные блоки.
Одна из вещей, которые показал нам RWD, это то, что жесткие правила - верный способ провалить все дело. Кроме того, любой из инструментов, упомянутых выше, может стать для вас как долгожданной находкой, так и приложением, которое вы никогда и не используете в своей работе.
Это зависит от ряда условий: распределение ролей в вашей команде, содержание проекта, бюджет и многое другое. Эти инструменты реально являются серьезным прорывом по сравнению с тем, что мы имели до сих пор.
Но не один из них станет по-настоящему эффективным, если вы рассматриваете их просто как «самодостаточный способ при создании адаптивного дизайна». Процесс разработки включает в себя намного больше аспектов.
А насколько будет эффективно, скажем, использовать один инструмент для небольшого сайта, а другой для более крупного проекта? Или один инструмент для обмена информацией по концепции проекта, а другой для публикации сайта? Одним из преимуществ каждого из этих инструментов следующего поколения является универсальность.
Каждый способен быть обычной рабочей средой, если вы не стремитесь использовать такие инновационные функции, как страницы, пользовательские контрольные точки и экспорт кода. Кроме того, каждый представленный инструмент способен легко справляться с небольшими задачами.
Только помните, что «правильный» инструмент это часто тот, который позволяет решить «правильную» задачу, профессионально и эффективно.
По поводу графических редакторов
Частично ажиотаж вокруг этих инструментов вызван тем, что их называют потенциальными «убийцами Фотошопа».
Конечно, заманчиво помечтать о том, что какой-либо из описанных инструментов может стать таковым, однако, скорее всего, мы никуда не денемся в своих рабочих процессах от графических редакторов.
CSS, безусловно, дает нам средства для реализации стилей, и все перечисленные инструменты позволяют работать с ним на холсте. Тем не менее, ни один из них не подходит для создания растровых или векторных объектов, и не похоже, что когда-то сможет это.
Как заявляет Джианнаттазио: «Мы не пытаемся заменить Photoshop ... Macaw работает лучше вместе с Photoshop и Illustrator, он помогает дизайнерам создавать свои макеты в интерактивной среде».
Использование одного из этих инструментов как высокоинтеллектуального редактора кода вместе с графическим редактором может быть еще более эффективным, нежели просто использование одного инструмента проектирования следующего поколения.
Интеграция Photoshop с Reflow является ярким примером процесса, когда вы берете за основу эскиз из графического редактора, а затем настраиваете интерактивные функции.
Основная идея заключается в том, что не обязательно сокращать число используемых средств до минимума, а использовать их комплексно, повышая эффективность всего процесса.
Поддержка и преимущества
Для нас, как для членов сообщества, очень важно поддерживать его и вносить вклад в развитие созданных нами инструментов. Особенности менталитета, которые заключается в том, как они воспринимаются пользователями, и как с продуктами работать команде, в этой статье не освещались.
Каждое приложение поддерживается небольшой группой талантливых людей, которые непосредственно вышли из среды дизайнеров и разработчиков. На самом деле легко сетовать, что какая-то функция в приложении отсутствует, или какая-либо из них недостаточно интуитивна.
Но наша обязанность заключается в том, чтобы общаться с людьми, которые стоят за разработкой этих приложений, и сообщать им мнения общественности о том, как они могут быть улучшены.
Webflow, Reflow, FROONT and Macaw, каждое из этих приложений имеет потенциал, чтобы улучшить процесс создания адаптивного дизайна. Даже эти четыре талантливых команды дизайнеров и разработчиков уже предлагают нам решение проблем в отраслях, которые раньше были совершенно не охвачены.
Прошло всего два года, и благодаря этим инструментам будущее уже не выглядит таким непроглядным, они предлагают много решений проблем адаптивного дизайна. Поэкспериментируйте с ними и посмотрите, насколько они смогут облегчить вашу работу.