Рекомендации и рекомендации при написании электронных писем в формате HTML [закрыто]

84

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

Каковы передовые практики и необходимые соображения для других, подобных мне, которые могут время от времени создавать для Gmail, Outlook и т. Д.?

Пример: <style>...</style> vs встроенный CSS.

Короче говоря: что переносится из веб-мира в мир электронной почты, а что - нет?

Sampson
источник

Ответы:

133

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

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

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

Вы всегда должны вставлять свой CSS в HTML-адрес электронной почты. Вот список инструментов для встраивания CSS

Адаптивные руководства:

Шаблоны и фреймворки:

Адаптивные альтернативные примеры:

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

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

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

Джон
источник
38

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

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

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

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

Сорока
источник
5

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

матпол
источник
также некоторые рекомендации, предоставленные mailchimp здесь: mailchimp.com/articles/email_marketing_guide
Dal Hundal,