Как кодировать HTML рассылку по электронной почте

Шаг 4. Код для Google Mail, Lotus Notes и Outlook 2007

Google Mail, Lotus Notes и Outlook 2007 представляют свои собственные уникальные проблемы кодирования. В Outlook 2007, хотите верьте, хотите нет, поддержка CSS значительно меньше, чем в предыдущих версиях Outlook!

Недостаточная поддержка Google Mail немного более простительна — поскольку приложение запускается в браузере, оно не может контролировать содержимое отображаемых им электронных писем. Следовательно, инженерам Google пришлось предпринять шаги, чтобы обеспечить правильное отображение их приложения независимо от качества HTML или CSS, в котором пишутся электронные письма.

В результате Google Mail — это новый почтовый веб-сервис, который действует как артефакт начала 1990-х годов, когда веб-стандарты были примитивными. Требуется некоторая работа, но можно взломать страницу Google Mail и посмотреть, насколько запутанным является сервисный подход к отображению электронной почты в формате HTML.

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

Хорошая новость заключается в том, что если вы пишете код для учета странностей этих трех приложений электронной почты, ваш HTML-код электронной почты с большей вероятностью будет хорошо отображаться в большинстве, если не во всех почтовых клиентах. Вот некоторые методы, которые хорошо работают в Google Mail и других старых почтовых программах:

• Определите цвет фона в ячейке td с помощью атрибута bgcolor , а не стиля CSS.
• Как отмечено выше, используйте атрибут background в ячейке td для фоновых изображений вместо использования CSS. Одним из побочных эффектов этого подхода является то, что фоновое изображение может быть получено настолько длинным, насколько это необходимо — если содержимое, используемое в шаблоне электронной почты, вероятно, будет различаться по размеру, использование слишком высокого фонового изображения таким образом позволяет высоту электронная почта сокращается или расширяется, в зависимости от высоты копии, от одного электронного письма к другому. Помните, однако, что Outlook 2007 полностью игнорирует фоновые изображения.
• Если это работает лучше, используйте объявление заполнения для контроля полей в ячейке td. Стиль полей не работает в этих ячейках, но отступы работают.
• Если вам нужна граница вокруг ячейки td , имейте в виду, что Google Mail отображает рамку вокруг ячейки td когда она определена в div , а не когда она определена как стиль границы в теге td .
• Если вам нужна светлая ссылка на темном фоне, поместите определение шрифта в ячейку td (чтобы оно одинаково применимо к p и тегам), затем добавьте color: style в тег a.
• Если шрифты p и шрифты имеют разные размеры, поместите тег в тег p .
• Google Mail активно использует правую колонку пользовательского интерфейса Google Mail, которая втискивает электронную почту HTML в центральную панель. Убедитесь, что стиль заполнения в содержимом tds установлен на 10 пикселей по всему периметру, чтобы текст не ударялся о левый и правый края.
• При тестировании электронной почты в формате HTML с учетной записью Google Mail, скорее всего, вы обнаружите, что в тегах td , h1 , h2 , p , a и других отсутствуют один или несколько стилей шрифтов. Внимательно проверьте каждый шрифт, чтобы убедиться, что Google Mail отображает шрифты правильно.

Помимо Google Mail, существует еще одна, менее очевидная опасность, с которой сталкивается программист при создании электронной почты в формате HTML: Lotus Notes. Многие крупные корпорации продолжают поддерживать и обновлять свои установки Notes (по состоянию на 2004 год IBM сообщила, что 95 миллионов человек использовали Notes).

К сожалению, невозможно сказать, какие компании используют Notes. Наилучший подход — следовать рекомендациям, описанным в этой статье: чем более примитивен код, тем больше вероятность того, что он будет хорошо работать, если не идеально, с Notes.

Тем не менее, вполне возможно, что Notes представит в ваш HTML-код причуды, которые почти невероятны. Например, программное обеспечение может конвертировать изображения в их собственные форматы или просто игнорировать безупречный базовый HTML в одном письме, но отображать другой HTML в другом сообщении.

Пробная версия Lotus Notes доступна для загрузки, если вам нужно проверить свою почту в Notes — см. Список ресурсов в конце статьи. Вот несколько советов, которые помогут вам убедить Notes правильно отобразить вашу электронную почту в формате HTML:

• Как мы уже обсуждали ранее, используйте таблицу контейнеров, которая содержит все внутренние таблицы макетов (например, для заголовка, содержимого и нижнего колонтитула). Это позволяет хранить электронную почту вместе в одном фрагменте HTML, поэтому элементы макета с меньшей вероятностью будут отклоняться при отображении в Notes.
• Создайте желоб вокруг стола контейнера, установив ширину в процентах и ​​/ или используя ячейку по крайней мере 5.
• Как я упоминал ранее, избегайте использования декларации style заголовке вашей электронной почты. Это может быть подход, который придерживается веб-стандартов, но Notes (например, Google Mail) может удалить ваши стили. Вместо этого полагайтесь на встроенные стили в table , td , h1 , h2 , p , a и другие теги.
• Используйте абсолютные URL-адреса для изображений, хранящихся на веб-сервере. Вы не можете ничего сделать с конвертированием изображений в Notes, но использование удаленных изображений может помочь.
• Ссылки внутри электронной почты, использующие именованные якоря, редко (если вообще когда-либо) работают в Notes. Лучше всего избегать ссылок, которые переходят по электронной почте на определенный фрагмент контента.
• Избегайте использования colspan в ваших таблицах HTML. Примечания — особенно его более ранние версии — могут иметь дело только с основными макетами таблиц.
• Будьте уверены, что ваши ширины ячеек ТД являются точными. В отличие от веб-браузеров, которые автоматически устанавливают ширину всех ячеек, Notes определяет размер каждой ячейки td в соответствии с определенной шириной.
• Центрирование макета электронной почты обычно не работает в Notes. Макеты электронной почты обычно должны быть выровнены по левому краю.

Использование этих методов для достижения успешного рендеринга в Google Mail и Lotus Notes гарантирует, что ваши электронные письма также будут хорошо отображаться в Outlook 2007, который использует более старый механизм рендеринга HTML. Microsoft опубликовала подробности о том, что их программное обеспечение электронной почты будет и не будет отображаться должным образом; более подробную информацию можно найти в разделе «Ресурсы» в конце этой статьи).

Проект стандартов электронной почты содержит дополнительные сведения о поддержке CSS в Outlook 2007, и Microsoft является одной из компаний, на которую ориентированы их усилия по лоббированию.

Резюме

Многие люди, которые получают электронную почту, предпочитают HTML тексту по ряду причин. Тем не менее, для программистов задача создания электронного письма, которое будет отображаться последовательно, кажется простой и ужасно сложной. В этой статье описаны многие проблемы и стратегии создания разметки, которая будет работать в программном обеспечении электронной почты.

Какую идею лучше убрать из этой статьи? Если нужно сделать выбор между простым дизайном электронной почты и более сложным решением, простота — всегда самая безопасная ставка.

Дальнейшее чтение

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