Наиболее распространенные ошибки при кодировании электронной почты и как их избежать

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

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

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

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

Технические характеристики устройства пользователя

Следует учитывать как минимум две технические характеристики любого устройства:

1. Разрешение экрана - размер экрана в пикселях. Например, iPhone X имеет разрешение экрана 1125 × 2436 пикселей. Если ваше электронное письмо содержит два столбца текста по 600 пикселей в каждом столбце, оно будет отображаться неправильно.
2. PPI, или пикселей на дюйм - количество пикселей на одном дюйме экрана. PPI iPhone X составляет 458. Представьте: вам нужно добавить кнопку действия в свое электронное письмо. Если кнопка меньше 44 точек, что для iPhone X означает 132 × 132 пикселей, она займет менее одной трети квадратного дюйма экранного пространства, и пользователь вряд ли сможет ее нажать.

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

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

Во-первых, вы должны добавить медиа-запросы в head вашего электронного письма. Например, запрос @media screen и (max-width: 600px) означает, что дизайн электронного письма будет оптимизирован, если ширина экрана меньше 600 пикселей. Если ширина экрана больше 600 пикселей, пользователь увидит версию этого письма с фиксированной шириной.

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

 <таблица>
<tr>
    <td> ... </td>
</tr>
</table>

Затем вы добавляете стиль для каждой ячейки, например:

 <td> <img src = "http://somewebsite.com/someimage.jpg" width = "600" alt = ""> </td>

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

Почтовый клиент

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

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

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

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

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

Например, Apple Mail для iOS не поддерживает:

• свойство CSS inline-size ;
• @media (orientation) медиа-запрос;
• якорные ссылки;
• Форматы изображений HDR, PPM, SVG и многое другое.

Gmail поддерживает различные свойства CSS и медиа-запросы, помимо:

• box-shadow, text-shadow, и некоторые другие свойства CSS;
• @media (prefers-color-scheme) медиа-запрос и многое другое.

Распространенные ошибки кодирования электронной почты и как их избежать

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

• CSS2 вместо CSS3,
• HTML4 вместо HTML5,
• цвет вместо фоновых изображений,
• table-layout вместо <div> ,
• встроенный CSS вместо наборов стилей или блоков <style> .

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

Нет текстовой версии

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

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

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

Использование JavaScript, ActiveX, Flash и т. Д.

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

Профилактика. Сохраните языки, которые вы используете для кодирования электронных писем в HTML и CSS. Если вам нужно добавить видео или аудио, загрузите его на сайт и дайте ссылку на него.

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

Слишком много перенаправлений

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

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

Укороченные ссылки

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

Профилактика. Не используйте сокращенные ссылки. Если ваша цель состоит в том, чтобы ваша электронная почта выглядела аккуратно, без длинных URL-адресов, вам лучше использовать следующий HTML-тег: <a href="URL">...</a> . Вы можете вставить сюда любой URL-адрес, независимо от его длины.

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

Большой размер основного файла электронного письма

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

Взгляните на информационный бюллетень музыкального лейбла. При открытии через Gmail обрезается.

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

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

Профилактика. Ознакомьтесь с ограничениями размера тела письма вашего поставщика услуг электронной почты и почтовых клиентов, которые используют ваши подписчики. Например, Google заявляет, что максимальный размер тела письма составляет 200 КБ. Но широко рекомендуется ограничивать размер ваших писем 100 КБ, чтобы удовлетворить требования большинства почтовых клиентов. Фактически, письмо из приведенного выше примера имеет размер 136 КБ.

Слишком много шрифтов и цветов

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

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

Это сомнительный пример дизайна электронной почты: каждый блок имеет свои цвета; это большое количество отвлекает пользователя от самой важной информации.

Профилактика . Выбирайте удобные для электронной почты шрифты, такие как Arial, Comic Sans MS, Courier New, Times New Roman или Verdana: они поддерживаются большинством популярных почтовых клиентов. Размер шрифта вашего текста должен быть не менее 12-13 пикселей; в противном случае пользователю придется увеличивать масштаб вашего письма или напрягать глаза.

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

Копирование HTML-кода шаблона электронного письма из текстового редактора или веб-сайта

Потенциальные проблемы. Если вы используете Microsoft Word или что-то в этом роде для создания текста для электронной почты, а затем просто копируете его, вы рискуете столкнуться с ненужным форматированием, которое может испортить макет вашего электронного письма. А если вы копируете изображения или некоторые части текста с веб-сайта, в вашу электронную почту могут быть добавлены элементы JavaScript или Flash.

Профилактика. Чтобы закодировать электронное письмо, используйте текстовые редакторы, которые не добавляют собственное форматирование, например Блокнот для Windows или TextEdit для Mac. Есть также некоторые онлайн-инструменты, которые могут очистить ваше форматирование, например TextCleanr. Вы также можете использовать инструмент HTML Cleaner, который позволяет создавать электронные письма в удобном редакторе и одновременно проверять код.

Использование трехзначных цветовых кодов HEX

Потенциальные проблемы. Хотя трехзначные и шестизначные цветовые форматы должны быть эквивалентными, иногда почтовые клиенты отображают трехзначный формат несколько иначе. Например, с Gmail вы рискуете получить фиолетовый вместо запланированного черного: color: #000 превратится в color: #500050 .

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

Вложения

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

Профилактика. Дайте ссылку на страницу загрузки файла вместо добавления файла прямо в письмо.

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

Отсутствует замещающий текст

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

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

Профилактика. Добавьте атрибут alt ко всем используемым изображениям. Убедитесь, что вы делаете это правильно - добавив его в тег img : <img alt="text"> . Ограничьте замещающий текст 125 символами, включая пробелы. Обычно достаточно добавить пару слов, точно описывающих изображение. Если у вас есть место, вы можете добавить контекст к этому описанию.

Взгляните на отрывок из электронного письма от Sephora.

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

Макет только для изображений

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

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

Взгляните на это письмо от Эквида. Он имеет max-width: 570px дизайн, который включает макет таблицы и медиа-запросы, такие как max-width: 570px . В электронном письме сочетаются разные типы контента: красочное, увлекательное изображение и текст. Используется шестизначный формат цвета, например color:#979797 или color:#4A4A4A . В письме не так много изображений, поэтому размер его тела не слишком велик. Более того, не находите в письме ни сокращенных ссылок, ни переадресации. В целом это электронное письмо соответствует большинству рекомендаций, приведенных выше.

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

Еще один способ избежать ошибок при кодировании электронной почты

Есть одна правда: вы не сделаете ошибок при кодировании HTML, если не будете кодировать. К счастью, с SendPulse вас ждет разработка писем без кода.

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

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

Контрольный список для предотвращения распространенных ошибок при кодировании электронной почты HTML

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

• Добавьте текстовую версию в свои электронные письма.
• Не используйте JavaScript, ActiveX, Flash или другие подобные. Если вам нужно добавить видео или аудио, загрузите его на сайт и дайте ссылку на него.
• Старайтесь избегать переадресации, чтобы не увеличивать время загрузки веб-страницы.
• Не используйте сокращенные ссылки - преобразуйте фрагмент текста или изображение в ссылку с помощью HTML.
• Постарайтесь ограничить размер тела письма до 100 КБ - или, по крайней мере, ознакомьтесь с ограничениями вашего отправляющего провайдера и почтовых клиентов, которые ваши подписчики используют чаще всего.
• Выберите удобные для электронной почты шрифты, например Arial, Comic Sans MS, Courier New, Times New Roman или Verdana.
• Старайтесь не сочетать в одном письме более двух цветов - иначе это будет отвлекать.
• Не копируйте текст и изображения для своей электронной почты из текстовых редакторов, таких как MS Word, или с веб-сайтов: есть риск столкнуться с ненужным форматированием.
• Используйте шестизначный цветовой формат.
• Не прикреплять файлы - вместо этого укажите ссылку на страницу загрузки файла.
• Не забывайте добавлять замещающий текст к изображениям.
• Не создавайте электронные письма только из изображений - всегда добавляйте текст.
• Не забудьте проверить электронную почту перед запуском кампании. Используйте как минимум три почтовых клиента и разные устройства.

А чтобы не думать обо всем этом - начни пользоваться SendPulse бесплатно!