12+ лучших практик для дизайна макетов email-маркетинга

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

7 основных элементов макета электронной почты

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

Каждое электронное письмо состоит из семи основных элементов:

• Заголовок и метаданные
• Прехедер
• Логотип и цвета
• Картинки
• Тело
• Кнопки призыва к действию (CTA)
• Нижний колонтитул

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

1. Заголовок и метаданные

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

Эффектная тема письма

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

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

Вот несколько полезных советов по написанию отличной темы письма:

• Будьте кратки. Идея состоит в том, чтобы избежать сокращения строки темы в почтовых ящиках.
• Будь честным. Используйте строку темы, чтобы сообщить получателю, что находится внутри электронного письма. Не пытайтесь обманывать – никаких «приманок и подмен».
• Будьте максимально проницательны, но не слишком. Уточните у своей команды, уместна ли шутка.
• Избегайте спам-триггерных фраз (таких как «БЕСПЛАТНО» или «$$$») и чрезмерной пунктуации.

2. Прехедер

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

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

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

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

3. Логотип

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

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

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

4. Изображения

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

Изображения должны быть четкими и в высоком разрешении, но не настолько большими, чтобы загрузка занимала слишком много времени. Стремитесь к размеру файла примерно 1 МБ и не более 5 МБ. Слишком маленькие изображения могут выглядеть пикселизированными, а ваше электронное письмо будет выглядеть непрофессионально. Когда они слишком большие, почтовым клиентам ваших читателей может потребоваться много времени для их загрузки или, что еще хуже, они могут направить вашу электронную почту в папку со спамом.

5. Тело

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

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

• Текст
• Картинки
• Разделители
• Кнопки
• Распорки
• Видео
• Ссылки на социальные сети
• Ссылки на другие элементы контента, такие как ваш блог

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

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

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

6. Кнопки призыва к действию

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

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

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

7. Нижний колонтитул

Нижний колонтитул — это раздел в самом низу каждого письма. Это позволяет вам вставлять специальную информацию, требуемую правилами, такими как CAN-SPAM Act, не вмешиваясь в основной дизайн.

Обязательная информация в футере:

• Название вашей компании и физический адрес
• Способ для ваших получателей обновить свои профили
• Ссылка на отмену подписки
• Политика конфиденциальности вашей компании

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

12+ лучших практик дизайна макетов электронной почты

1. Дизайн с учетом мобильных устройств

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

Когда дело доходит до дизайна электронной почты, ориентируйтесь на мобильные устройства. Большинство почтовых клиентов теперь автоматически меняют макеты электронной почты для мобильных устройств, в то время как другие по-прежнему этого не делают. Используйте адаптируемые макеты, шаблоны и каскадные таблицы стилей (CSS), чтобы гарантировать, что ваши электронные письма реагируют.

Придерживайтесь макета с одним столбцом, когда это целесообразно, и никогда не используйте более трех столбцов. Убедитесь, что шрифты, которые вы используете, и призывы к действию (CTA) большие, четкие и простые для клика (46 x 46 пикселей — идеальный размер для мобильных CTA). Всегда проверяйте свои электронные письма на разных почтовых клиентах и ​​устройствах, чтобы обеспечить правильное отображение.

2. Придерживайтесь ширины 600 пикселей.

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

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

3. Избегайте использования фоновых изображений

Фоновые изображения не поддерживаются некоторыми почтовыми клиентами (кашель, Outlook), поэтому используйте их на свой страх и риск. Если вам необходимо использовать фоновое изображение, убедитесь, что оно не содержит важной информации или изображений.

4. Сбалансируйте изображения и текст

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

Чтобы решить эти проблемы, стремитесь к сочетанию графики и текста 50/50. Вам нужна графика, потому что она привлекает внимание читателя и рассказывает вашу историю быстрее, чем текст. Тем не менее, убедитесь, что вы продолжаете передавать свое повествование. В дополнение к основному тексту включите замещающий текст (а также резервный цвет фона) для каждого изображения.

Вот как Medium сбалансировал свои изображения с текстом в макете электронной почты:

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

5. Оптимизируйте свои изображения

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

• Размер изображения должен быть оптимизирован. Чем больше изображение, тем дольше загружается электронное письмо. Делайте фотографии как можно меньше, сохраняя при этом высокое качество.
• Объявите ширину и высоту изображения. Когда фотографии не загружаются, указание точного размера ваших фотографий поможет вашей электронной почте сохранить свою структуру. Никогда не превышайте ширину 600 пикселей.
• Для размещения изображений используйте абсолютные URL-адреса. Абсолютные URL-адреса предпочтительнее относительных URL-адресов по целому ряду причин. Для всех фотографий, отправленных по электронной почте, используйте абсолютные ссылки и размещайте их на своем веб-сайте.
• Следует избегать файлов PNG. PNG не поддерживаются всеми почтовыми клиентами. Вместо этого используйте JPG.
• Не используйте видео. Flash и JavaScript требуют много времени для загрузки и часто направляют вашу электронную почту в спам. Если вы действительно хотите поделиться видео, используйте неподвижное изображение со ссылкой на страницу, содержащую видео, а не встраивайте видео в само электронное письмо. (Тем не менее, рассмотрите возможность включения GIF-файлов для повышения вовлеченности.)

6. Придерживайтесь распространенных шрифтов

При выборе шрифта для маркетинговых писем придерживайтесь стандартных системных шрифтов, таких как Arial, Helvetica, Georgia, Tahoma, Times New Roman и Verdana. Другие шрифты могут не поддерживаться некоторыми почтовыми клиентами, поэтому они могут отображаться неправильно, если вы не выберете резервный веб-безопасный шрифт.

Размер шрифта не менее важен для чтения электронной почты. Для основного материала минимальный рекомендуемый размер шрифта составляет 14 пикселей, тогда как для заголовков минимальный рекомендуемый размер шрифта составляет 22 пикселя.

7. Создайте привлекающий внимание заголовок

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

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

Если вы хотите привлечь внимание только к своему логотипу, отметьте его в центре, как показано ниже от Artifact Uprising:

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

8. Разместите свое ключевое сообщение «в верхней части страницы».

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

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

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

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

9. Сохраняйте основной текст простым

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

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

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

10. Добавьте кнопки социальных сетей

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

Разве не правда, что ваша конечная цель как цифрового маркетолога — завоевать сторонников бренда? Что может быть более полезным для вашего бренда, чем то, что люди делятся вашим контентом в своих социальных сетях?

Включите ссылки на социальные сети в конце всех маркетинговых электронных писем, чтобы им было проще. Если призыв к читателям поделиться содержимым электронной почты кажется слишком убедительным или нереалистичным, «Следуйте за нами!» вместо них можно использовать кнопки. У вас есть мобильное приложение? Продвигайте его и здесь!

Нам нравится, как Uber показал свои значки социальных сетей в тонкой, соответствующей бренду манере:

11. Используйте нижний колонтитул

Нижний колонтитул, которым часто пренебрегают, является одним из наиболее важных аспектов любого маркетингового электронного письма. Нижний колонтитул — важная часть макета электронной почты. Прежде всего, все коммерческие электронные письма должны соответствовать Закону о борьбе со спамом, который требует, чтобы вы предоставляли ссылку для отказа, а также название и физический адрес вашей компании в каждом отправляемом вами электронном письме. Вы должны дополнительно объяснить, почему получатели получают это письмо (т.е. они подписались в какой-то момент).

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

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

12. Помните о простоте

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

13. Тестируйте и улучшайте

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

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

Упростите дизайн макета электронного маркетинга с помощью AVADA Marketing Automation

AVADA Marketing Automation — это мощный инструмент для электронной почты и SMS-маркетинга, который поможет вам легко создать свою электронную почту с помощью конструктора электронной почты с функцией перетаскивания. С этим инструментом для создания электронных писем будет проще простого, потому что вам нужно всего лишь перетаскивать элементы электронной почты без необходимости кодирования. Он также предоставляет все функции, необходимые для создания маркетинговых кампаний по электронной почте и управления ими.

Заключительные слова

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