Блог Михаила Озорнина: заметки с тегом эл. почта

Шаблон верстки эл. письма

Михаил Озорнин — Fri, 17 Sep 2021 00:07:54 +0300

Выкладываю несколько шаблонов верстки эл. писем, которые помогут сверстать аккуратное, красивое, адаптивное эл. письмо без знаний html и css

Верстка эл. писем — сочетание тайных знаний вуду и умений из палеолита. Поддержка стандартов почтовыми клиентами ужасная, никаких современных конструкций нет, а те, что есть — работают через пень-колоду. Стили надо инлайнить, сверстать письма в адаптивные две колонки — проще убиться.

Чтобы хоть как-то скрыться от этого мрака, сделаны фреймворки для верстки именно писем. Они инкапсулируют в себе многие правила и умеют сделать из нормальной чистой верстки некрасивую, но такую, какую понимают почтовые сервисы и программ.

Слева — человеческая, справа что будет для почтовых программ:

Фреймворков по сути два:

Мне как-то надо было сверстать пару писем. Я глянул MJML и разобрался буквально за пару минут. MJML простой, понятный, мой шаблон доделывали люди, совсем не знакомые с HTML и справлялись. Foundation скорее всего тоже норм, но я не пробовал.

Выкладываю скопившиеся у меня шаблоны писем, вдруг кому пригодится:

https://github.com/mikeozornin/email-skeleton

Шаблон 1: простое аккуратное письмо

github.com/mikeozornin/email-skeleton/blob/master/src/1 simple.mjml

Превью на десктопе:

Превью на мобильном:

Шаблон 2: более сложная верстка

github.com/mikeozornin/email-skeleton/blob/master/src/2 release notes.mjml

Превью на десктопе:

Превью на мобильном:

Шаблон 2: более сложная верстка

github.com/mikeozornin/email-skeleton/blob/master/src/3 tasks.mjml
Это письмо сверстал один из наших техрайтеров, разобрался и сделал. С меня были лишь небольшие улучшения.

Превью на десктопе:

Превью на мобильном:

Как пользоваться

Ещё раз где скачать: https://github.com/mikeozornin/email-skeleton

Сначала отредактируйте шаблон письма, используя онлайн-редактор (mjml.io/try-it-live) или программу на десктопе (рекомендую этот способ). Если вам удобнее VS Code или Sublime Text, то есть плагины и для них.

Сконвертируйте в html с помощью инструментов MJML. Это можно сделать и на сайте, и в клиенте MJML. Если нужно встроиться в CI, то у MJML есть рантайм на ноде.

Готовый html разметьте своими данными и прикрутите к скрипту.

Поддержки шаблонов нет, но если совсем никак, пишите: mike.ozornin@gmail.com

Подпись в электронной почте

Михаил Озорнин — Wed, 21 Aug 2019 03:49:54 +0300

Каждый Дон Кихот воюет с ветряными мельницами, а каждый дизайнер воюет с неправильными подписями в письмах

О чем речь

Многие из вас видели что-то такое:

или такое:

иногда даже такое:

иногда встречается и такое:

Эти подписи на шкале хорошо-плохо где-то между «плохо» и «полная катастрофа». Мой пост о том, как делать правильно.

Почему это важно

Подпись — такая же неотъемлемая часть письма, как тема, письмо и вложения. Все вместе они влияют на восприятие письма, создают определенную тональность и что-то сообщают об адресанте. Неудачная подпись может испортить впечатление от очень внимательно написанного письма, поэтому на неё нужно обращать не меньшее внимание, чем на само письмо.

Хорошая и плохая подпись

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

Я бы ориентировался вот на такие моменты:

Подпись должна быть на языке ваших адресатов
Если пишете на английском — подпись на английском, пишете на русском — подпись на русском. Никаких Best regards и Senior Java Developer в русскоязычной переписке.
Сначала имя, потом фамилия
Писать наоборот, — сначала фамилию, а потом имя — очень формальный стиль. К нему хочется сразу дописать и отчество. Само имя пишите так, как вас следует называть. Внимательные люди будут называть именно так как написано: Света, Даниил, Ася, Маргарет, Митя, Наталия. (см. Не ошибаться в именах)
В подписи не должно быть очевидного
Не надо подписывать, что mike.ozornin@gmail.com — это эл. почта, знак @ однозначно говорит: «Это — адрес электронной почты». Да и вообще сам адрес эл. почты вообще не нужно писать, он же вот, перед глазами у адресата.
Если сайт расположен на том же домене, что и электронная почта, то его тоже можно не указывать. Ваши читатели не глупые и поймут, что у компании с почтой mozornin@ptsecurity.com сайт ptsecurity.com. В некоторых компаниях принято перечислять все сайты в подписи сотрудников, не надо так.
Если без сайта никак нельзя обойтись, тогда из ссылки нужно хотя бы убрать http:// и www.
Телефон — только личный
Если указываете телефон, то только мобильный или городской с добавочным, общий телефон компании лучше не указывать.
Факс тоже лучше не указывать.
Без «С уважением»
Ваши адресаты чувствуют, что вставка в подпись каждого письма «С уважением» не имеет ничего общего с уважением. Вместо этого штампа лучше проявить настоящее уважение и написать удобное для читателя письмо: сформулировать говорящую тему, написать короткое структурированное письмо, ввести в курс дела, приложить все ссылки и файлы, а также явно указать, что вы от человека хотите.
Указывать понятную должность
Очень часто в подпись вставляют должность адресанта, само по себе это не проблема. Однако иногда должность человека неговорящая: специалист, инженер, оператор. В этом случае лучше дополнить формальную должности реальной ролью: Старший специалист → Старший инженер поддержки, Менеджер продукта → Менеджер Яндекс-карт».
Не указывать и должность, и отдел
Нужно стараться не увеличивать подпись без необходимости и указывать что-то одно: или должность, или отдел. Часто можно совместить отдел и должность: вместо длинной комбинации «Отдел технологий разработки + инженер» написать «devops-инженер».
Не нужно писать всю оргструктуру
Если вам нужно указать отдел, то не нужно указывать всю организационную структуру до своего отдела включительно:
Группа разработки систем машинного обучения
Отдел перспективных технологий
Департамент исследований и разработки
Не нужно рекламы почтовых программ и устройств
Подпись — это часть вашего письма, не оставляйте в ней «Отправлено с моего айфона» или «Отправлено из AquaMail для Андроида
http://www.aqua-mail.com».
На самом деле продакт-менеджеры мобильных почтовых клиентов повышают свои метрики и зарабатывают свою премию за счет ваших писем и ваших читателей. Для читателей такая подпись выглядит то ли как хвастовство «Смотри, у меня новый айфон», то ли как неуважение «Мне лень потратить одну минуту на настройку подписи».

Никакого форматирования
Форматирование привлекает слишком много внимания к подписи и отвлекает от письма. Лучше не использоваться в подписи курсив, полужирное начертание, подчеркивание, выделение цветом, в том числе бледно-серым. Кажется, что бледно-серый приглушенный и его не будет видно, на самом же деле любое изменение цвета видно само по себе. См. иллюстрацию на полях.
Хуже всего выглядит яркий красный текст.
Никаких картинок или логотипов
Не нужно вставлять логотипы компании, продуктов, конференций и митапов, красивые кнопки подписки, логотипы социальных сетей. Как и форматирование картинки привлекают слишком много внимания к письму, а кроме этого могут ещё и сломаться, будет совсем некрасиво (см. Переверстка: письмо из Пикпоинта).
Подпись отделяется от письма двумя пустыми строками
Подпись достаточно отделить пустым место, без всяких линий и черточек. В технологических компаниях существуют люди, которые знают про RFC на эл. почту, где написано, что подпись отделяется двумя дефисами и пробелом. Я бы с ними не спорил.

Но вообще, даже в корпоративной подписи обычно достаточно имени с фамилией и изредка должности.

Примеры хорошей подписи

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

Для совсем небольшой команды:

Михаил Озорнин

Для большой компании с множеством проектов:

Михаил Озорнин
Дизайнер в проекте Apple Don’t Watch

Подпись для тех, кто часто пишет наружу:

Михаил Озорнин
Руководитель пресс-службы Apple Russia
моб: +7 999 999-99-99

Ссылки в тему

В вопросе подписей писем очень много мифов и плохих традиций. Я собрал ещё немного авторитетных мнений про подписи:

alpinabook.ru/catalog/marketing/469181	Новые правила деловой переписки
ksoftware.livejournal.com/318907.html	Коля Товеровский борется с подписью в Додо-пицце
bureau.ru/bb/soviet/20110330	Совет Ильи Бирмана про подписи
tema.livejournal.com/2684019.html	Культура электронного письма: 10 заповедей, есть немного про подписи.

В вашем письме сломается всё форматирование

Михаил Озорнин — Mon, 08 Apr 2019 01:24:32 +0300

TL;DR: Используйте в почте минимум форматирования, оно всё сломается

О чем речь

Речь идет про компании, в которых много переписки в почте. Некоторые люди привыкают к ворду и пишут такие же сложные по форматированию письма: вставляют в тело письма картинки, используют многоуровневые нумерованные списки и многоуровневое цитирование.

Особый шик — со словами «ответил по месту» навставлять в разные места исходного письма своих комментариев, раскрасив их каким-то цветом. Другой человек со словами «тоже ответил по месту» добавит к каждому покрашенному тексту свой, и расставит своих комментариев ещё где-то. На третьем человеке письмо превращается в новогоднюю елку.

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

— Бдыщь!

В этот момент всё форматирование теряется. Никто не понимает почему в соседних абзацах противоположные мысли (сломался «ответ по месту»). Никто не может найти пункт 7.2, — в письме нет ни одной цифры (пропал нумерованный список).

Почему так происходит

Все это происходит из-за разных почтовых программ. Даже если упростить всё до ситуации, что письма отправляются только внутри одной компании, у которой почтовый сервер Microsoft Exchange и на всех компьютерах с Microsoft Windows установлен Microsoft Outlook, то будет как-то так:

	Ожидания того, кто писал письмо	Реальность
Дизайнеры	Outlook для виндоуза	Mail.app, Spark, Airmail, Outlook для macOS, Postbox
Разработчики на линуксе	Outlook для виндоуза	Thunderbird, Evolution, KMail
Разработчики на виндоузе	Outlook для виндоуза	Outlook, Thunderbird
Люди с телефоном и планшетом	Outlook для виндоуза	Mail.app, Gmail, Outlook для айфона, Outlook для андроида, Nine, Inbox, Airmail, Spark, десять разных стандартных приложений андроида
Все подряд	Outlook для виндоуза	Веб-версия Outlook

Это я написал только почтовые программы, которыми сами хотя бы раз пользовался. Представьте, как на самом деле?

Ещё стоит учитывать, что Outlook для виндоуза, мака, браузера, андроида и айфона — это пять разных программ, которые показывают письма по-своему.

Что делать

Предполагайте, что в вашем письме сломается всё форматирование. Пишите письмо так, чтобы оно осталось понятным, даже когда от него остался только неформатированный текст.

Вот шпаргалка:

Хочу	Лучше
Вставить нумерованный список из 5 пунктов	Вставить цифры текстом, без списка
Вставить маркированный список из 5 пунктов	Вставить тире текстом, без списка
Вставить нумерованный список из 25 элементов на пяти уровнях, в одном из пунктов — таблица	Скорей всего вы пишете не письмо, а спецификацию. Ей не место в письме, — перенести документ в вики, гугл.докс или куда-то ещё.
Вставить 25 скриншотов с замечаниями	Выложить картинки куда-нибудь, а в письмо вставить ссылки
Вставить 25 скриншотов с замечаниями	Выложить картинки и комментарии в вики или гугл.докс
Выделить текст красным, синим, жирным или курсивом	Написать письмо так, чтобы от пропавшего выделения не изменился смысл письма
Ответить по месту на комментарии Васи	Ответить цитированием, а не цветным текстом
Ответить по месту на комментарии Васи	Перенести дискуссию из писем в более подходящее место
Ответить по месту на комментарии Васи, которые он написал в ответ на комментарии Алёны, которые Алёна написала к письму Вани	Созвониться и обсудить

Вот ещё Илью Бирмана почитайте: Вёрстка неформатированного текста

TL;DR

Форматирование обязательно у кого-то сломается
Чем меньше форматирования в письме, тем надежнее
Если письмо получается слишком сложным, а комментариев слишком много — перенесите его в вики, гугл.докс или трекер