18 февраля 2018
6164
10 мин
3.71
Дела "сердечные" с призывом к действию в email-рассылках ко Дню святого Валентина
Согласитесь, что всё время хочется удивлять и радовать своих подписчиков не только приятными новостями, а и красивыми письмами, ведь как говорится: “Встречают по одёжке”. Тем более в преддверии Дня Влюблённых, рассылки так и пестрят амурчиками, конфетками и сердечками. Но просто создать красивую email-рассылку мало - важно ещё, чтобы она также красиво выглядела у клиентов.
Как отображается одно письмо в разных браузерах?
Вот такое нарядное и праздничное письмо отправляла подписчикам компания Inch of Gold к 14 февраля.
Отображение письма на мобильном устройстве
Отображение письма в почтовом клиенте
Цель была создать мимишное письмо, которое подарит атмосферу праздника и будет отличаться от регулярных рассылок. Конечно же нужно много сердечек: больших и маленьких, анимированных и статичных, красных и розовых... Из "сердечных" элементов у нас были:
- Эмоджи ❤ в теме и на кнопках,
- Анимированная подложка для баннера,
- Разделитель в виде гирлянды.
Мы сосредоточим своё внимание на самом интересном, а именно - первых двух пунктах. Эти нюансы вам точно будут полезны, если вы не собираетесь игнорировать День всех влюблённыхи планируете поздравлять ваших клиентов и подписчиков.
Тестирование письма ко Дню святого Валентина
Мы протестировали вручную письмо Inch of Gold на разных устройствах и в разных браузерах (извините, если какой-то упустили). Акцент был именно на новых элементах, которые добавила компания в письмо, а именно: как выглядел баннер, как отображались кнопки, изменилось ли отображение спец. символов в разных почтовиках.
Почему именно ручная проверка? К сожалению, такие сервисы проверки писем, как Litmus или Email on Acid делают скриншоты и проверить анимацию в них не получится.
Операционка использовалась Ubuntu, поэтому результаты могут отличаться у пользователей других ОС. И вот что получилось:
Рассмотрим каждый элемент отдельно и начнём, пожалуй, с кнопки СТА — ключевого звена любого письма.
Эффективный email-маркетинг с eSputnik
Приключения одной кнопки СТА в разных браузерах
Казалось бы стандартная кнопка в сервисе рассылки, которая взята в редакторе из готовых наборов блоков.
Но нужно было добавить в кнопку один символ ❤ и понеслось...
Вот как выглядит оригинал кнопки в письме, т.е. как она выглядит в системе 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