К 2023 году мобильные устройства, вероятно, превзойдут настольные компьютеры в качестве основного устройства для открытия электронной почты. Фактически, HubSpot обнаружил, что 46 процентов всей электронной почты теперь открывается на мобильных устройствах. Если вы не разрабатываете электронные письма для мобильных устройств, вы оставляете много времени и денег на столе.
- Подтверждение адреса электронной почты: Застраховать вас электронные письма аутентифицированы к отправляющему домену и IP адрес имеет решающее значение для доступа к почтовому ящику, а не для пересылки в папку нежелательной почты или спама. Конечно, также важно, чтобы вы предоставили средства для отказа от подписки на вашу электронную почту с платформой, которая включает ссылку для отказа от подписки.
- Отзывчивый дизайн: HTML электронная почта должна быть разработан, чтобы быть отзывчивым, что означает, что он может адаптироваться к размеру экрана устройства, на котором он просматривается. Это гарантирует, что электронная почта будет хорошо выглядеть как на настольных компьютерах, так и на мобильных устройствах.
- Четкая и лаконичная тема: Четкая и лаконичная строка темы важна для мобильных пользователей, поскольку они могут видеть только первые несколько слов строки темы на панели предварительного просмотра электронной почты. Оно должно быть коротким и точно отражать содержание письма. Оптимальная длина символов в строке темы электронной почты может варьироваться в зависимости от ряда факторов, таких как содержание электронной почты, аудитория и используемый почтовый клиент. Тем не менее, большинство экспертов рекомендуют, чтобы темы электронных писем были короткими и содержательными, обычно между 41-50 символами или 6-8 словами. На мобильных устройствах строки темы, длина которых превышает 50 символов, могут быть обрезаны, а в некоторых случаях могут отображаться только первые несколько слов строки темы. Это может затруднить понимание получателем основного сообщения электронной почты и снизить вероятность того, что электронная почта будет открыта.
- Прехедер: Предварительный заголовок электронной почты — это краткое изложение содержимого электронного письма, которое отображается рядом с строкой темы или под ней в папке «Входящие» почтового клиента. Это важный элемент, который может повлиять на скорость открытия ваших электронных писем при оптимизации. Большинство клиентов включают HTML и CSS, чтобы обеспечить правильную настройку текста прехедера.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
/* desktop styles here */
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
/* mobile styles here */
}
</style>
</head>
<body>
<!-- Intro text for preview -->
<div style="display:none; max-height:0px; overflow:hidden;">
This is the intro text that will appear in the email preview, but won't be visible in the email itself.
</div>
<!-- Main email content -->
<div style="max-width:600px; margin:0 auto;">
<!-- Content goes here -->
</div>
</body>
</html>
- Одноколоночный макет: Электронные письма, созданные с одноколоночным макетом, легче читать на мобильных устройствах. Содержание должно быть организовано в логической последовательности и представлено в простом, удобном для чтения формате. Если у вас несколько столбцов, с помощью CSS можно изящно организовать столбцы в один столбец.
Вот HTML-макет электронной почты который составляет 2 столбца на рабочем столе и сворачивается в один столбец на мобильных экранах:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.right {
order: 2;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
Вот HTML-макет электронной почты который составляет 3 столбца на рабочем столе и сворачивается в один столбец на мобильных экранах:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="col left">
<!-- Content for left column -->
</div>
<div class="col middle">
<!-- Content for middle column -->
</div>
<div class="col right">
<!-- Content for right column -->
</div>
</div>
</body>
</html>
- Светлый и темный режим: Большинство Почтовые клиенты поддерживают светлый и темный режим CSS
prefers-color-schemeдля удовлетворения предпочтений пользователя. Обязательно используйте типы изображений с прозрачным фоном. Вот пример кода.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Light mode styles */
body {
background-color: #ffffff;
color: #333333;
}
.container {
background-color: #f9f9f9;
}
.text {
border: 1px solid #cccccc;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #f9f9f9;
}
.container {
background-color: #333333;
}
.text {
border: 1px solid #f9f9f9;
}
}
/* Common styles for both modes */
.container {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.col {
flex: 1;
margin: 10px;
}
img {
max-width: 100%;
height: auto;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col">
<img src="image1.jpg" alt="Image 1">
<div class="text">
<h2>Heading 1</h2>
<p>Text for column 1 goes here.</p>
</div>
</div>
<div class="col">
<img src="image2.jpg" alt="Image 2">
<div class="text">
<h2>Heading 2</h2>
<p>Text for column 2 goes here.</p>
</div>
</div>
<div class="col">
<img src="image3.jpg" alt="Image 3">
<div class="text">
<h2>Heading 3</h2>
<p>Text for column 3 goes here.</p>
</div>
</div>
</div>
</body>
</html>
- Крупный, разборчивый шрифт: Размер и стиль шрифта следует выбирать таким образом, чтобы текст легко читался на маленьком экране. Используйте размер шрифта не менее 14 пунктов и избегайте использования шрифтов, которые трудно читать на маленьких экранах. Обычно используемые шрифты имеют высокую вероятность согласованного отображения в разных почтовых клиентах, поэтому использование Arial, Helvetica, Times New Roman, Georgia, Verdana, Tahoma и Trebuchet MS обычно является безопасным шрифтом. Если вы используете пользовательский шрифт, обязательно укажите резервный шрифт в своем CSS:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Custom font */
@font-face {
font-family: 'My Custom Font';
src: url('my-custom-font.woff2') format('woff2'),
url('my-custom-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Fallback font */
body {
font-family: 'My Custom Font', Arial, sans-serif;
}
/* Other styles */
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0;
}
</style>
</head>
<body>
<h1>My Custom Font Example</h1>
<p>This text uses the custom font 'My Custom Font'. If the font is not supported, the fallback font 'Arial' will be used instead.</p>
</body>
</html>
- Оптимальное использование изображений: Изображения могут замедлять время загрузки и могут не отображаться должным образом на всех мобильных устройствах. Используйте изображения экономно и убедитесь, что они большие и сжатый для мобильного просмотра. Обязательно заполните альтернативный текст для ваших изображений на случай, если почтовый клиент заблокирует их. Все изображения должны храниться и ссылаться на них с защищенного веб-сайта (SSL). Вот пример кода адаптивных изображений в электронном письме в формате HTML.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS for desktop styles */
@media only screen and (min-width: 600px) {
.container {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1;
padding: 10px;
}
.col.left {
order: 1;
}
.col.middle {
order: 2;
}
.col.right {
order: 3;
}
.single-pane {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}
}
/* CSS for mobile styles */
@media only screen and (max-width: 599px) {
.container {
display: block;
}
.col {
width: 100%;
padding: 10px;
}
}
</style>
</head>
<body>
<!-- 3-column section with images -->
<div class="container">
<div class="col left">
<img src="image1.jpg" alt="Image 1">
<!-- Content for left column -->
</div>
<div class="col middle">
<img src="image2.jpg" alt="Image 2">
<!-- Content for middle column -->
</div>
<div class="col right">
<img src="image3.jpg" alt="Image 3">
<!-- Content for right column -->
</div>
</div>
</body>
</html>- Удалить призыв к действию (призыв к действию): Четкий и заметный CTA важен в любом электронном письме, но особенно важен в электронном письме, оптимизированном для мобильных устройств. Убедитесь, что CTA легко найти и он достаточно велик, чтобы на него можно было нажать на мобильном устройстве. Если вы включаете кнопки, вы можете убедиться, что вы также написали их в CSS со встроенными тегами стиля:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Desktop styles */
.button {
display: inline-block;
background-color: #4CAF50;
color: #ffffff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
/* Mobile styles */
@media only screen and (max-width: 600px) {
.button {
display: block;
width: 100%;
}
}
</style>
</head>
<body>
<h1>Sample Responsive Email</h1>
<p>This is an example of a responsive email with a button.</p>
<a href="#" class="button" style="background-color: #4CAF50; color: #ffffff; text-decoration: none; padding: 10px 20px; border-radius: 5px; font-size: 16px; font-weight: bold;">Click Here</a>
</body>
</html>- Краткое и лаконичное содержание: Содержимое электронной почты должно быть кратким и по существу. Ограничение на количество символов для электронной почты в формате HTML может различаться в зависимости от используемой программы электронной почты. Однако большинство почтовых клиентов устанавливают максимальный размер электронной почты, обычно от 1024 до 2048 килобайт (КБ), который включает как HTML-код, так и любые изображения или вложения. Используйте подзаголовки, маркеры и другие приемы форматирования, чтобы содержимое было легко сканировать при прокрутке и чтении на маленьком экране.
- Интерактивные элементы: Включение интерактивные элементы которые привлекут внимание вашего подписчика, увеличат вовлеченность, понимание и коэффициент конверсии вашей электронной почты. Анимированные GIF-файлыТаймеры обратного отсчета, видео и другие элементы поддерживаются большинством почтовых клиентов для смартфонов.
- Персонализация: Персонализация приветствия и контента для конкретного подписчика может значительно повысить вовлеченность, просто убедитесь, что все сделано правильно! Например Важно иметь запасные варианты, когда в поле имени нет данных.
- Динамический контент: Сегментация и персонализация контента могут снизить количество отписок и поддерживать вовлеченность ваших подписчиков.
- Интеграция кампании: Большинство современных провайдеров услуг электронной почты имеют возможность автоматически прикреплять Строки запроса кампании UTM для каждой ссылки, чтобы вы могли просматривать электронную почту как канал в аналитике.
- Предпочтительный центр: Электронный маркетинг слишком важен, чтобы просто подписаться или отказаться от электронных писем. Включение центра предпочтений, где ваши подписчики могут изменить частоту получения электронных писем и то, какой контент важен для них, — это фантастический способ поддерживать сильную программу электронной почты с заинтересованными подписчиками!
- Тест, тест, тест: Убедитесь, что вы тестируете свою электронную почту на нескольких устройствах или используете приложение для Предварительный просмотр писем в почтовых клиентах чтобы убедиться, что он хорошо выглядит и хорошо работает на экранах разных размеров и в операционных системах ДО отправки. лакмус сообщает, что топ-3 самых популярных мобильных открытых сред остались прежними: Apple iPhone (iOS Mail), Google Android, Apple iPad (iPadOS Mail). Кроме того, протестируйте варианты строк темы и контента, чтобы улучшить показатели открываемости и кликабельности. Многие почтовые платформы теперь включают автоматизированное тестирование, которое выберет список, определит выигрышный вариант и отправит лучшее письмо оставшимся подписчикам.
Если вашаак`o. Хайбридж имеет опыт внедрения практически любого поставщика услуг электронной почты (ЭСП).
