Тонкости работы с Outlook

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

Шаблон

Начнём с того, что у вас должен быть правильный шаблон для письма, в котором будут стоять ограничения по ширине, и ограничения эти должны быть фиксированными. Если вкратце, то Outlook не понимает свойства max-width. К примеру, вот так должно выглядеть наше письмо:

Вот так оно будет в Outlook:

Чтобы этого избежать, мы создаём таблицу с фиксированной шириной, которую будет видно только Outlook. Разместив нашу таблицу внутрь этой, мы получим аналог свойства max-width для Outlook 🙂

<!--[if (gte mso 9)|(IE)]>
<table width="660" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center">
<![endif]-->


<!--[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]-->

Условия «если Outlook». И наоборот

Мы можем отображать некоторые элементы для только для Outlook, написав вот такое условие:

<!--[if mso]>
     Контент для  Outlook
 <![endif]-->

И наоборот, можно часть вёрстки отобразить на всех почтовых клиентах, кроме Outlook:

<!--[if !mso]> <!---->
    Контент для остальных почтовиков, Outlook 2003 и OSX версии
 <!-- <![endif]-->

Где это может понадобиться? Один пример я уже описывал в статье, когда разбирал частые вопросы в поломке писем. Рассмотрим его тут ещё раз, только на примере. 

В одной из наших рассылок мы подставляли картинку карты, чтобы человеку было проще найти вход в заведение:

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

Казалось бы, решение простое! Сделать картинку размером х2, и тогда проблема будет решена:

Но мы столкнулись с тем, что для  Outlook width=”100%” значит, ширина равна 100% ширине исходного файла, из-за чего, всё письмо ломалось, потому что картинка растягивалась на 1140 пикселей, чем расширяла родительскую таблицу, а это ломало всю контентную часть.

Пример отображения в gmail:

И вот что произойдёт в Outlook:

Чтобы картинка в Outlook не поплыла, ей нужно указать фиксированную ширину, но если мы это сделаем, то плакала наша адаптация.Тут на помощь приходит условие if mso, в котором для Outlook наша картинка будет загружаться с фиксированной шириной, а для всех остальных с шириной в 100%.

<!--[if mso]>
  <img src="img/img-map2x.jpg" width="570"  alt="Карта" border="0" style="display: block;" />
 <![endif]-->
 <!--[if !mso]> <!---->
   <img src="img/img-map2x.jpg" width="100%"  alt="Карта" border="0" style="display: block;" />
<!-- <![endif]-->

Перестраивающиеся блоки

Перестроение блоков происходит благодаря  элементу div со свойством display: inline-block:

Когда им не хватает пространства, они перестраиваются:

Но не в Outlook. Он не понимает, как работать с такими блоками, и покажет следующее:

Зато он прекрасно понимает, как работать с табличной вёрсткой. Поэтому нам нужно в блоки добавить ещё таблицы с такими же размерами, как и у блока. А свойство background и height я перенесу в атрибуты ячеек наших таблиц. Со свойством border мы поступим так же, потому что нет смысла стилизовать элементы div, которые Outlook плохо отображает.

В целом, добавление таблицы не спасёт картину, потому что Outlook всё ещё видит лишь две таблицы внутри одной родительской:

Добавляем  последний штрих — делим  родительскую таблицу на две ячейки, чтобы в каждой из них оказался один div:

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

Вот что у нас получилось:

Осталось сократить отступы между блоками.  Так произошло, потому что наша таблица была шириной 660 пикселей,  а блоки по 300 пикселей. Уменьшим нашу таблицу до 600 пикселей и получим итоговый результат:

с работающей адаптацией:

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

<div style="display: inline-block;vertical-align:top; width:300px;">
<table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
<tr><td align="center" valign="middle">
			
</td></tr>
</table></div><!--[if gte mso 9]>
</td><td valign="top" align="center">
<![endif]-->

Если вам нужно больше таких блоков, например, четыре штуки в одной таблице (по два блока в одном ряду), то для Outlook в условных комментариях нужно будет ещё добавлять закрытие строки и открытие новой (</tr><tr>). Если этого не сделать, то Outlook нарисует большую таблицу с четырьмя ячейками и поломает вам всю вёрстку: 

Добавляете tr между вторым и третьим блоком:

И проблема решена :

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

Фоновое изображение (background)

К сожалению, Outlook по-прежнему не понимает свойство background-image и атрибут  background=»», поэтому по-прежнему приходится немного усложнять процесс. 

Если вам нужно создать таблицу с бэкграундом, то это будет выглядеть вот так:

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

Код:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td background="img/background.jpg" style="background-image:url(img/background.jpg)" bgcolor="#ffffff" height="269" valign="top" align="center">
	<!--[if gte mso 9]>
	<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:269px;">
	<v:fill type="tile" src="img/background.jpg" color="#ffffff" />
	<v:textbox inset="0,0,0,0">
	<![endif]-->
	<div>
	<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
	<td align="center">
<!--				Контент тут-->
	</td>
	</tr></table>
	</div>
	<!--[if gte mso 9]>
	</v:textbox>
	</v:rect>
	<![endif]-->
</td></tr>
</table>

А если вам нужно залить всё письмо картинкой, то тут немного другой подход. Нужно вставить вот такой код сразу после тега <body>(только обратите внимание, что путь к картинке указывается в двух местах):

<div style="background-color:#7bceeb;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="img/background.jpg" color="#7bceeb"/>
  </v:background>
  <![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="img/background.jpg">

 и закрыть вот этим кодом перед закрывающим тегом </body>

      </td>
    </tr>
  </table>
</div>

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

Кнопки

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

Outlook не самый удобный для верстальщика почтовик. Скажем откровенно: совсем неудобный. Но раз им многие пользуются (большинство корпоративной почты — это Outlook), то важно уметь верстать красивые адаптивные письма и для него. Остались вопросы или у вас есть свои собственные лайфхаки? Напишите нам 🙂

Год использования Figma. Опыт ExpertSender

До перехода на Figma мы пользовались Photoshop и продолжали бы им пользоваться, потому что потребности в изменениях не было. Но в прошлом году наша команда решила попробовать себя в разработке приложения. Мы поняли, что нам нужен инструмент, позволяющий настроить лёгкий и быстрый доступ к макетам для команды, которая будет работать над проектом, и решили попробовать Figma.

Как начать работу

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

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

Даниил Луконин

ведущий веб дизайнер ExpertSender

«С первого дня разработки и взаимодействия с Figma я понял, что так выглядит любовь.»

Какими инструментами мы пользуемся

Auto Layout

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

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

Плагины

Ещё один удобный инструмент. Библиотека плагинов постоянно пополняется, есть масса очень нужных дополнений. Например, плагин Material Design. Там 1000+ готовых компонентов пользовательского интерфейса и много шаблонов приложений. А плагин Unsplash ускоряет работу, когда в макет нужно вставить стоковую картинку.

Прототипы

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

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


Плюс есть такая штука, как Figma Mirror. С её помощью можно открыть свой макет через приложение на телефоне и смотреть адаптацию своих макетов/переходы/клики и протестировать удобство. В общем, довольны все: дизайнеры/верстальщики/менеджеры.

Figma Mirror — это веб приложение Figma, которое просто отображает текущий выбранный фрейм.


Библиотека стилей и компоненты

Теперь у нас в макете не бывает трёх кнопок разного размера или шестнадцати размеров шрифтов. Мы создаем одну библиотеку стилей, утверждаем с постановщиком задачи шрифты, кнопки, цвета и пользуемся только этими ограниченными стилями. Это помогает, когда в подвале (нижняя часть сайта) на пятнадцати страницах нужно поменять одно слово. В Photoshop это заняло бы три года и девять месяцев, а в Figma — две минуты.

Дополнительные инструменты

Они тоже на высоте. Например, если нужно быстро отрисовать что-то простое, это можно сделать с помощью пера, которое в Photoshop было реализовано отвратительно – а в Figma взял и сделал.

Export

Эта штука сильно упрощает жизнь и мне, и верстальщикам. Экспорт любого объекта займёт 3 секунды, будь то группа (объединяет несколько элементов вместе), фрейм (аналог холстов из привычных графических редакторов) или отдельный элемент. Экспортировать можно в форматах PNG, SVG, JPG и PDF.

Чем хороша Figma

Работа в online

В Figma можно работать онлайн и в браузере, и в десктопной версии. Теперь я могу хвастаться макетами даже с телефона где угодно. Главное, чтобы был доступ в интернет. А ещё не нужно постоянно жать Shift+S и боятся, что что-то не сохранится, если компьютер отключится. 

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

Взаимодействие с командой

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

Ещё один из огромных плюсов: в проекте одновременно может работать вся команда. Это удобно, когда нужно вносить правки в ходе созвона в Skype, например. Особенно актуально, когда за окном коронавирус и половина команды работает на удалёнке.

Правки в режиме реального времени

Одновременно с двух компьютеров с менеджером проекта можно вносить правки онлайн.

И это суперудобно — не нужно проводить митинги или ждать, пока менеджер внесёт правки, чтобы продолжать работу.

Лёгкость передачи макета

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

Работа с SVG

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

Права доступа

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

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

Что изменилось с внедрением Figma

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

Продолжаем освоение Figma, и если у вас есть совет, что нам точно стоит попробовать, напишите!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

Как тестировать вёрстку писем

Тестирование вёрстки — обязательный этап при создании письма. Мы должны убедиться, что письмо выглядит так, как задумывалось, во всех почтовиках и на всех устройствах. Отдать клиенту криво свёрстанное письмо — это не только стыдоба, но и ущерб репутации и вероятные финансовые потери. Никому не понравится плохая работа. Поэтому — ТЕСТИМ!

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

Да, работает неидеально и иногда пропускает ошибки, вроде неправильной последовательности тегов:

<tr><td>
<tr><td>
</td></tr>
</td></tr>

Он считает общее количество открытых и закрытых тегов, не всегда учитывая их последовательность, но когда нас просят проверить письмо, то мы обычно с этого и начинаем, находим незакрытые теги и часть писем именно таким образом и чинится 🙂

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

Сервис платный, как и его прямой конкурент — Litmus, но как-то исторически сложилось, что мы пользуемся EmailOnAcid уже несколько лет. Его функционал и интерфейс на момент выбора показался нам лучше и удобнее, как обстоят дела сейчас, лучше выяснить самому 🙂 Так как эти сервисы эмулируют устройства, то лучше проверить ещё и на реальных, потому что иногда они показывают картину, которая расходится с реальной. И тут наступает 3-й этап тестирования —  «аналоговый». 

Для этого мы загружаем архив с письмом в платформу ExpertSender и отправляем на заранее подготовленный тестовый лист, где есть емейлы с самыми популярными почтовыми провайдерами: mail.ru, yandex.ru, gmail.com, outlook.com. Последний не является популярным, но также считается важным, так как стоит предустановленным почтовиком из пакета MS office. В нём куча своих проблем и интересные способы их решения, но об это мы напишем в другой нашей статье про вёрстку для Outlook`a, но уже сейчас важно знать, что даже если в Outlook 2013 отображается корректно, то в других версиях вполне возможно будут проблемы, и наоборот.

Проверяем как веб-версию всех почтовых провайдеров, так и в мобильном приложении (по возможности проверить на iOS и Android), а в случае с Оutlook —  в приложении для компьютера.

Чек-лист по тестированию верстки:

  • Валидация. Проверяем код на валидность с помощью редактора Brackets с расширением HTMLHint
  • Автоматическое тестирование. Тестируем верстку с помощью специальных сервисов, которые эмулируют работу разных почтовиков: Litmus, Emailonacid.
  • Ручное тестирование. Отправляем сверстанное письмо на тестовых список адресов разных почтовых провайдеров. Проверяем веб и мобильную версии на разных устройствах и в разных почтовиках.

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

Однако если при тестировании всплыл какой-то баг, не стоит впадать в панику. Большинство проблем, с которыми ко мне неоднократно обращались клиенты ExpertSender, легко чинятся.

Самые частые проблемы

1. Отступы пропали/некорректно отображаются

Если валидатор не нашёл ошибок, то скорее всего, у вас в коде для отступов используется свойство padding/margin. Они ещё не обрели полную поддержку: padding корректно работает только для тега <td>, а margin неполноценно поддерживается Outlook. Поэтому для горизонтальных отступов мы используем таблицу с выравниванием по центру внутри более крупной таблицы.

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

<div style="height: 10px ; line-height:10px; font-size:8px;"> </div>

Вот как в итоге всё это выглядит.

2. В Яндекс.Почте или Рамблере мобильный вид работает не так, как на остальных почтовых провайдерах

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

3. С адаптацией все было хорошо, но после добавления картинки/элемента в письмо, она перестала работать.

Вероятно, вы добавили элемент, у которого указана фиксированная ширина. К примеру, в картинке указана ширина 600 пикселей (width=”600”), а у всех остальных элементов ширина указана в процентах. И да, именно из-за одного элемента с фиксированной шириной, всё письмо перестанет адаптироваться. Тут нужно просто изменить ширину на процентную. 

4. В Оutlook картинка в разы больше своих размеров, и всё письмо поломано.

Тут всё просто: скорее всего, исходник картинки у вас, к примеру, 1500 пикселей в ширину, а в коде указана ширина 100% (width=”100%”). Outlook понимает это по своему, он растянет вашу картинку на 100% от ширины исходного файла (то есть на 1500 пикселей), а не на 100% от ширины родительского элемента, как это делают остальные почтовики. Из-за этого таблица, в которой была картинка, растягивается на ширину картинки, и в итоге всё ломается. 

Решений тут может быть несколько.

  • Если это баннер на всю ширину письма, то тут нужно изменить ширину исходного файла на ширину картинки в вашем макете. 
  • Это фотокарточка вашего товара в адаптивном блоке, ширина которого не более 300 пикселей, и вам важно, чтобы качество картинки было двукратным, то можно указать фиксированную ширину. Это и не помешает вашей адаптации, и позволит использовать ретина изображения. 
  • Прописать условие if else для Оutlook.
<!--[if mso]>
	Версия для Оutlook
 <![endif]-->
 <!--[if !mso]> <!---->
	Версия для остальных почтовиков и Outlook 2003 и OSX версии
 <!-- <![endif]-->

Естественно, в версии для Outlook мы указываем, что его ширина будет фиксирована, а для всех остальных —  процентная

<!--[if mso]>
	<img src="img/logo.png" width="600"  alt="" border="0" style="display: block;" />
 <![endif]-->
 <!--[if !mso]> <!---->
	<img src="img/logo.png" width="100%"  alt="" border="0" style="display: block;" />
 <!-- <![endif]-->

5. Вместо текста отображаются странные символы

Это проблемы с кодировкой. Проверьте её в теге <head>, которая прописана в html файле. Там должен быть вот такой meta-тег, с кодировкой UTF-8:

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

6. В Gmail обрезается часть письма

Проверьте размер html-файла, если он больше 102кб, то Gmail его будет обрезать. Решением тут станет только оптимизация вашего кода: удаление лишних отступов и таблиц.

Остались вопросы по тестированию или есть баги, с которыми частенько сталкиваетесь? Напишите нам, мы придумаем, как вам помочь 🙂

GIF в емейл-сообщениях

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

Эволюционно сложилось так, что наш мозг активно реагирует на раздражители. Поэтому GIF-изображения — это то, на чём останавливается взгляд, когда вы пролистываете утром «непрочитанные» (Движение! Что это там?). То есть движущаяся картинка —  это отличный способ привлечь внимание пользователей и сделать акцент на том, что вы хотите до них донести.

Как создать GIF-изображение

Что сделать, чтобы получилась GIF-ка, рассказал руководитель отдела вёрстки Валера Селезнёв.

Создавать гиф-файл можно несколькими способами:

1. Конвертировать видео в GIF-изображение. Для этого есть много онлайн-сервисов, например, Ezgif или Giphy. Там можно оптимизировать гифку: уменьшить разрешение, обрезать, уменьшить количество кадров в секунду. Или просто запустить авто-оптимизатор, который немного ухудшит качество гифки, но тем самым уменьшит его исходный размер. 

2. Ещё один способ конвертировать видео в GIF-изображение — через программу для монтажа Adobe Premiere или Adobe Photoshop.

3. Сделать GIF из нескольких фото можно с помощью сервисов Gifius или Toolson.

4. Ещё один вариант: скачать готовые в интернете. Но следите за тем, чтобы их можно было использовать в коммерческих целях.

РАЗМЕСТИ НА СВОЕМ САЙТЕ ИЛИ В ПИСЬМЕ ЧУЖУЮ КАРТИНКУ И ПОЛУЧИ ИСК ДО 5 МИЛЛИОНОВ РУБЛЕЙ!

Что важно помнить

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

Или используйте условие if аутлук - то баннер, else гифка
<!--[if mso]>
Outlook content
<![endif]-->
<!--[if !mso]> <!-->
Non-outlook content
<!-- <![endif]-->

Ориентируйтесь на вашу целевую аудиторию при её создании — важно, чтобы изображение было уместно и не вызывало недоумений у получателей письма.

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

Валера Селезнёв

руководитель отдела вёрстки

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

Как отправлять

GIF вставляется в письмо так же, как и изображение любого другого формата — с помощью тега <img>.

Примеры

Нельзя взять и не показать примеры GIF-изображений в статье про GIF-изображения.

Netflix часто отправляет письма с GIF-картинками в своих письмах с премьерами и обзорами — их действительно интересно просто открывать, чтобы посмотреть, что там на этот раз.

Aviasales — иллюстрирует заголовок письма забавной GIF-картинкой.

Такие громкие инфоповоды как «Чёрная пятница» заставляют компании придумывать темы писем и контент особенно тщательно. GIF в самом начале письма точно заставят подписчика остановиться и взглянуть на письмо.

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

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

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

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

А в последнем Скуби-Ду и Шегги прислали фото.

Интернет-магазины часто используют GIF-изображения для привлечения к акциям. Так это делает Wildberries.

А так интернет-магазин Revolve приглашает перейти на сайт и сделать заказ.

PIZZA HUT поздравляет своих подписчиков и предлагает задуть свечку для исполнения желаний! 🙂

Nike в честь дня рождения дарит 25% скидку.

А компания Fundbox поздравляет клиентов с праздниками письмом с простой, но очень милой GIF-анимацией.

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

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

Разве может это не привлечь внимание? 🙂

Согласен

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