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

Email зародился в 1971 году благодаря Рэю Томлинсону как текстовый метод общения один на один. За десятилетия электронная почта эволюционировала, отойдя от чисто текстовых версий к HTML. Двигателями этого прогресса стали email-разработчики, использующие креативные приемы в жестких рамках.

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

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

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

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

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

— Миф №3: Используйте только DOCTYPE Transitional.

— Миф №4: Обязательно нужно использовать селекторы атрибутов.

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

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

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

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

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

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

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

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

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

Хотя мы рекомендуем системные шрифты как основу, веб-шрифты можно использовать как прогрессивное улучшение. Их поддерживают Android 4.4, Apple Mail и современные версии Outlook. Это более 50% всех открытий писем. Всегда проверяйте свою аудиторию, но потенциал для использования веб-шрифтов сейчас огромен.

## Миф №3: Используйте только DOCTYPE Transitional.

DOCTYPE сообщает браузеру, как рендерить страницу. Большинство клиентов (Gmail, Outlook.com, Yahoo) всё равно удаляют ваш DOCTYPE и заменяют его на HTML5. Использование HTML5 DOCTYPE сегодня — лучший способ «подтолкнуть» письмо в будущее, позволяя использовать новые элементы, такие как

## Миф №4: Обязательно нужно использовать селекторы атрибутов.

Раньше Yahoo! Mail требовал использования селекторов атрибутов типа *[class=”foo”] для корректной работы стилей в . В 2015 году Yahoo обновился и стал поддерживать обычные классы. Более того, Gmail не поддерживает селекторы атрибутов, поэтому их использование сегодня не имеет смысла и может даже навредить отображению стилей.

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

Инлайнинг стилей — «священная корова» email-разработки, якобы нужная из-за Outlook и Gmail. Но Gmail начал поддерживать стили в . Теперь можно выносить стили из тела письма, если только вы не поддерживаете совсем редкие или локальные почтовые клиенты.

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

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

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

Попытка добиться «пиксельной точности» во всех клиентах ведет к созданию перегруженного и «хакового» кода. Это кошмар в поддержке. Нужно объяснять заказчикам, что 1-пиксельная разница в отображении — это нормально для текущего ландшафта email-технологий. Важно экспериментировать и внедрять новое, а не зацикливаться на устаревших стандартах.

## Верстайте письма быстрее и проще с Builder

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