На днях я получил от Adobe следующее электронное письмо и открыл его на рабочем столе:
Это письмо от Adobe дало мне возможность пользоваться электронной почтой на рабочем столе на высшем уровне. Однако у меня не было времени на то, чтобы «получить дополнительную информацию», поэтому я пометил письмо как непрочитанное и сохранил его для поездки домой.
Через час я снова открыл электронную почту на своем мобильном телефоне. А теперь представьте, если бы я открыл это электронное письмо на своем телефоне, и изображение было низкого качества, текст был слишком маленьким для чтения, а кнопка призыва к действию сломалась, как у тех, кто предпочитает читать маркетинговые сообщения электронной почты на свой телефон, это расстроит меня и в конечном итоге приведет к полной отмене подписки на рассылку.
Не только я предпочитаю читать маркетинговые электронные письма на телефоне. Фактически, более половины жителей США предпочитают просматривать маркетинговые сообщения электронной почты на своем телефоне. Оптимизация электронной почты для мобильных устройств очень важна, потому что именно такое количество читателей получает доступ к вашим маркетинговым сообщениям.
Итак, доказательства есть, конечно, но как маркетологи перестают отправлять электронные письма, которые не оптимизированы для нескольких дисплеев? Ответное письмо – вот ответ.
Адаптивные электронные письма – это электронные письма, в которых используются плавные изображения и таблицы, чтобы оставаться гибкими для разных размеров экрана. В конечном итоге они предоставляют контент, предназначенный для оптимального взаимодействия с пользователем.
Хотя адаптивные электронные письма можно создавать с помощью медиа-запросов CSS, для их создания не требуется никакого опыта программирования. Создание отзывчивой электронной почты – это не только работа программистов. Здесь мы собрали несколько передовых практик, готовые шаблоны, а также краткое руководство по основам адаптивных писем.
Но сначала давайте проясним: что такое адаптивная электронная почта?
Для иллюстрации вот как выглядело рекламное письмо, которое я получил вчера на свой рабочий стол:
В этом письме есть отличные изображения, значки, которые можно купить, и он хорошо отформатирован. Когда я открываю письмо на мобильном телефоне, меня приветствует вот что:
У меня все еще есть та же информация, те же фотографии и значки для покупки – единственная заметная разница – это формат электронной почты. Другое дело, чтобы лучше адаптироваться к мобильному опыту.
Теперь представьте, применимо ли то же самое расположение рабочего стола к мобильным устройствам. Мне пришлось бы поднести телефон ближе, чтобы увидеть любое изображение или текст. Вместо этого я бы отказался от подписки.
Электронные письма низкого качества могут сообщить подписчику, что качество этого взаимодействия не принимается во внимание. В конечном итоге, неотвечающие письма могут привести к потере подписчиков.
С помощью отзывчивой электронной почты вы можете улучшить пользовательский опыт, а также повысить рентабельность инвестиций в кампанию. Подумайте об этом: подписчики, удовлетворенные оптимизированным дизайном электронной почты для мобильных устройств, обнаружат, что открывают больше маркетинговых сообщений, потому что знают, что это будет хорошо выглядеть.
Итак, несмотря на все эти разговоры об адаптивных электронных письмах, вам, должно быть, не терпится создать свои собственные. Далее мы рассмотрим простые способы создания отзывчивых электронных писем, а также предложим лучшие практики.
Адаптивные шаблоны писем
Адаптивный шаблон автоматически адаптируется к любому размеру экрана, поэтому, если электронное письмо открывается на смартфоне, планшете или компьютере, оно будет отлично выглядеть и иметь полную функциональность.
Тем, у кого меньше опыта в программировании или кто хочет тратить меньше времени на дизайн, я советую использовать шаблон. Они – верный способ убедиться, что ваше письмо будет выглядеть профессионально и отзывчиво.
Адаптивные шаблоны электронной почты экономят ваше время, создавая письмо, которое можно было бы выбрать из списка. Например, инструмент электронного маркетинга HubSpot включает более 60 шаблонов только для адаптивных писем.
Давайте теперь посмотрим на некоторые параметры шаблона.
1. HubSpot
HubSpot предлагает пару бесплатных адаптивных шаблонов электронной почты. Если вы являетесь клиентом HubSpot или бесплатным пользователем, вы можете скачать и попробовать их самостоятельно. Например, это один из адаптивных шаблонов электронной почты – посмотрите на боковую панель, где вы можете предварительно просмотреть шаблон на нескольких устройствах.
Нажатие на типы устройств и проверка правильности форматирования вашего электронного письма – это один из заключительных шагов в процессе разработки, и это шаг в процессе реагирования на электронную почту при использовании такого программного обеспечения, как HubSpot.
Например, нажав на смартфон для предварительного просмотра, вы можете увидеть, отформатировано ли его содержимое, включая размер шрифта и разрешение изображения, удобным для мобильных устройств способом.
2. CampaignMonitor
Шаблоны, предлагаемые CampaignMonitor, похожи на многие другие, в том, что результаты реагирования по электронной почте отображаются в инструменте предварительного просмотра. Например, вот шаблон CampaignMonitor:
Источник
Одна вещь, которая мне действительно нравится в этой настройке, – это то, как вы можете видеть разные устройства бок о бок, чтобы вы могли легко сравнивать элементы дизайна. Можно внести небольшие изменения, чтобы обеспечить максимальное удобство для всех подписчиков.
Шаблоны CampaignMonitor часто бывают бесплатными, поэтому это хороший вариант, если у вас ограниченный бюджет.
3. Stripo
Stripo предлагает более 300 бесплатных HTML-шаблонов электронной почты. Вы можете выбирать шаблоны по отрасли, сезону, типу и характеристике. Например, вот шаблон для раздела вашей отрасли:
Источник
Хорошим признаком надежного и отзывчивого шаблона электронной почты является возможность его предварительного просмотра как на настольном компьютере, так и на смартфоне, как показано в режиме предварительного просмотра Stripo. Обратите внимание на то, как в предварительном просмотре для мобильных устройств был адаптирован макет с одним столбцом, чтобы соответствовать характеристикам телефонов.
Мне нравится Stripo, потому что это веб-сайт, который вы можете быстро посетить, чтобы найти шаблон, соответствующий вашим целям. Вы можете рассмотреть Stripo, если хотите протестировать адаптивные электронные письма или вдохновиться дизайном.
4. Постоянный контакт
Constant Contact предлагает более 200 профессиональных шаблонов электронной почты, к которым можно получить доступ после регистрации. Если вы посмотрите на следующий пример, вы увидите, что платформа предлагает адаптивные шаблоны писем:
Источник
В шаблонах постоянных контактов есть возможность редактирования перетаскиванием, возможность добавления опросов, функции электронной коммерции и инструмент для создания библиотеки фотографий. Все эти функции могут помочь создать электронную почту, которую хотят видеть подписчики.
Использование такой службы, как Constant Contact, полезно, потому что определенные инструменты позволяют поддерживать согласованность, как в предыдущем примере. Вы можете сказать, что отзывчивый характер электронной почты не влияет ни на один из элементов дизайна.
Теперь, когда мы рассмотрели некоторые варианты шаблонов, давайте рассмотрим другой способ заставить работать адаптивные электронные письма и лучшие практики.
Как написать ответ по электронной почте
Если у вас есть опыт программирования, вы можете отправить ответ по электронной почте, используя код.
Некоторые из лучших практик при написании адаптивных писем включают в себя обеспечение масштабируемости и гибкости адаптивного электронного письма. Также помните, что для адаптивных электронных писем требуются медиа-запросы CSS для изменения полей, которые установлены на поля, которые являются плавными.
Еще одна лучшая практика для адаптивного дизайна электронной почты – использовать более крупные шрифты, которые легко читать на небольших экранах. Макеты с одним столбцом также легче масштабировать, поэтому, если простые макеты подходят для ваших веб-страниц, определенно рассмотрите их для адаптивной электронной почты.
В следующий раз, когда вы создадите почтовую кампанию, рекомендуется не дорабатывать какие-либо макеты, пока вы не увидите, как они выглядят при различных разрешениях экрана. Многие люди получают доступ к электронной почте с мобильных устройств только для того, чтобы это было проще. Простой способ проверить эффективность своего электронного письма – отправить его себе или команде в качестве теста – сравнивается ли оно с другими адаптивными маркетинговыми письмами в вашем почтовом ящике?
