timer ~ 5 мин читать
35865 просмотры
оценить
31 августа 2017

Редактирование HTML и CSS кода в визуальном блочном редакторе Stripo.Email

Stripo / Blog / Редактирование HTML и CSS кода в визуальном блочном редакторе Stripo.Email

Обычно выделяют 2 типа редакторов для создания емейл-шаблонов: редактор кода и блочный редактор. Это связано, на мой взгляд, с двумя причинами:

  • не любой код может быть адаптирован под внутреннюю верстку блочного редактора;
  • если дать волю пользователю делать больше дозволенного редактором, то он непременно все поломает, а виновата как всегда будет система и отгребать будет служба поддержки.

НО, эти причины все технического характера, а не пользовательского. При этом очень часто возникает желание немного изменить созданный код или вставить свой «сниппет».

Интересное наблюдение за верстальщиками писем в eSputnik: разработчики писем открывают инспектор кода, меняют его там и сразу же смотрят на результат, так как это очень удобно. Инспектор кода дает возможность писать безопасный HTML закрывая все незакрытые теги и т.п. Но главное — быстрый результат. Любое изменение в письме ведет к изменению в коде и наоборот. Еще один классный плюс использования инспектора кода — он сфокусирован только на выделенном элементе быстро находя тот фрагмент кода, который нужно.

Наряду с подсветкой синтаксиса именно эти 3 особенности и легли в основу нашего редактора:

  1. Редактировать только участок кода, над которым работаем;
  2. Быстро применять изменения в обоих направлениях;
  3. Обеспечить безопасность введенного кода закрывая теги.

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

Есть еще один принцип который стоит описать отдельно: мы решили отказаться от всплывающих окон. Это тема отдельного поста. В частности этот принцип позволяет легко менять html и следить за изменениями.

Немного о стилях

В письмах все еще нельзя в полном объеме использовать внешние стили перечисленные в head или body style. Рекомендуется некоторые стили вставлять в инлайн элементов. Но в момент редактирования хорошо бы пользоваться общими стилями и иметь возможность сказать что в футере письма, например, все ссылки должны быть неподчеркнутыми.

Кроме того, в теле письма CSS стили и код фрагмента находятся в разных частях.

Поэтому мы выделили стили в отдельный таб редактора (в принципе как и в инспекторе кода Chrome). Т.е. продвинутый пользователь может его дописывать и переопределять как хочет, добавлять media селекторы и собственные особенности. А в момент экспорта письма мы запускаем инлайнер, который вставляет CSS как положено. Обычный пользователь может менять все стили с помощью блока управления: оформлять и сохранять разные темы писем в рамках проекта. Про это тоже отдельный будет пост.

Cобственная разметка кода

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

В то же время есть такие блоки, как, например, меню, или контейнер, которые имеют специальные служебные стили и дают возможность понять, что это за блок. Во время редактирования мы следим, чтобы они не были нарушены. Но такая функциональность позволяет настраивать чужие шаблоны под особенности редактора Stripo. Например, пометить какой-то блок как контейнер и он обретет все необходимые свойства и туда можно будет уже добавлять другие блоки. Как настраивать шаблон я опишу в одном из отдельных постов. Также, я хотел бы сделать отдельный «визард» по адаптации произвольного HTML к редактору eSputnik. Но это не приоритет ближайшего месяца, поэтому про это пока не пишу.

В планах обязательно написать мануал по подготовке произвольного HTML по Stripo. Его так не хватает у многих систем. Вот, например, у Mailchimp есть рекомендации как пользоваться mc:edit и это позволяет нам во время экспорта в Mailchimp вставлять в нужные места эти атрибуты и получить возможность редактировать текст в Mailchimp не в коде, а в интерфейсе.

Фидбек разработчика

Недавно нам написал разработчик одной европейской студии дизайна писем из Европы. Мы разговорились, созвонились, чтобы рассказать о планах и получить фидбек подробнее. Я спросил видел ли он редактор, а он сказал, что первое на что он посмотрел — это как можно менять HTML, и после этого уже с большой внимательностью продолжил знакомство, потому что удобнее он не пользовался. Приятно, чёрт побери. Хотя критику я тоже люблю. Так что не стесняйтесь.

Вас также может заинтересовать

Предыдущие статьи Следующие статьи
banner9
06 июня · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
best-fonts-for-email-cover-image-stripo
24 мая · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Создавайте элегантные письма с помощью Stripo в кратчайшие сроки, используя наши готовые шаблоны Ознакомиться   Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов...

Дизайн Маркетинг
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

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

Дизайн Маркетинг Шаблоны
Будьте всегда в курсе последних новостей в области email-маркетинга!