Рекомендации и рекомендации при написании электронных писем HTML

Я уже более десяти лет разрабатываю веб-сайты, но быстро обнаружил, что многие из моих привычек в разработке для Интернета бесполезны при разработке для почтовых клиентов. Это вызвало у меня огромное разочарование, поэтому я подумал, что задаю вопрос, который, как мы надеемся, найдет лучшие практики и необходимые соображения для других, таких как я, которые могут время от времени разрабатывать для gmail, outlook и т.д.

Пример: <style>...</style> против встроенного CSS.

Вкратце: что переносится из интернет-мира в электронный мир, а что нет.

Ответы

Ответ 1

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

Руководства по началу работы:

Поддержка CSS и общие руководства:

Вы всегда должны указывать свой CSS в html-email. Вот список инструментов CSS Inlining

Отзывчивые рекомендации:

Шаблоны и рамки:

Обратные альтернативные примеры:

Кроме того, ссылка Ted Goas Responsive выше имеет отличный пример жидкости.

Устранение неполадок и общие руководства:

Вам нужно будет использовать VML, чтобы получать фоновые изображения в Outlook (кроме в тег тела). Вот несколько ссылок VML:

Ответ 2

Я делал это (в разное время) для своей работы какое-то время. Есть много ошибок с HTML-сообщениями электронной почты. Различные клиенты электронной почты визуализируют HTML по-разному друг от друга и делают IE6 перспективным.

Вот итог того, что я узнал до сих пор.

  • Использовать встроенный CSS. Стили не всегда поддерживаются.
  • Использовать макеты таблиц. Я знаю, но div-макеты зависимы от css, и многие из почтовых клиентов не справляются.
  • Не используйте rowspan. Это вызывает странные проблемы с интервалом.
  • Не использовать фоновые изображения. Поддержка этих ограничений ограничена.
  • Теги стиля изображения с "display: block" . Это устраняет проблемы с пространством с помощью hotmail.
  • Если использование нескольких таблиц вставляет их в одну родительскую таблицу: это останавливает более странные проблемы с интервалом.
  • Не используйте Javascript: снова не поддерживается очень хорошо.
  • Убедитесь, что ваше письмо разборчиво без изображений. Пользователь может не загружать их.
  • Предоставить онлайн-версию и ссылку на нее. Это позволяет пользователям видеть предполагаемый контент, даже если их почтовый клиент ужасен.
  • Тест, тест, тест. Просто потому, что он работает в одном почтовом клиенте, это не значит, что он работает в других. Большим я стал Outlook 2007. Он использует слово для визуализации HTML (вздох).

Это далеко не полный список, но должен установить большинство людей на правильном пути.

Ответ 3

Inline css и tables - подумайте о веб-разработке около 2000 года, и все будет в порядке. Монитор кампании обладает отличным ресурсом для того, с чем могут справиться электронные почтовые клиенты. Также используйте http://www.emailonacid.com/ для тестирования - экономит на отправке нагрузок тестов.

Ответ 5

Это тоже хорошо, поэтому посмотрите, что встроенный CSS поддерживается в том, что браузер электронной почты: http://www.campaignmonitor.com/css/

Я и также рекомендую litmusapp (google it!). Это хороший инструмент для проверки вещей.