Верстка письма: Как сверстать письмо: инструкция для чайников

Содержание

Как сверстать письмо: инструкция для чайников

Советы

С чего начать вёрстку письма и как сформулировать ТЗ

Вёрстка по хардкору

Для новичков HTML-вёрстка писем — хардкор. Письмо может отлично выглядеть в браузере, но некрасиво разъехаться в мобильном приложении Gmail или старенькой версии Outlook. Разбираемся, как этого избежать.

Эта статья для вас, если вы уже что-то слышали про теги и CSS, но сами не сверстали ни одного HTML-шаблона. Если вы хотите заказать вёрстку письма у профи, статья поможет составить грамотное ТЗ.

Начнем с ошибок в вёрстке писем.

Почему «едет» вёрстка

Одного верстальщика попросили сделать письма для email-рассылки. Дизайн готов, текст написан, осталось перенести это в HTML-код. Верстальщик проверяет первое письмо в браузере:

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

В Gmail сломался футер:

Mail.ru неверно отображает хедер:

Outlook 2013 поиздевался над кнопкой:

Проблемы с отображением писем происходят из-за обилия программ и интернет-сервисов для чтения почты. Одно и то же письмо можно открыть через:

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

Даже если вы досконально знаете HTML и CSS, над письмом надо будет потрудиться. В вёрстке email-рассылок есть нюансы.

Новые статьи у вас на почте

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

Введите email*

Email

оставляя свой email, я принимаю Политику конфиденциальности

Основные правила вёрстки рассылок

Правило №1. Используем таблицы

Для верстальщиков в вебе таблицы — это пережитки 90-х годов. Но в email-рассылках только этот способ подходит для нормального отображения письма. Сообщения могут открывать в почтовых клиентах и браузерах, которые не поддерживают новые версии HTML и CSS. Табличная вёрстка — залог того, что письмо не «разъедется» и нормально отобразится на всех платформах.

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

Правило №2. Применяем универсальные HTML-теги и атрибуты

Не все привычные элементы HTML-кода подойдут для верстки рассылок. Например, все почтовые клиенты не воспринимают тег <button>. Mail.ru и Outlook не воспринимают только <header> и <footer>.

Универсальные HTML-теги и атрибуты поддерживаются всеми почтовыми клиентами и браузерами. Используйте их, чтобы письмо везде отображалось одинаково. Полный список и описание тегов можно посмотреть в этой статье.

Отправляйте красивые письма в UniSender

Не переживайте о верстке — используйте 100+ готовых шаблонов или создайте свой макет в адаптивном блочном редакторе

Попробовать

Правило №3. Встроенные стили CSS

CSS — это язык, с помощью которого описывают внешний вид HTML-документа. HTML отвечает за структуру письма, а CSS — за форматирование: шрифт, цвет, поля, строки, фоновые изображения.

Есть 3 способа добавить CSS:

Способ 1. Написать тег внутри <head> или <body>:

Способ 2. Создать отдельный файл со стилями CSS и дать ссылку на него в HTML-документе тегом <link>:

Способ 3. Описать CSS как атрибут в элементах HTML (inline-CSS):

Верстальщики email-рассылок используют последний вариант. Писать такой код неудобно, но только он корректно отображается всеми почтовыми клиентами и браузерами. Чтобы упростить вёрстку, можно прогнать HTML-файл со стилями внутри <head> или <body> через программу-инлайнер. Она встраивает CSS-стили в HTML-файл — трансформирует CSS в виде атрибута после каждого тега:

Правило №4. Делаем фиксированную ширину письма

Чтобы пользователи мобильных устройств не жаловались на горизонтальную полосу прокрутки, задайте фиксированную ширину. Она не должна превышать 600px:

Обязательные атрибуты HTML

Для некоторых тегов нужно прописывать конкретные атрибуты. В противном случае почтовый клиент подставит их по умолчанию и письмо отобразится неверно. Такими тегами являются, например, <table> для таблиц или <img> для изображений.

Разберёмся, какие атрибуты для них прописывать.

Для таблиц

Атрибуты HTML:

  • border=«0» — толщина рамки у таблицы;
  • cellpadding=«0» — расстояние от рамки до содержимого таблицы;
  • cellspacing=«0» —  отступ между ячейками.

Стили CSS:

  • «margin: 0;» — отступ от края таблицы до других элементов письма;
  • «padding: 0;»— внутренний отступ до содержимого таблицы.

Пример:

Для строчных элементов

Стили CSS:

  • «color: #800080;» — цвет текста;
  • «font: 13px Georgia, serif;» — параметры текста: размер и семейство шрифтов;
  • «line-height: 25px;» — межстрочный интервал;
  • «-webkit-text-size-adjust: none;» — не позволяет мобильным устройствам менять размер текста.

Для ссылок задаем атрибут «target=»_blank»», чтобы они открывались в отдельном окне.

Пример:

Для изображений

Атрибуты HTML:

  • src=«#» — адрес изображения;
  • alt=«» — описание: поле обязательное, но его можно оставить пустым;
  • border=«0» — толщина рамки;
  • width=«75» — ширина изображения;
  • height=«50» — высота изображения.

Стили CSS:

  • «display: block;» — делает элемент блочным: если не задать это свойство, большинство почтовиков добавит к картинке отступы.

Пример:

Безопасные шрифты

Почтовые клиенты отображают ограниченный набор шрифтов (мы уже писали о том, какие шрифты использовать в рассылке). Чтобы ваш текст везде отобразился одинаково, используйте безопасные значения свойства font-family. Оно отвечает за шрифты.

Цвет и фон

Цвета в письмах задают в виде шестнадцатеричных чисел формата HEX (например, #333333). Сокращения в виде #333 обрабатывают не все почтовые клиенты, поэтому их в верстке рассылок не используют. Цвета формата RGB тоже работать не будут.

При верстке HTML-писем фон задают через атрибуты background=»» и bgcolor=»» для тега <table>. Если задать их для других тегов, то Gmail, открытый в Safari, проигнорирует их.

Не все почтовые клиенты обработают фон, который прописан через стили CSS. Поэтому свойство background и его производные (background-image, background-visibility, background-size) лучше не применять.

Адаптивная вёрстка

Тут всё непросто. Как говорит наш верстальщик Денис Щукин, «Если для новичка HTML — это дремучий лес, то адаптивная вёрстка — джунгли». Перечислим только основные подходы, чтобы вы были в курсе.

Гибридная вёрстка. Для мобильных устройств используют гибридную верстку. Если в письме 2-3 колонки, то при уменьшении размера экрана они перестроятся в одну. Весь контент письма оборачивают в тег <center>, а по горизонтали располагают теги <span> с фиксированной шириной:

Медиа-запросы. Чтобы пользователю было комфортно читать письмо с любого устройства, используйте медиа-запросы. В HTML-верстке медиа-запросы — это команды, которые подстраивают макет письма под разрешение экрана.

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

Mobile First. Один из способов адаптивной верстки — Mobile First. В этом случае сначала создают письмо для мобильных гаджетов, а потом — для компьютеров.

Как тестировать

Посмотреть, как выглядят ваше письмо в разных почтовых клиентах, можно в сервисах litmus.com и emailonacid.com. Они тестируют письма:

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

Один минус — Mail.ru и Яндекс.Почта на этих сайтах нет. Поэтому самый верный способ протестировать макет письма — сделать рассылку на свои почтовые ящики. Именно этот прием используют опытные верстальщики.

Усредненную версию письма также можно посмотреть в UniSender. От конечной версии она будет отличаться некритично.

У меня всё.

Другие материалы по теме

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

Статьи почтой

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

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

рекомендации и требования для верстальщика — Дизайн на vc.

ru

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

27 355
просмотров

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

Проблемы, с которыми может столкнуться верстальщик

  • Письма плохо отображаются в разных почтовиках.

  • Письма неадаптивны и плохо отображаются на мобильных устройствах.

  • С письмом трудно взаимодействовать и неудобно читать.

  • Письмо не увлекает, не вовлекает.

  • Некоторые блоки письма не отобразились, часть письма исчезла.

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

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

  • Не получается сверстать то, что задумали.

  • Непонятно, как сделать интерактив в письме.

  • Письмо разваливается на десктопных почтовиках вроде Outlook.

  • Письма попадают в спам (такое может быть из-за вёрстки и ссылок).

  • Письма долго грузятся.

Структура и код

Чтобы ваши письма корректно отображались в большинстве почтовиков, устройств, а сервисы рассылок не сломали их — следуйте советам по HTML и CSS кода.

Обратите внимание на DOCTYPE. Для писем самым безопасным доктайпом является:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.0 Transitional//EN»>

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

Избегайте сокращений CSS.

● Вместо сокращённого правила для стиля — несколько CSS-стилей. Например, вместо

padding: 5px 5px 5px 5px

лучше написать:

padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px

● Не задавайте цвет, используя краткие формулировки вроде RED или #FFF. Всегда используйте полное шестнадцатеричное представление, например, #bb0000.

● Не используйте сокращённые варианты записи шрифта, характерные для CSS (то есть «font: 12px arial;»). Семейство шрифта, размер, цвет и высота строки должны задаваться по отдельности.

Старайтесь избегать объединения ячеек (colspan, rowspan). Лучше использовать вложенные таблицы. И не забывайте указывать параметры align и valign у ячеек.

Значение атрибутов CELLPADDING и CELLSPACING следует установить как «0». Не используйте никаких значений атрибута BORDER у table (кроме «0»), так как не все почтовые клиенты корректно интерпретируют другие значения.

Не задавайте line-height в em или процентах. Используйте только пиксели, тогда во всех почтовиках и устройствах письма будут выглядеть так, как вы задумали.

Оформление текста производите сразу двумя тегами — FONT и SPAN. Для родительской ячейки указать LINE-HEIGHT (это принципиально для Outlook 2013 и большинства веб-интерфейсов). Стоит отметить, что Outlook игнорирует параметр LINE-HEIGHT, указанный у ячейки, поэтому следует указать его также и у SPAN.

Используйте тег <BR> для вставки разрывов между блоками текста вручную. Однако будьте предельно осторожны, некоторые почтовые клиенты (например, Outlook 2007 и клиент iPhone) отображают размер межстрочных промежутков и шрифтов крупнее, чем принято, — и могут перенести текст на новую строку раньше запланированного вами разрыва.

Будьте внимательны при использовании CSS3. Здесь нет чётких правил. Какие-то стили поддерживаются полностью, какие-то частично. Всё зависит от того, какими почтовиками и устройствами пользуются ваши подписчики. Если используете CSS3 в вёрстке писем — тщательно тестируйте. Поддержка тех или иных стилей почтовиками и устройствами постоянно меняется, ориентируйтесь на инструкции в интернете.

Используйте текст предварительного заголовка. Почти все веб-интерфейсы выводят рядом с темой письма прехедер. Примерная структура:

<div>текст прехедера</div>

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

Полезный и информативный прехедер

Используйте кодировку UTF-8:

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

Проконтролируйте заголовки и структуру. Хорошо, если верстальщик тоже будет проверять:

  • Значения служебных заголовков письма (Date, Message-ID, List-Unsubscribe, Auto-Submitted и тому подобное).

  • Структуру письма (Content-Type, Content-Disposition, вложенность Multipart-частей письма, кодировки текста, строковые параметры).

  • Значение целевых и отображаемых заголовков (From, To, Reply-to, Subject).

  • Отображение письма в списке писем и при чтении в различных интерфейсах.

  • Микроформаты (например, что событие календаря распознаётся как событие календаря или авиабилет как авиабилет).

Вёрстка должна корректно отображаться без картинок. И главное, понятно. Вся важная текстовая информация должна быть в тексте. Поэтому прописывайте alt у изображений, оборачивая их в ссылку. Тогда при отключенных картинках письмо не потеряет сути.

Многие почтовики при получении первого письма от вас могут не показывать картинки, предлагая их включить подписчику. А в папке «Спам» картинки отключены по умолчанию. Ваша рассылка может туда упасть, а 40% подписчиков ежедневно проверяют папку «Спам».

Рассылка «Уютерры» с отключенными картинками

Применяйте свойства background и bgcolor только для тега table. Указанное у body фоновое изображение отобразится и в Outlook, но есть большая вероятность попасть в спам. BACKGROUND-COLOR для DIV работает не везде. И не все почтовые клиенты поддерживают свойство background (особенно в Outlook 2007–2013).

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

Электронную почту и телефон оборачивайте в ссылку. Иначе за вас это сделает почтовик, наложив свои стили, — а это может сломать номер телефона.

Не используйте JavaScript, Flash, <iframe>, SVG.

Не забывайте про «пуленепробиваемые фоны» c VML-изображениями, если это необходимо. Особенно если хотите поддерживать Outlook, The bat в полной мере.

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

Вёрстка должна корректно отображаться в разных почтовиках («Яндекс», Gmail, Mail.ru, Yahoo и так далее), а также в их приложениях на мобильных, даже если их открыть в браузерной версии почтового сервиса. Рекомендуем применять резиновую вёрстку вместе с адаптивной (медиазапросы для поддерживающих устройств и приложений, а также «падающие» блоки с минимальной длиной). Изучите хаки для разных почтовых приложений и ОС и библию адаптивных писем. Например, чтобы решить проблему с автомасштабированием писем в iOS 10 и iOS, добавьте тег:

<meta name=»x-apple-disable-message-reformatting»>

CSS-хак

-webkit-text-size-adjust:none; -ms-text-size-adjust: none;

не даёт устройствам на iOS изменять контент письма для удобства чтения. Изучите условные комментарии, это избавит от проблем с IE и Outlook. О том, как удобнее тестировать письма на разных почтовиках и устройствах, напишу ниже.

Если вы минимизируете код письма, следите, чтобы было не более 1000 символов в строку. Иначе могут быть проблемы отображения.

Контент

При вёрстке писем безопаснее использовать стандартные шрифты. Например, Arial, Verdana, Tahoma, Times New Roman поддерживают все почтовики на любых устройствах.

Таблица стилей

Замените спецсимволы на соответствующие HTML-сущности или картинки. Спецсимволами могут быть параграфы, сердечки, элементы псевдографики. Эмодзи в теле письма тоже лучше заменить на картинку. Поверьте, даже условный mailchimp может создать проблему на пустом месте. Перестрахуйтесь.

Ставьте ссылки в изображениях. В письмах подписчики чаще всего кликают по изображениям.

Для поддержки Retina-дисплеев используйте изображения размера в два раза больше. Например, для чёткого изображения 150×50 возьмите с оригинальным размером 300×100 и атрибутами укажите желаемый размер:

<img alt=»Картинка» src=»icon.png» border=»0″>

Конечно, вес письма и картинок вырастет. Поэтому старайтесь такое проделывать лишь для малоцветных изображений — логотипов и иконок. И обязательно оптимизируйте размер получившихся изображений, уменьшая их в сервисах, таких как TinyPNG, JPEGmini, Compressor.io и других.

Любые ссылки должны содержать протокол и имя хоста (https://site.ru/path).

Не используйте относительные ссылки (/path) и ссылки без протокола (//site.ru/path), так как в них протоколом по умолчанию может быть file://.

Любые служебные и неASCII-символы в ссылках должны быть закодированы (в частности, кириллица) с помощью percent encoding.

Например, ссылка https://строй-россия.рф/литература/ должна выглядеть так:

https://xn—-ptbbtciddgad9n.xn—p1ai/%D0%BB%D0%B8%D1%82%D0%B5%D1%80%D0%B0%D1%82%D1%83%D1%80%D0%B0/

Размечайте тегом <а> ссылку, вставленную как текст, иначе пользователь не сможет по ней перейти. Некоторые почтовики размечают такие ссылки самостоятельно, но это нестандартное поведение. Адрес href внутри A должен совпадать с текстом ссылки, иначе контент-фильтр может среагировать на такую ссылку как на попытку обмануть пользователя. А это путь в спам.

Откажитесь от http://. При высоких требованиях к безопасности полностью откажитесь от использования http:// в пользу httрs://. Не используйте нестандартные порты (например, example.com:8080/path), так как они могут быть недоступны пользователю.

Не используйте внешние сокращатели ссылок: vk.cc, bit.ly и так далее — это плохо влияет на доставляемость писем. Лучше, если все ссылки будут указывать на ваш домен, что сократит потенциальное негативное влияние чужой репутации на доставляемость писем. Сокращатели также приводят к спаму.

Сжимайте изображения. Формат png-8 больше подходит для простой графики — графическое изображение лучше сжимается, чем GIF. GIF стоит использовать, если требуется анимация. Формат JPEG идеален для сложных и фотографических элементов. Изображения, сохраняемые в этом формате, обычно оптимизируют до 60% качества.

Хотя в редких случаях имеет смысл повысить качество до 75%, чтобы уменьшить ступенчатое искажение изображений. Формат PNG-24 оптимален для изображений с прозрачностью, имеющих высокое качество или размещающихся не на белом фоне. Однако не забывайте о том, что PNG — самый «тяжёлый» из всех форматов.

Не располагайте внешние картинки на публичных сервисах или бесплатных хостингах. Чаще всего ими пользуются спамеры — и ваша рассылка рискует попасть в спам. Храните на своём хостинге или в CDN, а лучше загружайте их в галерею вашего сервиса рассылок.

Указывайте у ссылок атрибут target=»_blank», чтобы ссылка всегда открывалась в новом окне или вкладке. Так как письмо может быть открыто где угодно.

Пропишите атрибут title у всех ссылок — это один из факторов непопадания в спам. К тому же title помогает людям с ограниченными возможностями и тем, кто использует голосовое управление. А если навести на ссылку текст из title, то так отобразится в хинте:

Рассылка телеканала «Дождь»

Проверяйте предлоги — они не должны быть оторваны от слова. Для этого используйте символ неразрывного пробела или тег <nobr>, или стиль white-space:nowrap. А если необходимо перенести слово, воспользуйтесь символом. Это полезно, например, для длинных ссылок, которые могут разрывать шаблон. Или оттипографируйте текст типографом Артемия Лебедева, он сделает большую часть работы за вас.

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

Сокращайте длину кода. Веб-интерфейсы Gmail и Yahoo обрезают письмо, размер которого превышает 102 КБ и 100 КБ, поэтому старайтесь максимально сократить длину кода. В противном случае вы получите вот такую картину:

Так обрезает Gmail

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

Будьте аккуратны с формами внутри писем. Мы не рекомендуем их использовать, так как не у всех они будут отображаться. Можно добавить ссылку, если очень хочется — какой-то фидбек вы точно соберёте.

Если форма не отображается, перейдите для опроса на сайт. Можете сегментировать рассылку чисто на тех, кто открывает письма в почтовиках, поддерживающих формы (Gmail, «Яндекс»), чтобы, например, сделать опрос подписчиков в самом письме.

Опрос в письме «Тинькофф банка»

Внедряйте интерактивные элементы. В 2019 году большинство поддерживаются почтовыми сервисами — больше 50% увидят интерактив, остальные увидят статику (от вас зависит, будет ли это красивая статика).

Топ самых используемых и популярных интерактивных компонентов:

  • Карусель, галерея картинок — 67,2%.
  • Гамбургер-меню — 52,6%.
  • Хот-спот (картинка, меняющаяся при наведении) — 40%.
  • Опросы и голосования — 35,6%.
  • Якорные ссылки для навигации по письму — 32,1%.
  • Формы и радиокнопки — 25,1%.

Затем идут:

  • Аккордеон.
  • Оставить отзыв и рейтинг.

Многие сервисы и инструменты позволят делать интерактивные элементы с минимумом заморочек (например, stripo, так как содержат готовые блоки для интерактивов), а также необычные и ультрафункциональные вещи (например, AMP, о нём подробнее ниже). И следите за трендами интерактивных писем.

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

  • JSON-LD.

  • Microdata.

One-Click Action в Gmail

AMP-рассылки. Google давно занимается развитием технологии AMP, и пару месяцев назад зарелизила AMP-рассылки. Такие письма будут выглядеть как автономные веб-страницы. Не открывая отдельную вкладку или окно, прямо в письме пользователь сможет: купить товар в онлайн-магазине, просматривать каталоги, оставить отзыв о товаре, забронировать отель, пройти опрос.

Пример работы технологии AMP в Gmail

Помните, что AMP-письма надо настраивать и в почтовиках, и в сервисе рассылок. К тому же они обещают поддерживать и другие крупные почтовые провайдеры, кроме Gmail: Yahoo Mail, Outlook и Mail.ru. Технологией уже пользуются Booking.com, Pinterest и сама Google, отправляя своим пользователям динамические письма.

Протестировать AMP-письма сегодня уже можно в Gmail и Mail.ru. Полезные ссылки:

  • Требования и форма заявки Google, требования и документация Mail.ru.

  • Документация, компоненты, песочница Google, песочница Mail. ru.

  • Sendsay одна из первых внедрила поддержку AMP-рассылок, затем многие другие сервисы, такие как Sendpulse и Stripo.

  • Конструктор превью для Gmail в промоакциях.

  • Шаблоны AMP-писем.

  • Презентация Mail.ru и видео с AMP CONF 2019.

Инструменты и сервисы

Чтобы упростить вёрстку письма, облегчить тестирование и написание кода, воспользуйтесь следующими инструментами и сервисами:

1. Пишите стили в блоке Style во время вёрстки для удобства. А перед использованием вёрстки в рассылках используйте css-inliner tool, например сервис от Mailchimp или CSS inliner, чтобы ускорить процесс вёрстки и тестирования. Некоторые сервисы рассылки, например Mandrill, предпочитают инлайн-стили. Есть сервисы, которые вообще удаляют блок <style></style>.

2. CSS:

  • Совместимость с устройствами и почтовиками.
  • Can I Use in HTML Emails.
  • Email Client CSS Support.
  • The Ultimate Guide to CSS.
  • Ряд обязательных костылей для любого письма — Client-specific CSS Styles.

3. Онлайн-редакторы — позволяют создавать письма с минимумом знаний вёрстки:

  • Mosaico.
  • Stripo.
  • Tilda — встроенные редакторы вашего почтового сервиса, позволяющие работать с адаптивными блоками: Mailchimp, Unisender, Sendpulse и другие.

Так выглядит Stripo

4. VML-изображения для Email.

5. Email-фреймворки позволяют быстро разрабатывать адаптивные кроссплатформенные письма:

  • MJML.
  • Foundation for Emails.
  • Kilogram (текущая версия брошена, Артур Кохо обещает, что скоро будет новый релиз с документацией).

6. Для тестирования заведите ящики во всех перечисленных почтовиках: Mail, «Яндекс», Gmail и других. Хорошо бы иметь в своём распоряжении пару смартфонов с iOS и Android, а также привлечь к тесту коллег и друзей.

7. Сервисы для проверки писем на спам перед отправкой:

  • https://www.mail-tester.com;
  • https://litmus.com;
  • https://www.emailonacid.com;
  • https://emailpreviewservices.com.

8. Проверяйте валидность кода — Markup Validation Service.

9. Тестируйте вёрстку:

  • http://previewmyemail.com;
  • https://litmus.com;
  • https://www.mail-tester.com;
  • https://www.emailonacid.com;
  • https://emailpreviewservices.com;
  • http://www.inboxinspector.com;
  • https://testi. at;
  • https://www.htmlemailcheck.com.

10. Для ручного тестирования вёрстки:

  • Mailchimp Tester.
  • Putsmail + PilotMailer.

11. Библия адаптивных писем.

12. Коллекция рассылок Email-Competitors — коллекция более чем 1,5 млн писем от 8000 российских и мировых брендов по 28 отраслям.

13. Бесплатные шаблоны писем для вдохновения:

  • Stripo.
  • Beefree.
  • Templatemonster.
  • Envato.
  • Chamaileon.

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

Реализуя email-маркетинговую стратегию, мы в агентстве стараемся максимально учитывать все нюансы при создании рассылок. Проводим аудиты рассылок по всем ключевым параметрам, включая вёрстку, а также сервиса рассылок, базы подписчиков, дизайна и контента, писем сайта и CRM.

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

Базовое деловое письмо — Purdue OWL®

Медиа-файл: Написание основного делового письма

Этот ресурс дополнен файлом Acrobat PDF. Загрузите бесплатную программу Acrobat Reader

.

Части делового письма

Этот ресурс организован в порядке написания делового письма, начиная с адреса отправителя, если письмо написано не на фирменном бланке.

Адрес отправителя

Адрес отправителя обычно указывается на бланке. Если вы не используете фирменный бланк, укажите адрес отправителя в верхней части письма на одну строку выше даты. Не пишите имя или должность отправителя, так как они указаны в конце письма. Укажите только адрес, город и почтовый индекс.

Дата

Строка даты используется для указания даты написания письма. Однако, если ваше письмо было завершено в течение нескольких дней, используйте дату его завершения в строке даты. При написании писем компаниям в США используйте американский формат даты. (Соглашение о форматировании даты, принятое в США, ставит месяц перед днем. Например: 11 июня 2001 г.) Напишите месяц, день и год в двух дюймах от верхней части страницы. В зависимости от того, какой формат вы используете для своего письма, либо выровняйте дату по левому краю, либо вставьте табуляцию в центральную точку и введите дату. В последнем случае укажите адрес отправителя на фирменном бланке, а не по левому краю.

Внутренний адрес

Внутренний адрес — это адрес получателя. Всегда лучше писать конкретному человеку в фирме, которой вы пишете. Если у вас нет имени человека, проведите исследование, позвонив в компанию или поговорив с ее сотрудниками. Включите личный титул, такой как «мисс», «миссис», «мистер» или «доктор». Следуйте предпочтениям женщины в обращении как «мисс», «миссис» или «мисс». Если вы не уверены в предпочтениях женщины при обращении, используйте «мисс». Если есть вероятность, что человек, которому вы пишете, является доктором или имеет какой-либо другой титул, используйте этот титул. Обычно люди не возражают против того, чтобы к ним обращались с более высоким титулом, чем они есть на самом деле. Чтобы написать адрес, используйте формат почтового отделения США. Для международных адресов введите название страны заглавными буквами в последней строке. Внутренний адрес начинается на одну строку ниже даты. Его следует оставить по ширине, независимо от того, какой формат вы используете.

Приветствие

Используйте то же имя, что и внутренний адрес, включая личное звание. Если вы знаете человека и обычно обращаетесь к нему по имени, допустимо использовать только имя в приветствии (например: Дорогая Люси:). Однако во всех других случаях используйте личное звание и фамилию/фамилию, после которых следует двоеточие. Оставьте одну строку пустой после приветствия.

Если вы не знаете пол читателя, используйте приветствие, не связанное с сексом, например, название его должности, за которым следует имя получателя. Также допустимо использовать полное имя в приветствии, если вы не можете определить пол. Например, вы можете написать Дорогой Крис Хармон: если вы не уверены в поле Криса.

Кузов

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

Закрытие

Закрытие начинается с той же точки по вертикали, что и ваша дата, и через одну строку после последнего абзаца основного текста. Используйте только первое слово с заглавной буквы (например: Спасибо) и оставьте четыре строки между закрытием и именем отправителя для подписи. Если двоеточие следует за приветствием, запятая должна следовать за закрытием; в противном случае после закрытия знаки препинания не ставятся.

Корпуса

Если вы приложили к письму какие-либо документы, например, резюме, вы указываете это, просто набрав Корпуса ниже закрытия. Как вариант, вы можете указать название каждого документа, который вы включаете в конверт. Например, если вы включили много документов и должны убедиться, что получатель знает о каждом документе, может быть хорошей идеей перечислить имена.

Инициалы машинистки

Инициалы машинистки используются для обозначения лица, напечатавшего письмо. Если вы печатали письмо самостоятельно, не вводите инициалы машинистки.

Примечание о формате и шрифте

Формат блока

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

Модифицированный блок

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

Полублок

Последний и наименее используемый стиль — полублок. Он очень похож на модифицированный блочный стиль, за исключением того, что каждый абзац имеет отступ, а не выравнивание по левому краю.

Имейте в виду, что разные организации предъявляют разные требования к формату своего профессионального общения. Хотя примеры, предоставленные OWL, содержат общие элементы для основного делового письма (жанровые ожидания), формат вашего делового письма, возможно, должен быть гибким, чтобы отражать такие переменные, как фирменные бланки и шаблоны. Наши примеры являются лишь ориентирами.

Если на вашем компьютере установлен пакет Microsoft Office 2000, можно использовать мастер писем, чтобы упростить форматирование деловых писем. Чтобы получить доступ к мастеру писем, щелкните меню «Инструменты» и выберите «Мастер писем». Мастер представит три упомянутых здесь стиля и введет дату, адрес отправителя и адрес получателя в выбранном формате. Мастер письма следует использовать только в том случае, если у вас есть базовые знания о том, как написать деловое письмо. Его шаблоны применимы не во всех условиях. Поэтому вам следует обратиться к справочнику по деловому письму, если у вас есть какие-либо вопросы или вы сомневаетесь в точности Мастера писем.

Шрифт

Еще одним важным фактором читабельности письма является шрифт. Общепринятым шрифтом является Times New Roman, размер 12, хотя могут использоваться и другие шрифты, такие как Arial. При выборе шрифта всегда учитывайте свою аудиторию. Если вы пишете в консервативную компанию, вы можете использовать Times New Roman. Однако, если вы пишете в более либеральную компанию, у вас немного больше свободы при выборе шрифтов.

Пунктуация

Знаки препинания после приветствия и закрытия — используйте двоеточие (:) после приветствия (никогда не ставьте запятую) и запятую (,) после закрытия. В некоторых случаях вы также можете использовать менее распространенный формат, известный как открытая пунктуация. Для этого стиля исключаются знаки препинания после приветствия и закрытия.

Как написать официальное письмо: формат и шаблон

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

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

Нажмите здесь, чтобы загрузить наш бесплатный шаблон официального письма.

Как оформить верхнюю часть официального письма:

Вверху справа: ваши данные в этом заказе

  • Полное имя и должность
  • Должность
  • Полный адрес
  • Сегодняшняя дата

    • 9 00208

    08 Используйте полную дату без сокращений, например, 3 октября 2018 г.

    • Адрес электронной почты

          a. Избегайте использования непрофессиональных адресов электронной почты, например [email protected] 9.0005

    • Номер телефона

    Левая сторона: Подробная информация получателей в этом заказе

    • Полное название и заголовок
    • Компания или организация
    • Полный адрес

    . )

  • Полное имя получателя

Совет: Если вы не знаете имя получателя, напишите «Уважаемый господин или госпожа».

Знаете ли вы, что вы можете отправлять письма онлайн?

Отправка писем онлайн

Форматирование тела письма:

‍

Начальный абзац

Используйте начальный абзац, чтобы представить себя и причину написания письма. Крайне важно, чтобы ваше сообщение было прямым и подчеркивало почему вы связываетесь с получателем. Рассматривайте этот абзац как прямой способ привлечь их внимание.

Основная часть

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

Заключительное заявление

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

Подписание

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

Очень формальный

Эти варианты допустимы, когда вы связываетесь с кем-то в первый раз или обсуждаете серьезный вопрос.

  1. С уважением
  2. С уважением
  3. С уважением
  4. С уважением — подходит, если вы не знаете имени получателя
Официально

более дружелюбный тон.

  1. С наилучшими пожеланиями
  2. С наилучшими пожеланиями
  3. С уважением
Спокойный официальный

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

  1. С уважением
  2. С наилучшими пожеланиями
  3. С уважением
  4. Спасибо
  5. С наилучшими пожеланиями

Подпись

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

Чего следует избегать при написании официального письма

  1. Орфографические и грамматические ошибки.