Что можно и чего нельзя делать в дизайне электронной почты
Опубликовано: 2019-01-25Электронный маркетинг — это идеальная и доступная маркетинговая стратегия для малого бизнеса, который хочет быстро создать клиентскую базу и получать прибыль с минимальными вложениями. Но прежде чем вы сможете заставить людей нажимать на ваши сообщения, вы должны привлечь их внимание. Дизайн играет решающую роль в успехе маркетинга, поэтому помните о следующих правилах дизайна электронной почты, когда вы разрабатываете свои кампании по электронной почте.
Советы по дизайну макета электронной почты
От верхнего колонтитула до нижнего колонтитула ваш макет электронной почты должен естественным образом направлять взгляд читателей на преимущества, вызывающие желание, и на убедительные призывы к действию (CTA), которые мотивируют ответ.
Что делать
- Сбалансируйте контент и используйте больше текста, чем изображений — не менее 60 процентов текста и 40 процентов изображений.
- Включите много пустого пространства для чистого вида, который визуально разделяет элементы дизайна.
- Расставьте приоритеты в иерархии контента, чтобы самый важный контент размещался первым — в верхней части страницы.
- Используйте адаптивный шаблон, оптимизированный как для настольных компьютеров, так и для мобильных устройств (50 процентов электронных писем открываются на мобильных устройствах).
- Сделайте ваш контент удобным для сканирования, чтобы получателям не нужно было читать каждое слово, чтобы понять вашу электронную почту и щелкнуть CTA.
- Используйте заголовки и подзаголовки для поддержания визуальной организации.
В приведенном ниже примере от Panera Bread много пустого пространства, изображения и текст умело смешаны, а для разделения разделов используются подзаголовки. Все эти элементы работают вместе, чтобы создать электронное письмо, которое можно сканировать и сделать визуально привлекательным.
Не
- Не используйте одно изображение для своих электронных писем; многие почтовые клиенты не будут автоматически отображать изображения.
- Не используйте длинный блок текста в любом месте вашего электронного письма. Вместо этого разбейте контент на краткие разделы.
- Не делайте ваши электронные письма слишком длинными. Некоторые почтовые клиенты обрезают длинные сообщения (например, Gmail обрезает любые сообщения размером более 102 КБ). Обрезанные сообщения не только вредны для маркетинга и пересылки, но и могут нарушать правила CAN-SPAM, поскольку скрывают ссылки для отписки.
- Не впихивайте в свои электронные письма все, что только можно придумать; вместо этого используйте электронные письма в качестве инструментов для мотивации кликов для получения дополнительной информации и покупок.
- Не используйте темный, узорчатый или фоновый рисунок для своего контента (можно иметь темный фон за более светлой основной областью содержимого, что может сделать ваше электронное письмо популярным, хотя оно не будет отображаться во всех почтовых клиентах).
- Не делайте свой макет слишком загроможденным — пусть ваши электронные письма будут простыми, с легко усваиваемыми сводками и четкими призывами к действию.
Советы по цвету по электронной почте
Ваш выбор цвета электронной почты может помочь вашему бренду и сообщению выделиться. Хотя экспериментировать с цветами весело, ваш выбор должен быть стратегическим.
Что делать
- Ограничьте количество используемых цветов (вы можете подобрать цвета, соответствующие вашему бренду и веб-сайту, или выбрать цвета, характерные для вашей текущей акции).
- Сравните темный текст со светлым фоном.
- При желании заполните верхние и нижние колонтитулы основным цветом или используйте цветные линии, чтобы отделить их от основного содержимого.
- Используйте изображения, чтобы добавить цвета в дизайн письма.
Красный и желтый в электронном письме доктора Мартенса ниже добавляют приятную цветовую гамму и дополняют черно-белые элементы дизайна. Ограниченная цветовая палитра привлекает внимание читателя к тексту, в то время как более насыщенный дизайн может отвлечь внимание от самой важной информации.
Не
- Не используйте цветной основной текст — оставьте его черным или темно-серым.
- Не используйте темный фон для области основного контента.
- Не используйте в дизайне более двух цветов (разноцветные логотипы и изображения — это нормально).
- Не используйте цвета, которые конфликтуют или непривлекательны по другим причинам.
Шрифты электронной почты и советы по типографике
Сохраняйте типографику простой для разборчивых электронных писем, привлекающих внимание читателей.
Что делать
- Используйте только один или два шрифта в своем электронном письме.
- Используйте шрифты без засечек для основного текста; для заголовков и подзаголовков можно использовать шрифты без засечек или с засечками.
- Используйте простые, легко читаемые, веб-безопасные шрифты. Примеры включают Open Sans, Helvetica, Courier, Raleway, Droid Serif, Arial, Tahoma, Times New Roman, Georgia и Trebuchet MS.
- Размер шрифтов основного текста от 14 до 16 пунктов, шрифт заголовков от 22 до 24 пунктов для лучшей читабельности.
- Используйте шрифты, соответствующие вашему брендингу и сообщениям.
Domino's немного позабавился со шрифтами, которые они используют в этом письме. Но даже их более стилизованный текст легко читается.
Не
- Используйте рукописные шрифты или другие необычные шрифты, которые могут быть трудночитаемыми.
- Используйте пользовательские шрифты, которые могут отображаться некорректно на всех устройствах.
- Используйте цветные шрифты, кроме заголовков (темно-серый или черный лучше всего подходят для основного текста).
Советы по смайликам по электронной почте
Использование смайликов брендами выросло на 609 процентов в годовом исчислении в цифровых коммуникациях. Вот как правильно их использовать.
Что делать
- Включите смайлики, чтобы сэкономить место, но при этом сказать больше в темах электронных писем (держите ваши темы ниже «волшебного» порога в 49 символов).
- Используйте эмодзи, чтобы темы писем выделялись в почтовых ящиках получателей.
- Используйте только соответствующие смайлики, которые помогают передать ваше сообщение и вызвать волнение.
- Добавьте индивидуальности с помощью смайликов в приветствиях и подписях.
- Используйте смайлики для выделения сделок и специальных предложений в основном тексте.
Строка темы выше от Tarte Cosmetics с двумя смайликами в виде ананасов стала идеальной отправной точкой для электронного письма об их новой палитре для макияжа в форме ананаса:
Не
- Не злоупотребляйте смайликами — они должны служить значимыми акцентами, а не основной частью вашего сообщения.
- Не используйте сбивающие с толку смайлики. Используйте общепризнанные смайлики: смайлики, кофейные кружки и т. д.
- Не полагайтесь исключительно на смайлики, чтобы подчеркнуть ключевые моменты. Они могут отображаться не во всех почтовых клиентах, поэтому их следует использовать для усиления вашего сообщения.
Советы по изображениям по электронной почте
Изображения стоят тысячи слов, но в электронных письмах их следует использовать умеренно.
Что делать
- Сохраняйте изображения с разрешением 72 ppi/dpi и оптимизируйте их для Интернета для быстрой загрузки электронных писем.
- Используйте изображения JPG и PNG в электронных письмах. Используйте GIF-файлы с осторожностью и только в том случае, если они не слишком велики.
- Разместите изображения и текст в шахматном порядке, чтобы создать четкий и понятный макет.
- Используйте привлекательные изображения, которые вызывают желание и рассказывают вашу историю: например, ваши продукты в использовании или счастливые клиенты.
- Используйте замещающий текст изображения, чтобы читатели могли прочитать, о чем ваши изображения, если их почтовые клиенты не отображают их. Хороший альтернативный текст по-прежнему будет мотивировать клики.
- Размер изображений для дисплеев Retina (в два раза больше, чем у обычных дисплеев).
В приведенном ниже электронном письме от Whosits & Whatsits используются высококачественные изображения для продвижения новой линейки головных уборов. Модели показаны в действии, что оживляет фотографии.
В этом электронном письме от Whosits & Whatsits используются высококачественные изображения для продвижения новой линейки головных уборов. Модели показаны в действии, что оживляет фотографии.
Не
- Не используйте изображения для всей электронной почты, так как они могут не отображаться автоматически во многих почтовых клиентах.
- Не используйте изображения для кнопок призыва к действию, так как они могут не отображаться.
- Не полагайтесь на изображения, чтобы рассказать свою историю; оно будет потеряно почтовыми клиентами, которые не отображают изображения автоматически.
- Не используйте сложные или запутанные изображения, которые могут оттолкнуть клиентов.
- Не увеличивайте размер изображений для электронных писем — всегда уменьшайте размер для получения четких, привлекательных изображений для электронных писем.
Советы по призыву к действию (CTA) по электронной почте
Ваш призыв к действию способствует успеху электронной почты. Убедитесь, что это эффективно с этими советами.
Что делать
- Сделайте свой призыв к действию цветной кнопкой, которая будет выделяться на фоне остального содержимого вашего письма.
- Текст призыва к действию должен быть коротким и содержательным: купите сейчас, узнайте больше, прочитайте больше и т. д. Ознакомьтесь с этим списком из 50 призывов к действию, которые продают больше идей.
- Поместите свой первый призыв к действию в верхней части страницы и повторите его ниже, если это необходимо (две или три кнопки призыва к действию на письмо — хорошее практическое правило).
- Сделайте кнопки достаточно большими, чтобы читатели не пропустили их.
Темно-серые кнопки призыва к действию Uniqlo находятся в верхней части страницы и выделяются на светлом фоне письма:
Не
- Не перегружайте электронную почту различными призывами к действию. Вместо этого сосредоточьтесь на подталкивании читателей к одному действию. Если у вас их больше, отправьте несколько писем.
- Не прячьте свой призыв к действию. Вы хотите, чтобы ваш призыв к действию выделялся, чтобы его заметили и на него кликали.
- Не отклоняйтесь от темы. Ваш призыв к действию должен соответствовать вашей теме, чтобы читатели знали, чего ожидать, когда откроют ваше электронное письмо, и чтобы они соответствовали правилам CAN-SPAM (без обмана!).
Советы по заголовку и нижнему колонтитулу электронной почты
Добейтесь профессионального вида с помощью этих советов по дизайну верхних и нижних колонтитулов электронной почты.
Что делать
- Включите свой логотип или название компании в заголовок, чтобы идентифицировать свой бренд.
- Добавьте текст тизера перед заголовком, который будет отображаться в строке темы во многих почтовых клиентах и даст вам еще одну возможность повлиять на открытие.
- Используйте один и тот же верхний и нижний колонтитулы во всех кампаниях для единообразия брендинга.
- Включите контактную информацию, дополнительные ресурсы, такие как ссылки на социальные сети и ссылки с добавленной стоимостью, ссылки для отказа от подписки и любой законный мелкий шрифт в нижнем колонтитуле.
В рекламном письме ниже логотип Lucky Brand — это первое, что вы видите, когда открываете его. Ритейлер одежды всегда включает ссылки на социальные сети в нижние колонтитулы электронной почты.
Не
- Не создавайте сложный дизайн для верхнего или нижнего колонтитула — делайте его простым, чтобы читатели могли добраться до сути вашего письма.
- Не добавляйте много элементов навигации в верхний или нижний колонтитулы. Максимально упростите, чтобы вы могли эффективно брендировать свои электронные письма, не мешая своему сообщению.
- Не включайте слишком много текста в верхний или нижний колонтитул — опять же, простота является ключевым фактором.
Всякий раз, когда вы работаете с дизайном электронной почты, помните, что лучше всего убедиться, что новые элементы дизайна правильно отображаются на каждой платформе и в любом браузере; к счастью, тестовый комплект от VerticalResponse упрощает эту задачу. И, вооружившись этими советами, вы сможете создавать привлекательные электронные письма, которые будут открываться, мотивировать клики и стимулировать продажи.
Присоединяйтесь к 140 000 владельцев малого бизнеса
Примечание редактора: эта статья была первоначально опубликована в 2016 году и была переписана для обеспечения точности и актуальности.