Новости

Разработка эффективного email в 2018

Разработка эффективного email

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

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

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

Дизайн, изображения и текст email.

Использовать дизайн с одной колонкой

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

Установите 600 пикселей в качестве ширины

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

Уделите внимание мобильным пользователям

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

Каждый почтовый клиент — разный

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

Единственный способ узнать, как будет выглядеть ваша электронная почта через разные клиенты, — проверить ее. Для тестирования удобно иметь несколько почтовых ящиков — на Google, Яндекс, Mail. Отправьте себе тестовое письмо и проверьте, как оно отображается.

Планирование отсутствующих или заблокированных изображений

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

Использовать безопасные для шрифты

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

Вы также захотите убедиться, что вы используете шрифт, совместимый с Outlook. Одним из многих причуд Outlook является то, что непризнанный шрифт заставит его вернуться к Times New Roman.

Некоторые из шрифтов, которые поддерживаются повсеместно, включают:Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Σψμβολ2 (Symbol), and Webdings.

Избегайте сообщений, которые состоят исключительно из изображений

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

Не забудьте добавить ссылку

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

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

Разработка email

HTML

Таблицы — ваш друг.

Таблицы на сегодняшний день являются самым надежным способом достижения согласованной компановки макета письма. Использование операторов divs и floats может привести к некорректному отображению вашего письма.

Используя align = «left», мы можем заставить таблицы складываться для отображения на меньших экранах. На базовом уровне он работает следующим образом: у нас есть две таблицы шириной 300 пикселей, с align = «left» (выравниванием = слева) внутри одного и того же контейнера. Если экран имеет ширину 600 или более пикселей (большинство настольных почтовых клиентов), тогда таблицы появятся рядом. Если экран имеет ширину всего 400 пикселей, то две таблицы будут идти друг за другом. Вложенные таблицы полностью безопасны.

Знайте свои рамки

Существует два популярных подхода к кодированию разметки email. Наиболее популярный метод разметки обычно называется «адаптивный». Основой этого метода является начальная таблица шириной 100% (к которой вы можете применять стили, которые влияют на весь ваш email), а затем плавающие ячейки (применяя align = «center» для выравнивания) внутри этой начальной таблицы. Используя медиа-запросы, ширина начальной таблицы адаптируется к различным размерам экрана.

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

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

Убедитесь, что код хорошо прокомментирован

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

Кодировать специальные символы

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

Сохраняйте размер email до 100 КБ

Есть несколько веских причин, чтобы держать размер вашего письма ниже этого лимита. Один из них заключается в том, что письмо будет проходить через большее количество спам — фильтров, прежде чем попасть в инбокс. Сохранение размера вашего email ниже 102kb не позволит Gmail «обрезать» вашу электронную почту. Gmail считает, что любые электронные письма с размером файла HTML более 102 Kb слишком длинны. Таким образом, он сжимает его и отображает сообщение урезанным.

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

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

Код для дисплеев с высоким разрешением

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

Включить текст предварительного заголовка

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

Избегайте Javascript, Flash и других сложных CSS / HTML

Javascript и Flash полностью не поддерживаются в почтовых клиентах, поэтому не используйте их вообще. Более новый код, такой как HTML5 и CSS3, имеет ограниченную поддержку, но иногда это возможно (и весело!). Эти улучшения следует использовать с осторожностью. Как всегда, тщательно тестируйте!

Тест-тест-тест

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

Изображения

Сделать изображения для дисплеев RETINA

Многие устройства теперь включают в себя дисплеи «retina». Это означает, что у них больше физических пикселей, чем указано в CSS. «Retina display» — это маркетинговый термин, который Apple использует для обозначения своих дисплеев с высокой плотностью пикселей, обычно 300 или более пикселей на дюйм, в которых отдельные пиксели неотличимы на обычном расстоянии просмотра.

Убедитесь, что вы сохранили изображение (или другую его версию) с удвоенной или большей разрешающей способностью, на которой оно будет отображаться. Поэтому, если изображение будет 500 × 400, сохраните его при 1000 × 800. Разрешение будет автоматически масштабироваться, чтобы соответствовать большинству клиентов.

Использовать абсолютные адреса для изображений

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

Фон несёт дополнительные проблемы

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

Удовлетворитесь медиа-запросами

Медиа-запросы обычно используются для создания пользовательских стилей для разных клиентов или размеров экрана. Основной формат медиа-запроса для электронной почты:

@media only screen and (max-device-width: 640px){ styles here }

Это приведет к тому, что стили, содержащиеся в запросе, будут запускаться только на экранах размером 640 пикселей или меньше. «Min-device-width» будет делать обратное, запуская на экранах 640px или больше.

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

 А какие практические советы можете дать вы?

Мы всегда ищем дополнительные советы для добавления в наш список! Какие наилучшие методы вы используете при разработке электронных писем?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *