7 мифов email-разработки

Это было до того, как HTML5 стал стандартом, которым он является сейчас:

``

DOCTYPE HTML5 позволяет использовать новые элементы HTML5, например `

## Миф №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;}`

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

Ранее безвредные, селекторы атрибутов теперь могут нанести небольшой вред вашему письму, если они есть в вашем коде. Если стиль вашего письма не отображается в Gmail, проверьте, не используете ли вы все еще селекторы атрибутов в своем стиле. Gmail не поддерживает селекторы атрибутов, но он теперь (наконец!) поддерживает стили в ``.

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

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

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

Удивительно, но некоторые сайты утверждают, что причина необходимости встроенных стилей — это Outlook и Gmail. Что просто неверно. [Твитните это]

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

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

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

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

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

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

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

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

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

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

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

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

— Chad S. White (@chadswhite) 16 августа 2016 г.

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

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

## Кодируйте письма быстрее — и проще — с Builder

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