Фото: алыкат
В первой части этой серии «Лучшая электронная почта» мы говорили о макетах электронной почты . Во второй части мы сосредоточились на содержании электронной почты . В этой последней части «Правил лучшей практики в электронной почте» мы разберемся и рассмотрим лучшие практики кодирования.
Теперь, когда вы знаете, как создать хорошо разработанную графическую электронную почту, учитывающую различия в почтовых клиентах и веб-браузерах, пришло время заставить ваши электронные письма работать в каждой папке входящих сообщений.
Как мы упоминали в части 1 , электронное письмо может выглядеть и ощущаться как веб-страница, но закодировано ли оно как веб-страница? Конечно, если эта веб-страница была закодирована в 1990-х годах.
Написание разметки для электронной почты возвращает HTML к старой школе. Эти советы помогут тем из вас, кто не помнит дни фланелей, пейджеров и Discman, или кто думает о таблицах только как о чем-то, что можно перекусить или сохранить данные.
1) Используйте таблицы для разметки
Чтобы обеспечить правильную визуализацию макета во всех почтовых ящиках, используйте таблицы — множество таблиц — все они вложены друг в друга. Этот совет бросает вызов современной веб-разработке, так как таблицы теперь в основном используются для табличных данных, а не для макета веб-страницы.
Поскольку CSS стал подходящим и более гибким способом разметки веб-страниц, веб-разработчики по праву осуждали использование таблиц — старой школы кодирования веб-страниц. Однако это не относится к разметке HTML для графического электронного письма, где таблицы не только приемлемы, но и являются предпочтительным методом.
Столько, сколько наши инстинкты могут сказать нам иначе, отрезвляющие факты таковы, что таблицы кажутся единственным верным способом заставить многоколоночные макеты работать во всех возможных почтовых ящиках.
Использование div для очень простых макетов может работать хорошо, но тщательно протестируйте div, чтобы убедиться, что он ведет себя так, как задумано. Outlook, Yahoo и Hotmail не предлагают отличную поддержку для позиции и плавающего, поэтому разумно убедиться, что ваши другие свойства CSS не выходят из строя в разных клиентах.
Таблицы обеспечивают наиболее согласованную поддержку для всех клиентов и давно стали стандартом для кодирования писем. Какими бы устаревшими или незнакомыми они ни были при работе с макетами шаблонов, вероятно, вы добьетесь наилучших результатов во всех почтовых ящиках, используя таблицы поверх div или другими методами.
2) Приведите свои стили в линию
Gmail и другие почтовые клиенты неизбежно удаляют некоторые (если не все) CSS из тега в документах HTML. По этой причине, а также из-за того, что внешние таблицы стилей не используются в электронной почте, поместите ваши стили CSS в строку.
Это позволяет использовать много повторяющихся стилей, применяемых к каждому элементу, и полностью исключает роскошь и удобство классов, но обеспечивает максимальную согласованность и сохраняет хорошо продуманный шаблон. Некоторые поставщики услуг электронной почты, такие как MailChimp и CampaignMonitor, теперь предлагают инструменты преобразования, чтобы сделать ваш CSS встроенным и избавить от головной боли необходимости повторения стилей для каждого элемента.
Исключение из этого правила: медиазапросы, направленные на макеты для мобильных устройств. Медиа-запросы всегда пишутся в виде CSS верхнего уровня и содержат классы, когда они поддерживаются, они позволяют различным пользователям мобильных устройств просматривать проекты электронной почты на небольших экранах.
3) Всегда избегайте стенографии CSS
При кодировании электронной почты не так много ярлыков, чтобы упростить жизнь, и, к сожалению, использование сокращенного CSS не кажется исключением.
Поддержка сокращенного CSS в шрифте, заполнении и определении шестнадцатеричных значений, как правило, несовместима (хотя иногда используется сокращенный формат с границами). Как всегда правило при кодировании электронной почты: если вы собираетесь попробовать это, тестируйте его везде . Убедитесь, что сокращенные свойства ведут себя так, как вы хотите, и не полагайтесь на значения по умолчанию — определите их.
Короче говоря, выгода от сбрасывания нескольких символов с вашего CSS вряд ли будет стоить новых проблем рендеринга, которые он создает.
4) Оберните свой цвет фона в свою таблицу
Подобно удалению тегов стиля, некоторые почтовые клиенты также удаляют тег body. По этой причине целесообразно определить цвет фона в отдельной таблице, обернутой вокруг остальной части шаблона, и установить ширину на 100%.
По умолчанию большинство почтовых клиентов отображают сообщения на белом фоне. Количество отображаемого фона зависит от клиента, и другие факторы, такие как рекламные баннеры, панели инструментов и меню, могут влиять на общий размер панели сообщений.
Еще один хороший подход, обеспечивающий четкое отображение шаблона электронной почты на панели просмотра сообщений: добавьте рамку вокруг всего шаблона или по сторонам шаблона. Если содержимое в шаблоне отображается на белом фоне, оно будет заключать дизайн и создавать пространство между сообщением и панелью.
5) нарезать ваши изображения
Изображения являются ключом к отличному дизайну электронной почты и обычно ссылаются на одну или несколько веб-страниц.
К сожалению, карты изображений не везде хорошо поддерживаются (и могут вообще не связывать ваши изображения). Еще раз, лучший путь — выбрать длинный путь: нарезать все эти изображения и связать каждое из них по отдельности. Это позволит вам проверить, работает ли каждая ссылка, а также быстрее загрузит изображения меньшего размера.
Хотя список ограничений может показаться устрашающим, почтовые клиенты прошли долгий путь и будут продолжать меняться и расти. Когда-то давно не было вообще никакой поддержки CSS для электронной почты, и разметка требовала много пустых ячеек и разделительных картинок для правильного заполнения.
В последнее время достижение стандартизации HTML для электронной почты стало всемирно признанной целью. Рабочая группа по электронной почте, группа W3, соберется в сентябре, чтобы обсудить новый стандарт синтаксиса HTML для долгосрочного использования.
Электронная почта имеет гордую историю и долгое наследие, но она движется в правильном направлении.