Как появился онлайн-редактор Setka Editor
История создания инструмента для современных онлайн-медиа и digital-редакций
Setka Editor появился внутри Look At Media — издательского дома, который всегда славился качественным дизайном. Онлайн-медиа, принадлежащие этой компании, стали образцом для подражания для многих российских lifestyle-изданий с точки зрения визуальной подачи контента. Кроме того, сотрудники Look At Media одними из первых стали экспериментировать с нативной рекламой — запоминающийся дизайн спецпроектов помог компании выиграть более 60 международных наград.
Но как превратить любовь к хорошему дизайну в стратегию для всей компании?
Издатели, редакторы и дизайнеры Look At Media формулировали свои цели так:
- Создание разнообразного визуального оформления для регулярных рубрик
- Сокращение времени, необходимого для верстки регулярных рубрик
- Наличие единого визуального стиля издания, который контролируется арт-директором (то есть редакторы и дизайнеры не могут его менять)
- Возможность делать запоминающиеся лонгриды с нестандартной версткой, которую сложно шаблонизировать
- Возможность работать автономно, не обращаясь к разработчикам
- Выпуск сложных, интерактивных, удерживающих внимание посетителей и формирующих имидж издания статей, каждый день, на потоке
Редактор. Прототип
Конечно, идея создать редактор Setka Editor, который помог бы справиться со всеми этими задачами, появилась не сразу. Сначала мы попытались найти существующий инструмент, который решил бы наши проблемы.
Разработчики сделали для дизайнеров Look At Media HTML-шаблоны, которые хранились на корпоративном сервере. Все сотрудники редакции могли скопировать шаблон из документа, вставить в пост и, проявив ювелирную точность и бережность в обращении с HTML-тегами, наполнить шаблон своим контентом. Благодаря этому простому ходу посты The Village выглядели гораздо лучше, чем материалы конкурентов.
Уже тогда в The Village мы использовали таблицы, чтобы имитировать модульную сетку. Это был первый шаг к воспроизведению в вебе принципов типографской верстки.
Однако у HTML-шаблонов были свои минусы:
- Шаблоны тяжело обновлять и тяжело контролировать их внешний вид (по коду непонятно, как будет выглядеть статья на сайте)
- Их сложно поддерживать, потому что любое внесение изменений требует детальной проверки кода всех шаблонов
- Надо набирать в штат дизайнеров, которые разбираются в HTML или готовы этому научиться
- Разные шаблоны для разных постов приводили к отсутствию консистентности и единого стиля издания
Редакция испытала множество неудобств: было сложно придумывать шаблоны для новых рубрик, на каждую статью все равно уходило много времени, поиск новых дизайнеров отнимал много сил. Кроме того, в шаблонах не хватало разнообразных графических элементов типа иконок, кавычек, символов, а они часто были необходимы для верстки.
Для того чтобы редакции могли стать более эффективными, мы решили создать собственный дизайн-инструмент — WYSIWYG-редактор, который бы позволял делать сложную верстку и мог отображать изменения в реальном времени.
Первая версия редактора Setka Editor
Мы проанализировали все визуальные элементы, встречающиеся в постах The Village, Look At Me и других наших изданий, и выделили несколько групп, которые должны были быть в будущем редакторе:
Иконки — например, красивые кавычки или заглушки, заменявшие отсутствие фото автора
Разделители — часто используются в оформлении постов и таблиц
Комплексные элементы, состоящие из нескольких частей — например, цитаты
Типографика — хорошо подобранный цвет текста и шрифтовые пары, как ничто другое, влияет на внешний вид издания. Для каждого размера и начертания мы подобрали расстояния между параграфами текста
Таблицы — изначально они использовались, например, для оформления списка ингредиентов в рецептах
Списки — подходят для обобщений, оглавлений длинных постов и так далее
Контейнеры для вставки эмбед-кода — помогают добавлять в пост видео и посты из соцсетей
Элементы для работы с изображениями — например, панель для загрузки нескольких фотографий одновременно. У The Village много постов с большим количеством визуального контента, и дизайнерам надо было оперировать несколькими изображениями сразу
Мы также сформулировали задачи нового инструмента:
- Избавить редакции от работы с кодом
- Минимизировать «ручной» труд
- Унифицировать все элементы верстки в рамках фирменного стиля
Но главной задачей было сделать настоящий WYSIWYG-редактор, в котором в процессе редактирования пост будет выглядеть точно так же, как он будет выглядеть при просмотре на сайте.
В первой итерации мы взяли за основу TinyMCE, убрали все лишнее и на его базе сделали первую версию Setka Editor.
В Look At Media был свой редактор для выпуска статей с момента появления компании в 2007 году, но он был очень примитивным и работал нестабильно. Для нас было важно не только создать WYSIWYG-редактор, но и значительно улучшить стабильность работы инструмента. В тот период количество выпускаемых материалов быстро росло, и мы не могли внедрять сервис, который будет работать с перебоями.
Когда инструмент был готов, мы дали возможность сотрудникам Look At Media проверить его на практике.
Елена Колобаева
продакт-менеджер Setka Editor«Мы внедряли новый редактор постепенно: начали с одной редакции и сразу получили позитивный отклик. После тщательного тестирования на одной команде мы постепенно запустили редактор и в остальных изданиях Look At Media.
Наши коллеги отметили удобство использования Setka Editor: все элементы дизайна стали доступны в одном месте. После работы в других, очень сложных внутренних инструментах, наш редактор подкупал интуитивно понятным интерфейсом и real-time-отображением контента в поле редактирования и на сайте. В Look At Media наконец появился единый дизайн-отдел для всех редакций — стиль издания теперь был отражен в интерфейсе, и дизайнерам нужно было лишь уметь пользоваться Setka Editor».
Вторая версия: больше, чем внутренний инструмент
Спустя пару лет мы поняли, что наш редактор пора переосмыслить. На это было несколько причин.
Существующая версия Setka Editor позволяла создавать публикации со сложной версткой, но мы видели, что подача материалов меняется. Например, становилось популярным использование анимаций, широкоэкранных фотографий и красочных фоновых изображений — их было сложно добавлять в существующую версию редактора.
Мобильный трафик продолжал расти и приближаться по объему к десктопному. Было важно, чтобы все создаваемые в редакторе публикации правильно отображались на мобильных устройствах.
Визуальный редактор был намного эффективнее, чем ручная верстка HTML-кода. Однако многие действия можно было упростить, чтобы еще больше сократить время, необходимое для верстки регулярных рубрик.
Мы также понимали, что Setka Editor может быть интересен и другим онлайн-изданиям, которые хотят выпускать запоминающийся контент. Для того чтобы редактор был доступен всем digital-медиа, он должен был отвечать следующим требованиям:
- Интеграция с разными CMS-платформами и возможность создавать отдельную конфигурацию под каждого клиента
- Настройка внешнего вида публикаций в соответствии с фирменным стилем издания
- Расширение функциональности при помощи плагинов
- Разумеется, оставались и обязательные технические требования к продукту: кроссбраузерность, соблюдение принципов SEO, семантический HTML-код.
Работа над новой версией началась с исследования. Мы провели серию интервью с редакторами, дизайнерами и арт-директорами изданий Look At Media, собрали их предложения по улучшению функциональности продукта, а также описали существующие в редакции процессы (узнали, кто и в какой последовательности участвует в выпуске разных типов материалов). Кроме того, мы на несколько недель установили систему аналитики, которая в редакторе отслеживала каждый клик по элементам интерфейса, и выявили наиболее часто используемые функции.
Для того чтобы убедиться, что продукт будет удобным не только в рамках Look At Media, мы встретились с редакторами, дизайнерами и менеджерами нескольких российских изданий и обсудили их внутренние процессы и подходы к верстке материалов. На основании полученных данных мы разработали информационную архитектуру продукта, полностью перепроектировали пользовательский интерфейс, а потом создали и протестировали интерактивный прототип нового редактора.
Павел Кутузов
продакт-дизайнер Setka EditorБольшинство веб-редакторов (rich text editors), включая TinyMCE, — инструменты общего назначения. Они понятны любому пользователю, который хочет опубликовать текст на сайте, будь то пресс-релиз, статья в блоге или описание товара в интернет-магазине. Как правило, в таких случаях используются только базовые приемы оформления: несколько уровней заголовков, полужирное и курсивное выделение, изменение цвета текста, вставка картинок и таблиц.
У крупных медиа и брендов больше требований к онлайн-редакторам: для них важны наличие уникального, обычно усложненного, фирменного стиля и высокая скорость публикации материалов. Также необходимо обеспечить стабильное качество и минимум расхождений со стилем издания. Для этого при разработке редактора мы соблюдали принцип WYSIWYG (What You See Is What You Get). Выпускающий дизайнер или редактор может быть уверен, что верстка, которую он видит в окне Setka Editor, будет точно отображена на сайте. Для ускорения процесса редакция может заранее выбрать все типы и размеры используемых сеток, допустимые цвета и размеры текстовых элементов. Кроме того, мы предусмотрели функцию сохранения блоков верстки для переиспользования. Это позволяет на ходу усложнять стиль верстки издания, даже если основной визуальный стиль не меняется.
Когда мы провели исследование и определились с требованиями к новой версии продукта, можно было переходить к разработке. Проанализировав текущую версию редактора, мы поняли, что ее будет сложно адаптировать под все наши запросы. Причина была отчасти в ядре TinyMCE, содержащем значительное количество legacy-кода для работы с редактированием rich text и поддержки старых браузеров, отчасти в наших собственных доработках, многие из которых нуждались в рефакторинге. Помимо этого, интерфейс новой версии редактора должен был сильно отличаться от существовавшего на тот момент. Добавлять в продукт новые функции в таких условиях было сложно — новый продукт мог бы получиться нестабильным.
Егор Яковишен
разработчикПочти все веб-редакторы основаны на браузерном режиме contenteditable, который дает пользователю возможность визуального редактирования текста на веб-странице. Этот режим по-разному реализован в разных браузерах: например, в Mozilla Firefox и Google Chrome редактирование одного и того же фрагмента текста может дать на выходе разную структуру HTML-кода. Также зачастую этот код перегружен лишними HTML-тегами и не оптимален с точки зрения соблюдения принципов семантики и SEO. Многие веб-разработчики знают об этих проблемах и поэтому с предубеждением относятся к использованию визуальных редакторов.
Для того чтобы решить эти проблемы, мы используем дополнительный слой абстракции над DOM-элементами поста — так называемый виртуальный DOM, знакомый вам по библиотеке React. Режим contenteditable и браузерные API используются для перехвата событий от пользователя (например, нажатие на клавишу или выделение текста), после чего соответствующим образом изменяется состояние (state) приложения, а интерфейс редактора обновляется. Это позволяет контролировать все операции с контентом поста и не зависеть от особенностей реализации contenteditable в конкретном браузере.
Решено было разработать новую версию редактора почти с нуля, положив в ее основу один из существующих проектов с открытым исходным кодом. Для этого мы проанализировали имеющиеся на рынке коммерческие и оpen source проекты (полный список можно посмотреть в таблице в Google Docs). Каждый инструмент оценивался по ряду критериев: частота обновлений, дата последнего релиза, количество контрибьюторов, наличие документации по API, зависимость от сторонних библиотек. Важным фактором была лицензия проекта: мы разрабатывали коммерческий продукт с закрытым исходным кодом, и популярная свободная лицензия GPL нам не подходила. Мы также смотрели, возможно ли на базе данного проекта реализовать все то, что мы запланировали.
В шорт-лист попали несколько редакторов, которые устраивали нас по большинству критериев. Мы задали дополнительные вопросы разработчикам каждого из них и в итоге выбрали проекте ContentTools — разработку британской компании getme. Проект пользовался популярностью на GitHub, он был снабжен подробной документацией и успешно решал проблемы contenteditable при помощи слоя абстракции над DOM-элементами. Единственным спорным моментом было то, что он был написан на CoffeeScript — минималистичном диалекте JavaScript, стремительно теряющем популярность по мере появления новых возможностей в самом языке. Мы решили, что на старте это не будет проблемой, а в процессе разработки мы заменим код на CoffeeScript на нативный JavaScript (в настоящий момент в редакторе уже не осталось ни строчки на CoffeeScript).
С самого начала разработки мы ориентировались на то, что редактор будет использоваться в разных изданиях и на разных платформах (например, проекты Look At Media работают на CMS собственной разработки — Setka Platform). Наряду с этим мы уже планировали следующий шаг — создание плагина для WordPress. Это продиктовало определенные архитектурные решения. Редактор не навязывает владельцу сайта собственный формат данных и позволяет хранить контент постов в виде обычного HTML с небольшим количеством метаданных, так что Setka Editor совместим почти с любой популярной CMS.
За 5 месяцев мы разработали новую версию редактора со множеством новых возможностей:
- Работа с сетками значительно ускорилась: стало проще размещать текст и фотографии внутри колонок, а также быстро менять их количество и ширину
- Появился быстрый предпросмотр сверстанного поста в десктопном и мобильном режимах без необходимости сохранения
- Расширилась функциональность спецблоков (часто используемых элементов поста вроде цитат или врезок): если раньше это просто были заранее заготовленные фрагменты верстки, то в новой версии они превратились в универсальные сниппеты, которые может создавать любой пользователь редактора
- Эмбед-коды перестали существовать отдельно от редактора и стали наглядно отображаться непосредственно в контенте поста
- Появилась возможность совершать операции сразу над несколькими элементами одновременно
- Увеличилось количество сочетаний горячих клавиш для часто используемых функций
- Для создания новой версии были использованы современные технологии и инструменты: ES2015+, React, Redux, webpack, HTML5, CSS3 и др.
Плагин для WordPress и других платформ
После тщательного тестирования новой версии редактора в редакции The Village мы поняли, что готовы предложить Setka Editor другим заинтересованным компаниям, которые ищут удобный редактор для создания красивых постов. Мы сделали компонент, который сразу был совместим с любой системой: WordPress, Django, Drupal, «1С-Битрикс» и кастомными CMS.
Первым нашим партнером стало петербургское издание «Бумага». Мы договорились, что дадим им удобный инструмент, в котором они смогут реализовать сложные случаи оформления постов без привлечения разработчиков и работы с кодом поста. «Бумага» использует WordPress, и на них мы впервые попробовали наш плагин для этой платформы. Фирменные стили для петербургского медиа и второго нашего партнера — «Большой Деревни» (тоже издание на WP) — мы собрали вручную. На тот момент это были статичные CSS-файлы.
После получения положительных отзывов от «Бумаги» и «Большой Деревни» наша гипотеза о том, что система подходит не только для LAM, но и для других изданий на рынке, подтвердилась. Правда, стало ясно, что мы не можем вручную настраивать фирменный стиль для каждого клиента и подключать его потом в коде (как мы сделали с «Бумагой» и «Большой Деревней»). Такую модель нельзя масштабировать, если мы хотим, чтобы Setka Editor могли использовать много редакций в России и по всему миру.
Появление Style Manager
Для того чтобы решить проблему с созданием фирменных стилей, мы сделали инструмент для их конфигурирования — Style Manager. Дизайнер может легко перенести свой брендбук в веб, просто последовательно выбрав фирменные элементы в веб-интерфейсе Style Manager. Причем в конфигураторе можно настроить именно те стили, которые потом используются в редакторе: шрифты, цвета, разделители, сниппеты (их теперь может создать любой сотрудник редакции, прямо из поста), кастомные CSS для управления стилями галерей и другими сложными элементами.
Style Manager — это гарант WYSIWYG, потому что он позволяет контролировать все стили и фирменные элементы, которые затем отображаются и в редакторе, и при просмотре поста.
Setka Editor — готовый инструмент для работы
После нескольких этапов работы над Setka Editor у нас появился инструмент для онлайн-редакций, которые хотят выпускать материалы с запоминающимся оформлением. Теперь редакторы и дизайнеры могут без помощи разработчиков перенести в веб фирменный стиль своего издания и наладить процесс выпуска статей с красивой версткой.
Затем мы занялись развитием продукта — для того чтобы он лучше подходил для выпуска постов в крупных издательствах. Например, мы запустили Smart Design Tools — набор инструментов, позволяющих автоматизировать процесс оформления. С их помощью человек, совершенно не разбирающийся в дизайне и верстке, может легко встроить свой контент в сетку, оформить цитаты и т. п.
Следующим этапом стало развитие инструментов для сотрудничества. Теперь все участники команды могут оставлять друг другу заметки, отмечать коллег в комментариях. Появилось базовое разделение прав. В наших планах — еще больше инструментов персонализации (в частности, персональные сниппеты и рекомендации по верстке).
Также мы предоставили клиентам возможность создавать шаблоны постов и группировать блоки верстки (сниппеты). Теперь процесс выпуска материалов регулярных рубрик или стандартных постов ускорен в разы — оформление поста можно начать с выбора шаблона, добавляя необходимые элементы из библиотеки удобно сгруппированных сниппетов. Совсем скоро мы выпустим еще одно большое обновление редактора для еще более эффективной работы в Setka Editor.
Катя Базилевская
CEO Setka и сооснователь Look At MediaИдея создать Setka Editor появилась, когда мы поняли потребность редакций иметь простой способ верстки регулярных материалов. Опираясь на опыт работы изданий Look At Media, мы придумали и реализовали инструмент, который может использовать любая редакция, не обладая огромным штатом дизайнеров, верстальщиков и разработчиков.
Также оказалось, что Setka Editor стал полезен не только редакциям. Мы видим, как бренды, контент-команды и отделы спецпроектов используют редактор и экспериментируют с ним. О том, как это происходит — тема отдельного материала.
