Дизайны, шаблоны и примеры на 2023 год

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

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

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

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

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

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

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

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

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

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

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

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

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

Отзывчивый дизайн электронной почты

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

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

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

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

Кодирование адаптивного письма

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

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

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

• Используйте селектор «@media» и укажите «экран». Это указывает на то, что код повлияет на устройства с экраном.
• Установите максимальную ширину в пикселях. Указывает размер экрана, на котором код будет действовать.
• Укажите любые руководства по стилю CSS, которым вы хотите следовать на этом конкретном экране.

Давайте посмотрим на код ниже.

Экран @media и (максимальная ширина: 600 пикселей)

тело

размер шрифта: 30px;

При применении к CSS электронной почты основной текст будет отображаться размером 30 пикселей для экранов шириной 600 пикселей или меньше.

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

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

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

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

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

Затем вы можете прочитать о некоторых из наших любимых адаптивных дизайнов электронной почты.

1. Информационный бюллетень ТОМС

В информационном бюллетене TOMS основное различие между настольной и мобильной версиями заключается в размещении и размере медийных объявлений.

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

Источник изображения

2. Метрополитен-музей

Как видно из информационного бюллетеня TOMS, адаптивный дизайн электронной почты помогает размещать контент таким образом, чтобы он был визуально привлекательным и легким для восприятия. Этот пример из МЕТ ничем не отличается.

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

Источник изображения

3. Шелковица

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

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

Источник изображения

Адаптивные шаблоны электронной почты

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

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

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

Теперь давайте посмотрим на некоторые параметры шаблона.

1. ХабСпот

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

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

Источник изображения

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

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

2. Монитор кампаний

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

Источник изображения

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

Шаблоны CampaignMonitor часто бесплатны, поэтому это хороший выбор, если у вас минимальный бюджет.

3. Стрипо

Stripo предлагает более 300 бесплатных HTML-шаблонов электронной почты. Вы можете выбрать шаблоны по отрасли, сезону, типу и функции. Например, вот шаблон из раздела их бизнес-индустрии.

Источник изображения

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

Обратите внимание, что макет с одним столбцом был принят в мобильной версии, чтобы соответствовать спецификациям телефонов.

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

4. Постоянный контакт

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

Источник изображения

Шаблоны Constant Contact имеют редактирование с помощью перетаскивания, возможность добавления опросов, функции электронной коммерции и инструмент для библиотеки фотографий. Все эти функции могут помочь создать электронную почту, которую подписчики хотят видеть.

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

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

Рекомендации по адаптивной электронной почте

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

• Убедитесь, что ваша адаптивная электронная почта масштабируема и гибка. Предварительно просмотрите электронное письмо на разных устройствах, чтобы убедиться, что ваше сообщение отвечает требованиям.
• Если вы пишете код для своей электронной почты, помните, что медиа-запросы CSS изменяют фиксированные поля на переменные.
• Используйте более крупный шрифт, который будет легко читаться на небольших экранах.
• Одноколоночные макеты легче масштабировать. Если простые макеты хороши для ваших веб-страниц, обязательно рассмотрите их для адаптивных электронных писем.

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

Простой способ проверить эффективность вашей электронной почты — отправить ее себе или своей команде в качестве теста. Сопоставляется ли она с другими ответными маркетинговыми электронными письмами в вашем почтовом ящике? Если да, то вы готовы к отправке.

Начало работы с адаптивными электронными письмами

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

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

Наконец, не бойтесь экспериментировать. Вы можете проводить A/B-тестирование различных адаптивных дизайнов, пока не найдете наиболее подходящий макет.

Вскоре вы будете рассылать ответные электронные письма и повышать открываемость.