Вопрос-ответ: наш email-разработчик делится советами по Outlook, мобильной верстке и темной теме

Сегодня особенный день: мы даем вам эксклюзивную возможность заглянуть в профессиональный мир Карин Слейтер, email-разработчика компании Litmus!

Карин — один из технологических вдохновителей всех новостных рассылок Litmus и практически всего, что мы отправляем. По её собственному признанию, она «email-гик, который последние 9 лет сражается с Outlook».

На нашем недавнем виртуальном мероприятии «Вопрос-ответ: верстка с Карин» она поделилась своими лучшими советами по разработке email-писем, отвечая на самые распространенные вопросы по верстке и исправляя ошибки в письмах (присланные другими разработчиками) в режиме реального времени.

Читайте далее, чтобы узнать её советы по следующим темам:

## Распространенные проблемы в Outlook

Email-маркетологи прекрасно знают: работа с Outlook может быть довольно… сложной. Но несмотря на его особенности, знание способов их исправления может значительно улучшить ваши навыки верстки писем. Как отмечает Карин: «Я научилась исправлять в Outlook то, что люди обычно просто игнорируют».

Вот краткий обзор наиболее частых проблем в Outlook от Карин.

### Как убрать белые линии в Outlook

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

#### Поместите элемент в таблицу

Один из любимых приемов Карин — просто поместить все элементы во вложенную таблицу. «Иногда это всё, что нужно сделать, чтобы белые линии исчезли», — объясняет Карин.

Например, если в ячейке таблицы есть кнопка, под которой появляется белая линия, Карин просто оборачивает эту кнопку в еще одну таблицу.

#### Используйте четные числа для отступов, размеров шрифта, ширины и т. д.

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

#### Удалите `dir=”rtl”`

Иногда атрибут направления текста справа налево (или `dir=”rtl”`) вызывает появление белых линий — это Карин демонстрирует в разборе ниже.

### Устранение неполадок в реальном времени: белые линии в Outlook

В этом примере Карин удалила лишний код, и вуаля — белые линии исчезли!

Иногда атрибут `dir=”rtl”` необходим в ячейках таблицы для стекирования (выстраивания в столбик). Кортни Фантинато нашла решение, которым поделилась в сообществе Litmus.

### Другие особенности, на которые стоит обратить внимание

Мы уже упоминали, что Outlook… своеобразен. Помимо белых линий, помните:

**Ширина таблиц должна быть указана в пикселях.** Если вы используете проценты, верстка «поедет». Ширина таблиц лучше всего работает в атрибутах стиля.

**Обязательно задавайте ширину изображений атрибутом width.** Outlook игнорирует ширину, заданную в стилях для изображений, и отобразит картинку в исходном размере, если вы не добавите атрибут width.

**Не используйте рамки (borders) для таблиц или ячеек.** Если вы добавили рамку на таблицу, а она не отображается, попробуйте применить её к ячейке таблицы вместо самой таблицы.

**Скругленные углы требуют VML-фигур.** Как говорит Карин: скругленные углы — это головная боль. Просто смиритесь с квадратными углами (если, конечно, без них никак).

## Мобильная верстка

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

Вот как мы это делаем в Litmus.

### Используйте медиазапросы `@media` для разных размеров экрана

В Litmus мы используем медиазапросы `@media` с максимальной шириной 600 пикселей. Все, что шире — это десктоп, а всё, что меньше 600 пикселей, адаптируется под мобильные устройства.

`@media screen and (max-width:600px)`

Некоторые HTML-элементы адаптивны по своей природе, например `