7 мифов о разработке электронной почты

Электронная почта началась как текстовый метод общения 1: 1 в 1971 году, когда он был изобретен Рэем Томлинсоном. На протяжении десятилетий электронная почта развивалась, переходя от текстовых версий ранней электронной почты к HTML. Продвигая электронную почту в будущее, разработчики электронной почты использовали творческие методы в строгих рамках.

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

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

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

• Миф №1: Письма должны быть шириной 600 пикселей.
• Миф №2: Вы должны использовать только стандартные системные шрифты.
• Миф № 3: Используйте только переходный DOCTYPE.
• Миф №4: Необходимо использовать селекторы атрибутов.
• Миф № 5: Все стили в электронных письмах должны быть встроенными.
• Миф № 6: Не используйте фоновые изображения в электронных письмах.
• Миф № 7: электронные письма должны выглядеть одинаково во всех почтовых клиентах.

Миф №1: Письма должны быть шириной 600 пикселей.

До того, как мобильные телефоны и планшеты стали обычным явлением, а электронная почта была исключительно настольным приложением, передовая практика требовала, чтобы все электронные письма были не шире или уже 600 пикселей. Почему именно 600 пикселей? Размер области просмотра наиболее часто используемых почтовых клиентов в те времена (HoTMaiL, Yahoo и Outlook) составлял около 500-550 пикселей. Установка ширины письма не более 600 пикселей позволит минимизировать горизонтальную прокрутку в письме.

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

Этого правила легко придерживаться, особенно если рабочий процесс электронной почты включает создание дизайна в Adobe Photoshop или Sketch - вам нужна физическая ширина, чтобы начать дизайн электронного письма. Это правда, что электронное письмо шириной 600 пикселей по-прежнему будет очень хорошо отображаться среди наиболее популярных почтовых клиентов на настольных компьютерах. А с помощью медиа-запросов разработчики электронной почты могут легко изменять ширину электронного письма в зависимости от устройства, которое подписчики открывают.

Плавная ширина решает проблему огромного количества устройств, которые необходимо поддерживать разработчикам электронной почты. Чтобы это работало, используйте max-width, чтобы электронные письма не становились слишком широкими и неразборчивыми на больших окнах просмотра, и условные операторы MSO, чтобы Outlook понимал (поскольку он не отображает свойство CSS max-width).

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

Между тем, в электронных письмах Email Weekly используется плавная техника с максимальной шириной 960 пикселей. Он использует медиа-запросы для постепенного изменения ширины электронного письма в зависимости от ширины устройства.

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

Где ваши подписчики открывают ваши электронные письма? С помощью Email Analytics вы можете узнать, на каких устройствах и в каких почтовых клиентах они открывают ваши электронные письма. Узнать больше →

Миф №2: Вы должны использовать только стандартные системные шрифты.

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

С другой стороны, веб-дизайнеры экспериментировали с использованием нестандартных шрифтов в сети с начала 2000-х годов. В 2008 году CSS-правило @ font-face наконец-то получило поддержку со стороны веб-браузеров, чтобы веб-дизайнеры могли использовать нестандартные шрифты на своих веб-сайтах. В 2010 году Google запустил собственную библиотеку веб-шрифтов, бесплатную для использования веб-дизайнерами.

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

Хотя мы рекомендуем стандартные системные шрифты в ваших электронных письмах, это не значит, что вы не можете использовать веб-шрифты в качестве метода прогрессивного улучшения. Онлайн-репозитории шрифтов начинают охватывать использование электронной почты при лицензировании. А Google Fonts с его 800 бесплатными веб-шрифтами теперь становится популярной библиотекой для дизайнеров электронной почты, желающих использовать нестандартные веб-шрифты в своих электронных письмах.

Поддержка веб-шрифтов существует в Google Android 4.4, Apple Mail для iPhone, iPad и Mac, а также в Outlook 2011 и 2016 на OS X. Может показаться, что это немного, но по состоянию на сентябрь этого года четыре из пяти основных почтовых клиентов , занимая долю рынка, поддерживают веб-шрифты - iPhone, iPad, Google Android и Apple Mail. Это более 50% всех электронных писем, открываемых в сентябре! Конечно, вам нужно посмотреть на собственную базу подписчиков, но это хороший показатель того, сколько людей потенциально смогут видеть веб-шрифты в ваших электронных письмах.

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

Миф № 3: Используйте только переходный DOCTYPE.

DOCTYPE документа HTML сообщает браузеру, как визуализировать страницу, и используется для проверки HTML документа.

Наиболее часто используемый DOCTYPE в электронной почте:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Разработчики электронной почты приобрели хорошую привычку иметь DOCTYPE, хотя некоторые почтовые клиенты полностью удаляют DOCTYPE или заменяют его другим. Gmail, Outlook.com и Yahoo! Mail входят в число почтовых клиентов, которые удаляют любой DOCTYPE, присутствующий в вашем письме, и заменяют его на HTML5 DOCTYPE.

В Интернете различные DOCTYPE изменяют способ отображения некоторых свойств CSS и элементов HTML. Приведенный выше DOCTYPE позволяет использовать самый широкий диапазон HTML-элементов, включая устаревшие элементы, такие как <font>, которые использовались в электронной почте. В прошлых тестах этот DOCTYPE оказался наиболее надежным для электронной почты. БЫЛО доказано - прошедшее время.

Это было до того, как HTML5 стал стандартом, а теперь:

 <!DOCTYPE html>

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

Миф №4: Необходимо использовать селекторы атрибутов.

Yahoo! Mail был немного более удобным почтовым клиентом для разработки, чем, скажем, Outlook. Он поддерживал стиль в голове столько, сколько мы себя помним. Одна причуда Yahoo! Mail действительно предлагал то, что он отображал любой оператор CSS в медиа-запросе вместе с любым CSS за пределами медиа-запросов. Простым исправлением для этого было написать оператор CSS в качестве селектора атрибута:

 *[class=”foo”] {color:#000000; font-family: sans-serif;}

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

В начале 2015 года Yahoo! Mail выпустила обновление, которое позволило ему читать стиль, как любой «нормальный» почтовый клиент:

 .foo {color:#000000; font-family: sans-serif;}

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

Ранее безобидные селекторы атрибутов теперь могут нанести небольшой вред вашей электронной почте, если они есть в вашем коде. Если стиль вашей электронной почты не работает в Gmail, проверьте, используете ли вы по-прежнему селекторы атрибутов в своем стиле. Gmail не поддерживает селекторы атрибутов, но теперь (наконец-то!) Поддерживает стиль в <head>.

Благодаря тому, что селекторы атрибутов больше не требуются для Yahoo! Почта и Gmail не поддерживают их, поэтому нет необходимости использовать селекторы атрибутов в CSS в ваших электронных письмах.

Миф № 5: Все стили в электронных письмах должны быть встроенными.

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

Поразительно, но некоторые сайты утверждают, что встроенные стили нужны именно из-за Outlook и Gmail. Что совершенно неправильно. [Твитнуть это]

У Outlook никогда не было проблем со стилем в заголовке письма. С другой стороны, Gmail. Gmail буквально был главной причиной (с долей рынка 16% по состоянию на сентябрь 2016 года), почему разработчики электронной почты встраивают свои CSS.

В конце сентября Gmail начал поддерживать стиль в голове. Так нужно ли нам больше встраивать все стили?

Если ваши подписчики в основном используют Gmail, iOS или даже Outlook, мы можем с уверенностью сказать, что сейчас самое время перенести ваши стили в голову. Однако, если большинство ваших подписчиков используют малоизвестные почтовые клиенты или международные почтовые клиенты (Яндекс, Либеро, Терра), которые полагаются на встроенные стили, вам, возможно, придется продолжать их использовать. Как всегда, мы рекомендуем проверять электронную почту всякий раз, когда вы вносите в нее какие-либо серьезные изменения.

Миф № 6: Не используйте фоновые изображения в электронных письмах.

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

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

Одной из основных причин отказа от использования фоновых изображений в электронной почте было отсутствие поддержки Gmail для свойств CSS background-size и background-position. Эти свойства CSS важны для экранов с высокой плотностью пикселей и гибридной / гибкой / отзывчивой электронной почты, где необходимо установить определенный контроль над размером и размещением фоновых изображений. Оба теперь поддерживаются в Gmail и Inbox в Gmail, поэтому есть еще меньше причин не пробовать использовать фоновые изображения в электронной почте.

Кристиан Робинсон, ведущий разработчик электронной почты в TWO Digital Marketing и спикер Email Design Conference 2016, глубже копается в фоновых изображениях в электронной почте, если вы чувствуете вдохновение для их решения.

Миф № 7: электронные письма должны выглядеть одинаково во всех почтовых клиентах.

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

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

«Время, когда электронная почта должна была быть идеальной по пикселям, давно уже позади». @ericlepetitsf #LitmusLive

- Чад С. Уайт (@chadswhite) 16 августа 2016 г.

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

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

Создавайте электронные письма быстрее и проще с помощью Builder

Ускорьте рабочий процесс разработки электронной почты с помощью Builder, единственного редактора кода, созданного специально для электронной почты. И это бесплатно!

Начать использовать Builder →