Как создать письмо, если не умеешь?

Привет, меня зовут Наташа, я контент-менеджер ExpertSender, и я никогда сама не создавала письма для рассылки наших новостей. Мне всегда помогали несколько дизайнеров и пара верстальщиков: одни дизайнили классные письма, а другие всю эту красоту верстали.
Я же вставляла нужную информацию в HTML-код и радовалась, когда ничего не ломала. Когда ломала, в курином отчаянии бежала к верстальщикам с криками: «Что делать-то?!», но это уже другая история.

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

Что было в начале

Задача собрать письмо — 1 штуку.

Человек с весьма средними знаниями HTML — 1 штука.

Время — желательно быстрее, потому что письмо нужно отправить вчера.

Ход эксперимента

На первом шаге создания сообщения у меня был выбор, как я буду его создавать: в обычном редакторе (тот самый HTML) или в блочном.

В ExpertSender блочный редактор — интуитивно понятный и совсем не требует знаний HTML. Этот вариант мне подошёл.

Вот тут я нажала на кнопку «Блочный редактор».

В окне редактора первым делом я выбрала элемент «Блок по ширине», все остальные элементы я переносила в него.

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

Добавила элемент «Текст». В нём я предупредила, что письмо можно открыть в браузере, если вдруг настройки почтового клиента не разрешают отображение картинок.

Ссылку в текст можно вставить, если нажать вот на этот значок:

Протокол я выбрала «Другой», потому что вставила системную ссылку для открытия письма в браузере. Если бы это была ссылка, которая вела на сайт или лендинговую страницу, то протокол был бы «https».

После этого мне нужно было добавить логотип. Чтобы его добавить, я перетянула в рабочее поле элемент «Картинка».

А потом увеличила у логотипа отступ снизу, добавила элемент «Столбец» и перенесла в него элемент «Картинка». Две штуки. Вот так:

После этого вставила ссылки на курсы в обе картинки.

Когда пришло время для текстовой части, я перетянула в рабочую область элемент «Текст», увеличила интервал между ним и блоком с картинками выше, выбрала нужный шрифт и его размер, а ещё указала нужный отступ между строками.

После этого я решила вставить кнопку, по которой можно перейти на сайт Digital University и прочитать о курсах подробнее.

А потом добавила ссылку и изменила цвет, текст и шрифт кнопки.

После кнопки я приступила к оформлению подвала сообщения. Чтобы расположить логотип Digital University и контакты рядом, я использовала элемент «Столбец». По умолчанию столбцов два, их мне достаточно. Но если вам захочется больше, то ничто не сможет вам помешать.

В один из столбцов я добавила картинку и текст под ней.

В другой только текст.

Цвет текста вы можете менять на тот, который вам нравится. Для этого нужно выделить его, нажать на кнопку «Цвет текста» и выбрать понравившийся из предложенных.

Если нужного не оказалось, нажмите на «Ещё цвета» и в поле ввода укажите его номер. 

Дальше я выбрала элемент «Столбец» и перенесла в один «Текст», а в другой — элементы «Картинка» и «Текст». Они мне были нужны, чтобы добавить курсы «Цифровой маркетинг» и «CRM-маркетинг» и ссылку на Facebook.

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

Какие результаты

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

Я потратила 45 минут. В эти 45 минут входило время на скрины и «налью чашку кофе и вернусь». Над письмом, в котором больше информации, наверняка придётся посидеть подольше.


Собирать письмо в блочном редакторе — вариант менее ресурсозатратный, чем постановка задач дизйнерам и верстальщикам. И тем более он удобен и незаменим, если верстальщиков, которые могли бы помочь, вообще нет.

Согласен

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