Обычно выделяют 2 типа редакторов для создания емейл-шаблонов: редактор кода и блочный редактор. Это связано, на мой взгляд, с двумя причинами:
- не любой код может быть адаптирован под внутреннюю верстку блочного редактора;
- если дать волю пользователю делать больше дозволенного редактором, то он непременно все поломает, а виновата как всегда будет система и отгребать будет служба поддержки.
НО, эти причины все технического характера, а не пользовательского. При этом очень часто возникает желание немного изменить созданный код или вставить свой «сниппет».
Интересное наблюдение за верстальщиками писем в eSputnik: разработчики писем открывают инспектор кода, меняют его там и сразу же смотрят на результат, так как это очень удобно. Инспектор кода дает возможность писать безопасный HTML закрывая все незакрытые теги и т.п. Но главное — быстрый результат. Любое изменение в письме ведет к изменению в коде и наоборот. Еще один классный плюс использования инспектора кода — он сфокусирован только на выделенном элементе быстро находя тот фрагмент кода, который нужно.
Наряду с подсветкой синтаксиса именно эти 3 особенности и легли в основу нашего редактора:
- Редактировать только участок кода, над которым работаем;
- Быстро применять изменения в обоих направлениях;
- Обеспечить безопасность введенного кода закрывая теги.
Определить выделенный код очень легко. Я уже писал, что у нас есть иерархия контента в письме: полоса, структура, контейнер, блок и элементарный элемент. Выделив соответствующий фрагмент в редакторе кода показывается только выделенный код и не дает, с одной стороны, поменять внешний код, а с другой, фокусируется на нужном фрагменте кода.
Есть еще один принцип который стоит описать отдельно: мы решили отказаться от всплывающих окон. Это тема отдельного поста. В частности этот принцип позволяет легко менять html и следить за изменениями.
Немного о стилях
В письмах все еще нельзя в полном объеме использовать внешние стили перечисленные в head или body style. Рекомендуется некоторые стили вставлять в инлайн элементов. Но в момент редактирования хорошо бы пользоваться общими стилями и иметь возможность сказать что в футере письма, например, все ссылки должны быть неподчеркнутыми.
Кроме того, в теле письма CSS стили и код фрагмента находятся в разных частях.
Поэтому мы выделили стили в отдельный таб редактора (в принципе как и в инспекторе кода Chrome). Т.е. продвинутый пользователь может его дописывать и переопределять как хочет, добавлять media селекторы и собственные особенности. А в момент экспорта письма мы запускаем инлайнер, который вставляет CSS как положено. Обычный пользователь может менять все стили с помощью блока управления: оформлять и сохранять разные темы писем в рамках проекта. Про это тоже отдельный будет пост.
Cобственная разметка кода
Можно просто отредактировать любой блок так, как считает нужным специалист, и сохранить его в библиотеку для дальнейшего использования. Более того, можно взять и загрузить туда вообще произвольный HTML и CSS. В таком случае от всего блочного редактора будут доступны только редактор картинок и ссылок. Потому что это обычные стандартные элементы письма, не требующие специальной разметки.
В то же время есть такие блоки, как, например, меню, или контейнер, которые имеют специальные служебные стили и дают возможность понять, что это за блок. Во время редактирования мы следим, чтобы они не были нарушены. Но такая функциональность позволяет настраивать чужие шаблоны под особенности редактора Stripo. Например, пометить какой-то блок как контейнер и он обретет все необходимые свойства и туда можно будет уже добавлять другие блоки. Как настраивать шаблон я опишу в одном из отдельных постов. Также, я хотел бы сделать отдельный «визард» по адаптации произвольного HTML к редактору eSputnik. Но это не приоритет ближайшего месяца, поэтому про это пока не пишу.
В планах обязательно написать мануал по подготовке произвольного HTML по Stripo. Его так не хватает у многих систем. Вот, например, у Mailchimp есть рекомендации как пользоваться mc:edit и это позволяет нам во время экспорта в Mailchimp вставлять в нужные места эти атрибуты и получить возможность редактировать текст в Mailchimp не в коде, а в интерфейсе.
Фидбек разработчика
Недавно нам написал разработчик одной европейской студии дизайна писем из Европы. Мы разговорились, созвонились, чтобы рассказать о планах и получить фидбек подробнее. Я спросил видел ли он редактор, а он сказал, что первое на что он посмотрел — это как можно менять HTML, и после этого уже с большой внимательностью продолжил знакомство, потому что удобнее он не пользовался. Приятно, чёрт побери. Хотя критику я тоже люблю. Так что не стесняйтесь.
1 комментариев