7 мифов емейл-разработки
В 1971 году появился емейл. Он стал основным способом онлайн-общения с клиентом. Поначалу емейл представлял собой только текстовое сообщение, а с годами превратился в полноценный HTML-продукт. Разработчики писем активно занялись техническим развитием этого канала и добились успеха.
Постепенно опытным путём достигли универсальных методик работы с емейл-каналом. Лучшие из них считаются учебником для новичков, в котором указаны все возможности емейл-маркетинга.
Однако технологии не стоят на месте. Что хорошо работало в емейле в 80-е годы, не сработает сейчас. Перед вами адаптированный перевод статьи из блога компании Litmus. Статья расскажет о 7 мифах в разработке емейлов, которые пора развеять.
Миф 1. Ширина письма не должна превышать 600 пикселей
До того как мобильные телефоны и планшеты прочно вошли в нашу жизнь, почту проверяли исключительно с десктопа. Тогда профессионалы утверждали, что все емейлы должны быть не шире 600 px. Но почему именно 600 px? Область просмотра экрана на наиболее часто используемых емейл-клиентах составляла около 500–550 пикселей (Hotmail, Yahoo и Outlook). Ширина в 600 пикселей не требовала горизонтальной прокрутки письма.
С тех пор девайсы и экраны стали разнообразнее, их параметры тоже стоит учитывать при разработке емейла. Но всё равно все стараются придерживаться правила 600 пикселей.
Это правило удобно применять в работе, если письмо изначально рисуется в Adobe Photoshop или Sketch: чтобы приступить к дизайну, нужно задать ширину страницы. То, что емейл шириной 600 пикселей красиво отображается на всех десктопах, — абсолютная правда. А вот для открытия письма на мобильных устройствах с разной шириной экрана следует использовать специальные приемы адаптации.
Благодаря адаптивной вёрстке разработчикам не нужно учитывать все возможные размеры девайсов, с которых открывается рассылка. Чтобы письма не расползались по ширине и удобно читались, установите максимальную ширину письма. А для Outlook-а применяйте условные комментарии (Outlook не распознаёт свойство CSS max-width).
Письма компании Zalando шириной 450 пикселей. Здесь используются крупные кнопки CTA — очевидно, что Zalando ориентируется больше на мобильную аудиторию пользователей.
В то же время у Email Weekly плавающий дизайн. Он растягивается до 960 пикселей. Компания использует медиазапросы, чтобы менять ширину письма в зависимости от ширины экрана.
Компания «Райффайзенбанк» использует в своей практике письма шириной 1200 px. Они адаптируются и корректно отображаются как на стандартных устройствах, так и на смартфонах с шириной экрана 320 px.
Устанавливайте ширину письма в зависимости от девайсов, наиболее часто используемых вашими подписчиками.
Миф 2. Используйте только стандартные шрифты
Долгое время в письмах использовались только стандартные шрифты.
С начала 2000-х годов веб-дизайнеры начали экспериментировать с использованием нестандартных шрифтов. В 2008 году CSS-правило @font-face получило широкую поддержку браузеров, а в 2010 году Google запустил свою собственную бесплатную библиотеку веб-шрифтов.
Дизайнерам емейл-шаблонов повезло меньше, недостаток методов встраивания веб-шрифтов в HTML давал о себе знать. Кроме того, каждый шрифт запатентован и запрещен к использованию в емейлах.
Применяйте стандартные шрифты в емейлах. Это не означает, что нельзя использовать веб-шрифты как технику прогрессивной оптимизации, к тому же онлайн-хранилища шрифтов начинают учитывать емейл в процессе лицензирования. К вашим услугам библиотека Google Fonts, где предлагается около 800 шрифтов.
Сейчас шрифты поддерживают Google Android 4.4, Apple Mail for the iPhone, iPad и Mac, и Outlook 2011 и 2016 на OS X. Эти платформы покрывают 4 из 5 топовых емейл-клиентов — это более 50 % открытий писем на сентябрь 2016 года. И не забывайте ориентироваться конкретно на вашу базу подписчиков.
Компания Outnet использует красивый альтернативный шрифт, который очень близок к их веб-шрифту.
Вы заметили отличия в этих письмах? Письмо слева использует веб-шрифты, а справа — не использует.
Миф 3. Используйте только переходный синтаксис
Элемент HTML под названием DOCTYPE указывает браузеру тип документа.
Чаще всего в емейлах используется следующий DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Емейл-разработчики привыкли прописывать DOCTYPE несмотря на то, что некоторые почтовые клиенты игнорируют элемент или заменяют другим. Например, Gmail, Outlook.com и Yahoo! Mail заменяют любой элемент DOCTYPE на HTML5 DOCTYPE.
В случае с вебом разные элементы DOCTYPE меняют то, как отображаются свойства CSS и HTML. Классический элемент DOCTYPE позволяет использовать более широкий набор HTML-элементов, включая устаревшие, такие как <font> — они давно используются в емейлах. Раньше такой DOCTYPE признавался самым надёжным для емейлов. Но сейчас HTML5 стал рекомендованным стандартом.
Элемент HTML5 DOCTYPE позволяет применять новые элементы HTML5, например, <video> в емейлах. Хоть и не все почтовые клиенты могут представлять новые элементы и свойства, это не мешает вам проводить в будущее ваши технологии, обновляя ваш DOCTYPE. Вы можете использовать устаревший код с HTML5 DOCTYPE, но код больше не будет актуален, когда пройдёт через сервис проверки валидности кода. Независимо от валидности код не повлияет на показатели доставляемости и эффективность письма. Но вот HTML-шаблон стоит проверить на наличие открытых HTML-тегов, которые могут повлиять на отображение вашего письма.
Миф 4. Обязательно применяйте селекторы атрибутов
Почтовый клиент Yahoo! Mail гораздо более продвинутый в плане разработки, чем тот же Outlook. Он всегда поддерживал стили в head. В какой-то момент Yahoo! Mail начал интерпретировать CSS в медиа-запросах как CSS вне медиа-запросов. Простое решение этой проблемы — прописать CSS-правило в виде селектора атрибутов:
*[class="foo"] {color:#000000; font-family: sans-serif;}
Написание CSS в head емейла стало стандартом. Большинство емейл-клиентов считывают стили в хедере и селекторы атрибутов.
В начале 2015 года вышел обновлённый Yahoo! Mail. В нём исправлена эта проблема.
Сейчас селекторы атрибутов могут и навредить, если вы используете их в своём коде. Если ваш емейл неправильно отображается в Gmail, проверьте, нет ли в стиле селекторов атрибутов. Gmail не поддерживает селекторы атрибутов вообще, но начал поддерживать стили в контейнере <head>.
Селекторы атрибутов почтовому клиенту Yahoo! Mail больше не требуются, а Gmail их не поддерживает — поэтому нет нужды использовать их в CSS.
Миф 5. Используйте в письмах только inline-стили
Таблицы для макета и inline-стили определяют различия между емейлом и веб-разработкой. На данный момент inline-стили используются повсеместно, и никто уже не может сказать точно, почему вообще нужно использовать именно их?
Некоторые источники утверждают, что inline-стили нужны для Outlook и Gmail. Это в корне неправильно! У Outlook никогда не было проблем со стилями в хедере письма. А вот у Gmail были. Емейл-разработчики добавили inline-стили в CSS во многом из-за Gmail (доля на рынке 16 %, по данным на сентябрь 2016). К концу сентября уже и Gmail запустил поддержку стилей в хедере.
Если ваши подписчики используют по большей части Gmail, iOS или даже Outlook, пришло время перенести все стили в хедер. Тем не менее, если большинство ваших подписчиков используют непопулярные почтовики, которые основываются на inline-стилях, то продолжайте использовать эти стили.
Для наиболее популярных в России веб-интерфейсов Mail.ru и Yandex по-прежнему актуально использование inline-стилей.
Миф 6. Избегайте фоновых рисунков
Поместить фоновую картинку в рассылку довольно сложно. Емейл-разработчики используют VML-код, чтобы фон воспроизводился во многих версиях Outlook. Да и другие почтовые клиенты не всегда поддерживают фоны.
Фоновые картинки работают в емейлах, но как они встраиваются в дизайн письма — это уже другой вопрос. С минимальной поддержкой не стоит использовать фон в качестве ключевого элемента дизайна емейла. Работайте как и с шрифтами — если картинка откроется, то хорошо.
Компания Litmus использует фоновые картинки в хедере письма, чтобы добавить глубины емейл-дизайну. У кого не отображается картинка, увидят однотонную заливку.
Главная причина, почему Gmail не поддерживал фоновые картинки, — отсутствие поддержки параметров background-size и background-position. Они важны для retina-экранов и емейлов с адаптивным дизайном. Для них важно правильно разместить фоновую картинку с учётом особенностей разных экранов. Сейчас эти параметры полностью поддерживаются всеми приложениями почтового клиента Gmail.
Миф 7. Письма должны отображаться одинаково во всех емейл-клиентах
Все емейл клиенты воспроизводят HTML-код писем с небольшими отличиями. И вместо того чтобы просто принять этот факт, емейл-разработчики пытались найти способ для идентичного отображения емейлов на множестве почтовых клиентов. Но такой подход значительно раздувает и портит код, а это опасно для его использования в принципе.
Этим вопросом вообще должны заниматься не емейл-разработчики, а сами почтовые клиенты и другие заинтересованные лица. Разработчикам достаточно разъяснить всем, почему почтовые клиенты отображают письма по-разному и какие различия не стоит принимать во внимание при написании кода.
Эти правила формировались годами, но это не значит, что они не должны меняться. Пора оспорить сложившиеся мифы, иначе что мы за емейл-маркетологи, если не экспериментируем с технологиями?
