Основы профессиональной верстки электронных писем

Содержание

Что нужно знать в конце?

  • Соотношение изображений и текста в письмах должно быть 30/70 %
  • Не выделяйте текст в слишком яркие цвета (#ff0000, #4CFF00 и т.п.). О том, что задавать цвет шрифта, близкий к фону не стоит и упоминать – это избитый и давно не работающий трюк.
  • Слишком большое количество текста, написанного в верхнем регистре (с учетом text-transform: uppercase;) или повторение нескольких восклицательных знаков подряд, так же увеличивают вероятность попадания в спам.
  • Не пишите много текста большим шрифтом. Рекомендуемый размер font-size не более 12pt=16px и не менее 7pt=11px
  • Ну и конечно валидный HTML/CSS ещё никто не отменял.

Изображения в дизайне письма рассылки

Как не надо

1. Нельзя делать рассылку, состоящую только из одних картинок или сплошной картинкой. По результатам исследования, 43% пользователей Gmail читают почту с отключенными изображениями. Содержание письма должно оставаться понятным, если в нем будет только текст.


2. Светлый и неконтрастный шрифт читается плохо. Такой текст при наложении на пеструю фотографию будет сливаться с фоном:

Белый текст на светлой фотографии читается плохо

3. Не используйте изображения больше необходимых размеров. Например, если ширина блока 300 px, то не нужно брать для него картинку шириной 1200 px.

Как надо

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

Чтобы оптимизировать изображения для писем можете воспользоваться этими сервисами: Squoosh, TinyPNG.

2. Прописывайте Alt-текст для картинок и фотографий. Так пользователи смогут понять смысл письма, даже если картинки не загружаются автоматически. Текст должен соответствовать смыслу картинки.

3. Увеличивайте размер иконок в два раза, чтобы у пользователей iPhone и Macbook с Retina экраном они отображались в хорошем качестве. Например, если в рассылку нужно добавить иконку размером 70×20, на сервер ее загружают в размере 140×40. А потом уменьшают, указав в коде атрибут .

Важно! Учтите, если уменьшаете картинки таким образом, то меняете только ее размер, но не вес. Картинка с большим весом может плохо грузиться на устройстве

Поэтому обращаем ваше внимание еще раз: оптимизируйте изображения перед тем, как добавить их в письмо

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

5. Выбирайте картинки хорошего качества — на бесплатных фотостоках или сделанные вами.

Текст в дизайне email рассылки

Даже самый интересный текст могут не прочитать, если он выглядит непривлекательно

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

Как не надо

1. Не используйте много инструментов оформления в одном письме — разные стили и начертания шрифтов, выделение цветом, размеры шрифта. Пестрые письма выглядят неряшливо, почтовые сервисы могут распознавать их как спам. В рассылке детского магазина используется четыре цвета шрифта, выделение жирным. Окончательно портит картину нагромождение ссылок с подчеркиванием:

Пестрый текст в рассылке детского магазина

2. Не используйте мелкий или блеклый шрифт. Неразборчивый шрифт ухудшает восприятие текста.

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

4. Не ставьте ссылки слишком близко, иначе они могут «склеиться». При чтении со смартфона тяжело будет кликнуть на нужную ссылку:

В рассылке консалтинговой компании ссылки стоят слишком близко

Как надо

2. Используйте стандартные шрифты. Некоторые почтовые сервисы, например, Gmail и Yahoo, поддерживают больше шрифтов, Outlook и AOL — меньше. Если сервис не может прочитать ваш шрифт, он заменяет его стандартным, и верстка может «поплыть». Чтобы этого не произошло, пишите стандартными для всех сервисов рассылки шрифтами: Arial, Lucida Grande, Tahoma, Trebuchet, Verdana, Georgia, Palatino, Times New Roman, Courier New, Courier и Impact.

3. Корпоративными шрифтами оформляйте надписи на баннерах и в тексте, который верстается картинкой.

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

5. Используйте размер шрифта не менее 14px.

Оформление письма в почтовом ящике

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

Он всегда обращает на них внимание, даже если делает это неосознанно

1. Указывайте отправителя письма

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

Не делайте имя отправителя очень длинным, потому что в некоторых почтовых службах оно может не полностью поместиться в графу «Отправитель».

Вы можете использовать оригинальный вариант имени. Например, вариант «Твоя подруга Аня из Школа.ру» может лучше сработать, чем «Анна Степанова», если ваш продукт — онлайн-подготовка к ЕГЭ, а целевая аудитория — подростки-старшеклассники. Вводите креативы после проведения сплит-теста, чтобы не потерять расположение своих подписчиков.

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

2. Указывайте в заголовке, о чем пойдет речь.

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

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

Сохраняйте интригу для читателя, но не обманывайте его и не гонитесь за кликбейтом. Кликбейт — это контент (рекламное объявление, заголовок статьи или письма), созданный с одной целью: побудить посетителя совершить целевое действие. Кликбейт часто обманывает посетителя и не оправдывает его ожиданий. Доверие читателя должно быть для вас самым ценным!

Не делайте заголовок очень коротким или очень длинным

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

Вы можете использовать в заголовке персонализацию — упоминание имени подписчика

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

3. Используйте прехедер

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

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

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

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

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


Прехедер можно «прятать», например, в тег «alt» шапки вашего имейла, если ваше сообщение начинается с изображения. Этот тег заменяет изображение текстом, если оно не прогрузилось и тоже считывается почтовой службой. Но лучше использовать прехедер в начале вашего сообщения, грамотно вписав его в текст вашего письма.

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

Отзывчивый email-дизайн

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

«Отзывчивый веб-дизайн» — это понятие придумал Итан Маркотт в 2010 году: «Сочетая резиновую модульную верстку и медиа-запросы CSS3, мы можем создавать дизайн, который подстраивается под любую форму дисплея».

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

До недавнего времени Gmail не поддерживал медиа-запросы. К счастью, с сентября 2016 года это изменилось. Однако, у некоторых клиентов это параметр остался прежним: Yahoo, Windows Phone 8 и Gmail для Android.

Справиться с отсутствием медиа-запросов помогают различные методики. Некоторые термины вы уже слышали: «резиновая», «адаптивная», «отзывчивая», «гибридная» и «эластичная» верстки.

Резиновая верстка

Самое простое решение — это поставить одну колонку, чтобы сделать письмо резиновым. Это означает, что если меняется окно просмотра, меняется и область с контентом.

.container { max-width: 600px; width: 100%;}

Отзывчивая и адаптивная верстка

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

Сложности начинаются, когда приходится использовать сетку и столбцы. У вас может быть двухколонная верстка, которую затем приходится складывать в одноколонную, ориентируясь на определенную ширину окна просмотра. Однако медиа-запросы все равно ненадежны, так как не везде поддерживаются.

Гибридная и эластичная верстка

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

Вот небольшой сниппет, который я использую в большинстве своих писем:

<!—><table align=»left» border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%»> <tr> <td align=»left» valign=»top» width=»50%»> <!—> <div class=»span-3″ style=»display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;»>…</div> <!—> </td> <td align=»left» valign=»top» width=»50%»> <!—> <div class=»span-3″ style=»display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;»>…</div> <!—> </td> </tr></table><!—>@media only screen and (max-width: 620px) { .span-3 { max-width: none !important; width: 100% !important; } .span-3 > table { max-width: 100% !important; width: 100% !important; }}

Отзывчивые изображения

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

<img src=»https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo.png» height=»100″ width=»600″ alt=»Company Logo» style=»max-width: 100%;»>

Нельзя полагаться на max-width: 100%; — некоторые клиенты игнорируют этот параметр. Вам также пригодятся следующий кусочек кода:

@media only screen and (max-width: 620px) { img { height: auto !important; max-width: 100% !important; width: auto !important; }}

Фриланс в Турции

Так уж сложилось, что в уютном Санкт-Петербурге меня особо ничего не держит, да и душа возжелала смены обстановки и новых открытий. В ход пошла википедия со списком стран и их визовыми режимами, airbnb и aviasales. Задача стояла в том, чтобы найти страну с неславянской культурой, более теплыми погодными условиями, нежели в центральной России и стоимостью проживания, которая бы не превышала привычную мне в Питере. Таким образом, выбор пал на Турцию. Аргумент простой — а почему бы и нет? Я не слишком серьезный и дотошный человек в плане досконального изучения моего будущего места обитания, поэтому отчасти мой выбор был от балды.

Решение проблем

В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Рассмотрим самые распространенные:

  1. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом: Для решения этой проблемы нужно электронную почту и телефон изначально оборачивать в ссылку. Также необходимо указать нужные стили для ссылок. Для телефона:

Для электронной почты:

  1. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить width=«100%» и для td прописать height=«100%». Пример:

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

  1. В веб версии почтового клиента Outlook не желательно использовать строчные элементы, так как по умолчанию почтовый клиент добавляет собственное значение line-height. — решает проблему отображение свойства в почтовом клиенте Outlook. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: 141%;.

Адаптивные изображения

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

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

@media only screen and (max-device-width: 480px) {
	img {
		display: none;
	}
	 {
		background-image: url(background_image.png;
		width: 440px !important;
		height: 240px !important
	}
}

Пример — из этого руководства

Мы в SendPulse предоставляем услугу дизайна шаблонов, но но есть и специализированные агентства, как Site Elite Studio.

Основные проблемы верстки

Сложности начинаются с самого начала — существует множество движков рендеринга писем, которые используются различными почтовыми программами:

  • Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit.
  • Outlook 2000, 2002 и 2003 используют Internet Explorer.
  • Outlook 2007, 2010 и 2013 используют Microsoft Word (да-да, Word!).
  • Веб-клиенты, соответственно, используют движки браузера — например, Safari использует WebKit, а Chrome использует Blink.

Почтовые клиенты добавляют собственные стили, помимо тех, что были изначально выбраны разработчиком рассылки. Например, Gmail для всех шрифтов в устанавливает значение. Также разработчики почтового сервиса Google лишь недавно анонсировали поддержку встроенного CSS и media queries.

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

  • вместо
  • вместо,
  • вместо ,
  • CSS2 вместо CSS3,
  • HTML4 вместо HTML5,
  • вместо , также стоит использовать расширенные свойства, вроде и другие,
  • фон цветом вместо фоновых изображений, а визуальные элементы через тег
  • HTML-атрибутов вместо CSS,
  • инлайн CSS вместо наборов стилей или блоков 

Основные ошибки при создании писем

Ширина

Очень важно, так как письма свыше 600рх, могут дойти до клиента в неподобающем виде. Когда выполняете, старайтесь придерживаться 550-620. Копипаст готовых параметров для формировки текста

Когда используете шаблоны, будьте внимательны, так как зачастую программы могу добавлять свои теги. Что приведет к некорректному отображению текста или отдельных частей и влечет за собой внимания «спам-фильтров». Не корректная кодировка. UTF-8 является стандартной, другие сразу отправляются в папку Спам. Сверстывать одним рисунком. Так как таким методом зачастую пользуются спамеры. Не использование Alt-тегов. Это текст, который виден, если рисунок не прогрузился.

Советы верстальщикам

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

Хорошая практика — обнуление стилей. Обращайте внимание на margin. Чтобы этот стиль работал в Outlook, указывайте его с заглавной M → Margin. Если кому-то проще или привычнее при верстке прописывать стили во внешние CSS — без проблем, можете добавить их в инлайн перед отправкой или тестированием письма, с помощью специальных инструментов, например, Инлайнера. Помните о пользователях, которые отключили показ картинок в браузере.Соблюдайте баланс «текст-изображение», чтобы в любом случае донести информацию до человека

И не забывайте про атрибут «alt» для тега «img». Придерживайтесь принципов Mobile-First. Определите какая информация ключевая и поместите ее на первый экран. Отключайте ненужные блоки на маленьких экранах и уберите в конец письма все, что на десктопах смотрится нормально, а на мобильных мешает увидеть основной контент. Не пытайтесь показать «все и сразу»: сверните ссылки на категории товаров, вместо десяти фотографий поставьте одну-две. Упростите навигацию, все-таки подписчик просматривает письмо сверху-вниз, а не слева-направо. И не перегружайте письмо, пусть оно будет «легким» и открывается в течение 5 секунд.


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

В конце концов, вы можете установить фон, который будет работать даже в Outlook.

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

Доступность

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

  • Добавляйте role=»presentation» в каждую таблицу, чтобы было понятно, что таблица используется для верстки.
  • Весь текст сопровождайте содержательными описаниями.
  • Если не хотите использовать alt-текст, то ставьте alt=»», чтобы было понятно, что там пусто.
  • При необходимости используйте семантические HTML-теги, такие как <p> и <h1>.
  • Используйте атрибут role для элементов вроде header и footer (например, role=»header»).

Неочевидные моменты в работе с текстом email

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

Не забывайте о текстовой версии письма

Большинство писем, которые приходят пользователям — это так называемые MIME-сообщения. Этот стандарт подразумевает использование и HTML-версии и обычной текстовой версии письма — почтовый клиент получает их обе, а затем сам решает, какую из них использовать в зависимости от настроек

Поэтому при отправке писем очень важно включать обе их версии

Важно помнить, что некоторые почтовые клиенты даже plain-text письма будут отображать в качестве HTML-сообщений. К примеру, Gmail добавит дополнительные стили и превратит URL в ссылки

Прехедер сообщения очень важен

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

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

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

Для превью сообщений и тестирования прехедеров можно использовать этот инструмент от Остина Вудалла (Austin Woodall).

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

Инструменты, облегчающие работу верстальщика

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

Фреймворки

1) Zurb Ink

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

2) Kilogram

По словам автора, «шаблон килограмма адаптивен везде». Сам автор – Артур Кох, известный в узких кругах верстальщик. Рекомендуем.

Еще один удобный фреймворк для html-писем, который упрощает установку кнопок, изображений и ссылок.

Шаблоны

Десятки бесплатных шаблонов html-писем.

2) GraphicMail

Сотня готовых шаблонов. Чтобы скачать — активируйте бесплатный аккаунт.

3) Antwort

Набор адаптивных макетов, поддерживающих большинство почтовых клиентов, Outlook и Gmail в их числе.

4) Шаблоны, протестированные на популярных почтовых клиентах.

5) Шаблоны от MailChimp.

Инструменты

1) Установщик кнопок для писем на VML и CSS.

2) Litmus

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

3) Litmus Scope. Помогает создать веб-версию уже готового html-письма.


Посмотреть, почитать, вдохновиться

1) Подборка интересных адаптивных писем

2) Подборка интересных адаптивных писем №2

3) Подборка интересных адаптивных писем №3

3) Блог Артура Коха — о верстке писем, без воды и прописных истин

4) Инструкция по верстке писем от MailChimp (на английском)

5) Учебное пособие по дизайну и верстке писем (на английском)

Почтовые клиенты и вебморды. Что теперь?

Автор изображения Louie Mantia Приветствую! В последнее время все больше времени уделяю разработке новых методик для верстки писем, которые облегчат жизнь верстальщику, и не исключено, что в скором времени вас ждет новый свежий материал по теме. Меня интересует соотношение использования вебморд и почтовых клиентов на сей день. Выборка, разумеется, не так точна как хотелось бы. Но все же хабр показывает интересные результаты. С прошедшего опроса прошло полтора года. Вероятно картина изменилась. Бесспорно гмыло будет лидировать, но как я уже говорил раньше, суть опроса — выявление не победителя, а соотношения. Прошу голосовать. В камментах не прочь обсудить фичи тех или иных клиентов и вебморд, которые появились за последнее время. От себя скажу, что было очень приятно обнаружить поддержку фоновых изображений в яндекс почте и почте mail.ru. При всем этом гуглоиды были первыми в этом вопросе, анонсировав эту поддержку 1 февраля прошлого года. Второй опрос ищет долю мобильных платформ на рынке почты. Если по какой либо причине ваш любимый почтовик не попал в опрос, то, увы, он скорее всего не так интересен для моих исследований.

Онлайн-ресурсы для верстки писем

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

Можно использовать различные конструкторы для выполнения работы:

SendPulse

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

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

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

Для использования данной программы не понадобятся знания специальных HTML-кодов.

UniSender

UniSender – это хороший помощник, если у вас нет знаний html и вам надо сделать текст, который будет адаптирован не только для ноутбука или ПК, но и для телефона.

  • Также на ресурсе представлены около 100 бесплатных примеров, которыми можно воспользоваться и создать письмо с минимальными затратами времени.
  • Они позиционируют себя с быстрой технической поддержкой, которая даст ответ на все возникшие в процессе работы вопросы.
  • Отличает их также, что есть доступ к добавлению рисунков в виде фона блока, и вы можете поверх картинки расположить пару строк, кнопки и прочее.
  • Каждый блок можно отредактировать (выравнивание, отступы, шрифты, цвета и прочее).
  • Есть фоторедактор, который уже встроен в блоках.

NotiSend

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

  • Создание HTML-email с доступной планировкой по шаблону и прочим данным, имея при этом готовые современные макеты. И все это можно тестировать онлайн.
  • Ресурс поддерживает персонализацию, а это значит, что каждый емайл дойдет до адресата.

Дизайн CTA

Как не надо

1. Если у вас одна кнопка призыва к действию, не прячьте ее внизу за пределами первого экрана прокрутки. Человек может просто не дочитать письмо до конца.

2. Не заставляйте читателя угадывать, что ему нужно сделать, иначе он просто закроет письмо. Например, в рассылке ресторана призыв к действию «забронировать столик» виден только после прокрутки. К тому же он не соответствует теме письма, которая обещает «Рецепт лучших шашлыков»:

3. Если оформляете call to action ссылкой, она не должна теряться на фоне другого текста. В примере ниже ссылку на регистрацию в вебинаре сложно заметить сразу:

Короткая и светлая ссылка регистрации на вебинар теряется на фоне письма

Как надо

1. Размещайте призыв к действию в пределах первого экрана. Если письмо длинное, добавляйте призывы к действию по ходу чтения: в середине и в конце письма. Так делают в рассылке интернет-супермаркета Rozetka. Call to action размещен в шапке письма и под акционными товарами:

Несколько призывов к действию в рассылке интернет-супермаркета Rozetka

2. Согласовывайте призыв к действию с заголовком письма. Когда call to action вытекает из темы, письмо выглядит логичным и последовательным. Например, Нил Патель, создатель KissMetrics, в теме обещает рассказать, как высоко ранжироваться в поисковых системах без бюджета. А призыв к действию говорит: «Вот формула».

3. Делайте кнопку контрастной к дизайну письма. Призыв к действию должен хорошо выделяться на фоне текста и изображений:

Явный призыв к действию в рассылке

Картинки

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

Оформление текста

  1. Изначально, для верстки писем давалась рекомендация оборачивать весь текст в строковый элемент span или font и уже в них задавать стилизацию шрифта. В настоящее время этим можно пренебречь. Описывать свойства для текста можно в любом HTML-элементе внутри тега body, но желательно только inline.
  2. Для задания размера шрифта лучше используйте абсолютные единицы измерения (px или pt), потому что мы не везде имеем доступ к стилизации базового шрифта. Это даст гарантию одинакового font-size для всех почтовых клиентов. Устройства работающие на WebKit по умолчанию применяют масштабирование текста. Для отключения этого поведения существует вендорное свойство -webkit-text-size-adjust. Советую просто вынести следующий селектор в head:
  3. Чтобы кроссмейлерно оформить ссылку необходима следующая конструкция:

    Повторное оборачивание ссылки в span и задания цвета нужно для Outlook, т.к. он не понимает приоритет !important, а без него Яндекс.Почта будет перекрашивать вашу ссылку в красный цвет при событии hover. Атрибут target=»_blank» необходим только в том случае, если в вашем письме имеется ссылка на web-версию письма, чтобы ссылки в этой версии открывались в новых вкладках. А так, все почтовые клиенты делают это уже самостоятельно.

  4. Если хотите, чтобы межстрочный интерлиньяж (line-height) работал везде, задавайте его только для блочных элементов (td, div, p, li).

Обязательные свойства для HTML-тегов

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

  • — толщина рамки в пикселях;
  • — отступ от рамки до содержимого ячейки;
  • — расстояние между ячейками;
  • — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:
  • — всегда используем эти свойства для всех ссылок и , иначе почтовые клиенты будут добавлять к этим свойствам свои значения;
  • — тоже используем для всех ссылок и span, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;
  • — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;
  • — делает строчный элемент блочным:
  • — обязательное свойство, должно всегда использоваться, можно оставлять пустым;
  • — толщина рамки в пикселях (px);
  • — ширина картинки. Если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту . Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства и она будет пропорционально менять и высоту и ширину;
  • — хак для Outlook, если не ставить display:block то Outlook добавит к картинке отступы.

MIME Multipart

Обычное текстовое письмо — это просто текст. HTML-письмо — это просто HTML. Большинство писем, которые вы посылаете и получаете — это MIME (Multipurpose Internet Mail Extensions — многоцелевые расширения интернет-почты). Этот стандарт комбинирует текст и HTML, так что получатель сам решает, какой тип отображать.

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

Также замечу, что некоторые клиенты отображают простой текст как HTML; например, Gmail добавляет некоторые стили по умолчанию и превращает URL в гиперссылки. Большинство сервисов рассылок конструируют MIME самостоятельно, поэтому об этом не приходится думать. Некоторые из них также создают простую текстовую версию из вашего HTML.

Совет: Выберите пункт «Показать оригинал» из выпадающего меню в Gmail, чтобы увидеть полный MIME.

Koding.com радует нововведениями

Koding.com — полноценная частично бесплатная среда разработки в браузере и социальная сеть для разработчиков в одном флаконе. — Прошлогодний обзор — Недавний обзор Из платных услуг пока что по прежнему остаются дополнительные виртуальные машины и возможность коллективной разработки на них. Все остальное, как и обещали разработчики остается бесплатным. Не может не радовать скорость работы вебморды. Несравнимо лучше относительно момента запуска проекта. Из минусов (если кто пропустил), виртуальная машина выключается через 15 минут после прекращения работы с ней. Позиция разработчиков сервиса: «Нефиг разворачивать бложики и эксплуатировать сервис как хостинг. Мы даем вам среду разработки и тестирования.» Регистрация ныне открыта. Никаких инвайтов. При этом проект по прежнему остается в бета версии. В сервис интегрировали гитхаб, что позволяет войти в систему через соответствующий аккаунт. Но, что более приятно, так это пополнение списка приложений. О них под катом.


С этим читают