Согласитесь, что всё время хочется удивлять и радовать своих подписчиков не только приятными новостями, а и красивыми письмами, ведь как говорится: “Встречают по одёжке”. Тем более в преддверии Дня Влюблённых, рассылки так и пестрят амурчиками, конфетками и сердечками. Но просто создать красивую email-рассылку мало - важно ещё, чтобы она также красиво выглядела у клиентов.

Как отображается одно письмо в разных браузерах?

Вот такое нарядное и праздничное письмо отправляла подписчикам компания Inch of Gold к 14 февраля.

Отображение письма на мобильном устройстве

Отображение письма в почтовом клиенте

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

• Эмоджи ❤ в теме и на кнопках,
• Анимированная подложка для баннера,
• Разделитель в виде гирлянды.

Мы сосредоточим своё внимание на самом интересном, а именно - первых двух пунктах. Эти нюансы вам точно будут полезны, если вы не собираетесь игнорировать День всех влюблённыхи планируете поздравлять ваших клиентов и подписчиков.

Тестирование письма ко Дню святого Валентина

Мы протестировали вручную письмо Inch of Gold на разных устройствах и в разных браузерах (извините, если какой-то упустили). Акцент был именно на новых элементах, которые добавила компания в письмо, а именно: как выглядел баннер, как отображались кнопки, изменилось ли отображение спец. символов в разных почтовиках.

Почему именно ручная проверка? К сожалению, такие сервисы проверки писем, как Litmus или Email on Acid делают скриншоты и проверить анимацию в них не получится.

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

Рассмотрим каждый элемент отдельно и начнём, пожалуй, с кнопки СТА — ключевого звена любого письма.

Приключения одной кнопки СТА в разных браузерах

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

Но нужно было добавить в кнопку один символ ❤ и понеслось...

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

Именно такой, кнопку СТА увидели пользователи i.ua и meta.ua.

Вроде бы ничего особенного - кнопка, как кнопка. Но, смотрите как она выглядит при просмотре на IOS, ещё и шрифт подставился Arial вместо Georgia

В Outlook до 2011 версии кнопка выглядит немного “покусанной” и дело не только в том, что она стала прямоугольной, поменялся шрифт и сердечко, словно где-то потеряло пару пикселей.

В Outlook 2011 и старше уже лучше:) Форма СТА сохранилась, тень осталась, но шрифт стал другим да ещё и жирным.

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

А вот в Gmail, на мой взгляд, очень органично всё получилось. Словно так и задумывалось. Сердечко просто сменило цвет и никаких фатальных изменений с кнопкой нет.

На ukr.net шрифты и форма кнопки сохранились, но иконка тоже видоизменилась:)

В mail.ru (о, чудо) сердечко тоже стало цветным, но как-то ему не очень по-душе соседство с текстом и оно шаловливо пытается убежать вверх.

Не очень хорошо только то, что в письме ещё имелась тёмно-красная кнопка, на которой красные сердца IOS, mail.ru и ukr.net просто слились воедино с фоном.

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

Анимированный сердцепад в рассылке

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

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

А теперь обратите внимание на Outlook - фона вовсе нет:

Фоновая картинка (которой и была сделана анимация) не отработала вовсе в Outlook до 2011. К тому же, в Outlook и i.ua закругления на рамке промокода исчезли, но Gmail App повёл себя корректно и рамочку оставил без изменений.

И несколько слов о темах

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

С остальными почтовиками/браузерами/устройствами ситуация остаётся всё такой же нестабильной. И если все почтовики подставляют хотя бы чёрно-белый вариант ❤, то i.ua просто игнорирует и заменяет любой незнакомый символ на пробел.

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

Естественно, что такие символы, как ⇒, ★, ✪, ✉ и т.д. не имеют таких волшебных свойств меняться. Но всё-таки лучше проверять всё, чтобы не попасться на уловки коварных почтовых сервисов!

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

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

До новой встречи в нашем блоге! ;)

Статья обновлена от 05.02.2016