Курс диджитал-дизайна

Outlook: инструкция для емейл-маркетологов

В данной статье речь пойдет об Outlook. Почтовый клиент Microsoft пользуется популярностью среди американцев, в немалой степени благодаря распространенности Microsoft в предпринимательском секторе и привязке к MS Office. Если ваши подписчики — типичные офисные работники, они наверняка используют этот клиент. Учитывая тот факт, что Outlook появился в 1997, у Microsoft было много времени для улучшения сего продукта, и где-то изменения были произведены.

Однако, передача HTML в Outlook просто отвратительна. Outlook 2003 использует для передачи HTML Internet Explorer 6, который довольно плох по современным стандартам. Outlook 2007 & 2010 передают HTML с помощью Word (да, текстового редактора). Если вы являетесь емейл-маркетологом, дизайнером емейлов, вы наверняка встречались с некоторыми ошибками Outlook. Ваши электронные письма выглядят безупречными на сверкающем iPhone, устройстве на платформе Android или в сетевом почтовом клиенте, но неожиданно разрушаются, если вы открываете их в Outlook. Мы знаем об этом. Мы пришли, чтобы вам помочь.

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

Что не поддерживается в Outlook

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

Анимированные GIF-изображения: Outlook остановит анимированное изображение на первом кадре.

CSS: CSS-код, может выводиться с ошибками или не отображаться вообще во многих почтовых клиентах, но хуже всего в Outlook. Пишите стили CSS inline — в тегах.

Баги и ошибки

Существует множество ошибок Outlook, и мы часто находим новые. Поэтому ниже будут перечислены не все из них, а только самые ужасные:

Баг padding-top: Padding-top будет применим ко всем тэгам в строке , даже если вы примените его к одному . Есть несколько приемов, чтобы это исправить. Самый простой выход из затруднительного положения, на наш взгляд, вообще отказаться от использования top padding в строке, и добавить margin к элементам, содержащимся внутри ячеек таблицы, чтобы контролировать пространство между элементом и границей ячейки. Пишите margin, используя сокращение (margin: 0 0 0 0) вместо (margin-top:0px). В последнем случае вы рискуете столкнуться с ошибкой Hotmail. Вы также можете добавить таблицу из одной ячейки и добавить к ней padding-top. Но это выглядит немного грубоватым.

Баг 1 800 пикселей: если вы создаете длинные сообщения (ежеквартальное новостное письмо, например), Outlook может прервать ваше письмо после 1800 пикселей. Помните, мы уже говорили, что Outlook 2007 и 2010 использует Word для передачи HTML? Так вот, в данном случае Outlook рассматривает ваше сообщения, как многостраничный текстовый документ, и добавляет разрывы страниц. Сюрприз!

Баг table-cell: для ячеек с изображениями меньше, чем 12px, обязательно примените height.

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

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

Последние мысли

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

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

Источник: blog.verticalresponse.com
Понравился кейс?
Мы поможем реализовать его и у вас!
Напишите нам.
Поделиться статьёй
Подписаться на рассылку