Приведу ряд особенностей, с которыми я столкнулся при создании электронной HTML-рассылки.
Используйте только таблицы. Никаких DIV элементов
Некоторые почтовые клиенты, такие как Gmail и Outlook 2007, не поддерживают слои.
Не пользуйтесь CSS-свойствами margin, padding, float: задавайте отступы с помощью высоты и ширины ячеек таблиц.
Не бойтесь использовать встроенные таблицы.
Задавайте таблицам фиксированную высоту и ширину
Предпочтительно, чтобы ширина вашего письма была в пределах 600-650px.
Высота не имеет значения, но длинные письма лучше избегать - клиент устанет читать, затратит лишний интернет-трафик (актуально для мобильных телефонов) и время.
Задавайте высоту и ширину всех ячеек всех таблиц - это избавит вас от многих проблем.
Фоновые изображения в Outlook
Microsoft как обычно отличился с отрицательной стороны. Почтовый клиент не поддерживает фоновые изображения, заданные через CSS-стили.
Привожу метод, который успешно зарекомендовал себя:
<td height="150" width="150" valign="top" style="background: url('img/1.jpg') right 0 no-repeat;">
<!--[if gte mso 9]
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage1" style='behavior: url(#default#VML); display: block; position: absolute; width: 150px; height: 150px; border: 0; margin: 0; z-index: -1;' src="img/1.jpg" />
<![endif]-->
Некоторый текст в ячейке.
</td>В этом примере ячейке задано фоновое изображение 1.jpg с помощью CSS-правила background. Далее вставляем код для Outlook, другие почтовые клиенты просто проигнорируют его. Проверено в Outlook 2003, 2007, 2010.
CSS в письме
Используйте только inline-стили; внешние CSS-файлы, скорее всего, будут проигнорированы. Не применяйте специфические правила (overflow, border-radius и т.д.).
Снова об Outlook: я не смог его заставить правильно реагировать на свойство valign="middle". Текст всегда располагался сверху. Пришлось использовать встроенную таблицу.
Изображения
Не надо их вставлять в письмо, пользуйтесь абсолютными ссылками на картинки, расположенные на сервере.
Указывайте высоту и ширину, alt-текст.
Ссылки
Применяйте атрибут target="_blank", чтобы страница не загружалась в одном окне с письмом.
Тестирование
Регистрируйте аккаунты в популярных email-сервисах (gmail, yandex, rambler, mail), устанавливайте Outlook, Mozilla Thunderbird и др. почтовые клиенты, затем занимайтесь проверкой отображения письма.
Либо воспользуйтесь сервисом Litmus - скриншоты письма во многих клиентах, анализатор кода с подсветкой ошибок. Но за удовольствие надо платить, есть пробный период.
Кэширование в почтовых клиентах
Заметил в Mozilla Thunderbird, что изображения сохраняются в кэше, поэтому при смене картинок не забывайте его очищать. Это можно сделать так: "Инструменты" - "Настройка". Вкладка "Дополнительные" - "Сеть и дисковое пространство" - кнопка "Очистить сейчас".