Каскадные таблицы стилей и отображение электронной почты

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

Если у вашего читателя есть адрес Hotmail, обычно можно с уверенностью предположить, что он будет читать ваше сообщение через веб-клиент Hotmail. , Но как насчет ваших читателей с частными адресами электронной почты? Будут ли они использовать Microsoft Outlook? Это будет Outlook 2000, Outlook 2003 или Outlook 2007? Или, может быть, он использует Lotus Notes? Что делать, если его электронная почта TLD была перенаправлена ​​на учетную запись Yahoo? И использует ли он Mac или ПК?

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

Каскадные таблицы стилей (CSS) предлагает возможность сделать ваши сообщения электронной почты чрезвычайно графическими и заманчивыми. К сожалению, все еще существует ограниченная поддержка CSS со многими почтовыми клиентами и на разных платформах. Одним из крупнейших нарушителей CSS является Outlook 2007; и поскольку исследования показывают, что до 75% читателей электронной почты используют Outlook, вы просто не можете игнорировать его недостатки рендеринга.

К сожалению, Outlook 2007 не поддерживает плавающие элементы, которые широко используются в CSS для позиционирования объектов. Таким образом, он основан на использовании табличного макета при разработке ваших почтовых кампаний. Подумайте о веб-дизайне примерно в 2000 году. Если вы новый дизайнер и никогда раньше не работали с таблицами, вы можете получить тонны практической информации от W3C.

Хотя Outlook 2007 действительно поддерживает это свойство, я не Я рекомендую использовать его для прикрепления таблицы стилей. По крайней мере 50% ваших читателей отключат свои изображения, что означает, что любые связанные элементы не будут связаны — и это включает вашу внешнюю таблицу стилей. Кроме того, Gmail, Live Mail и Hotmail не поддерживают связанные элементы, поэтому лучше не использовать их в любом случае. Вместо этого определите все свои стили в своем сообщении и никогда не полагайтесь на внешнюю таблицу стилей для своих сообщений электронной почты.

Где, внутри сообщения, вы должны определить свои стили, это совсем другая история. Live Mail ищет таблицу стилей с помощью, Hotmail ищет таблицу стилей прямо под тегом. Outlook 2003, Outlook 2007, AOL, Yahoo, Entourage и Thunderbird принимают любое место размещения, но Gmail не принимает ни одно из них.

Лучшим вариантом является использование тегов в стиле строки. In-line style просто означает, что стиль для каждого элемента должен быть определен индивидуально. Вместо того, чтобы определять свою таблицу стилей в своей голове следующим образом:

<link rel="STYLESHEET" type="text/css" href="http://www.mysite.com/style.css">

или даже что-то вроде этого:

</p> <style type="text/css" media="screen"> <p><!-- p {"urn:schemas-microsoft-com:office:smarttags" /> georgia, serif; размер шрифта:   х-мала;}   hr {color: # ff9900; высота: 1 пикс.   a: hover {color: # ff0000; текстовое оформление: нет}   -&gt;   </style>

вы определяете каждый элемент индивидуально, например:

<p x-small color:>   Это текст вашего абзаца.   </p>

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

. цвет фона

. граница

. цвет

. размер шрифта

. стиль шрифта

. вариант шрифта

. начертание шрифта

. письмо-интервал

. высота строки

. обивка

. Таблица-макет

. выравнивания текста

. текст-отделка

. текст-отступов

. text-transform

Эти свойства поддерживаются как на Mac, так и на ПК в:

. AOL

. Entourage

. Gmail

. Живая почта

. Outlook 2003

. Outlook 2007

. Thunderbird

. Yahoo

Свойства, которые следует избегать, включают:

. фоновое изображение

. фон положение

. фон-повторить

. границы коллапса

. границы Расстояние между

. снизу

. Надпись на стороне

. ясно

. Клип

. Курсор

. Направление

. дисплей

. пустая-клетка

. плавать

. семейство шрифтов

. высота

. осталось

. список-стиль-образ

. список-стиль-позиция

. Список стиле типа

. Запас

. Непрозрачность

. Переполнение

. Положение

. право

. наверх

. вертикально-Align

. видимость

. бело-пространство

. Ширина

. слово-интервал

. z-index

А теперь еще более плохие новости: Lotus Notes и Eudora имеют ужасную поддержку CSS, и даже многие из широко распространенных свойств CSS могут отображаться неправильно. И поскольку все больше читателей в настоящее время получают доступ к электронной почте на КПК и других портативных устройствах, вы никогда не можете быть на 100% уверены, как и где будет прочитано ваше сообщение. Поэтому я предлагаю вам всегда использовать обмен сообщениями Multipart-Mime и всегда включать ссылку на текстовую версию в html-версию вашего сообщения.

*** Хотите сохранить эти советы под рукой?


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *