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

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

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

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

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

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

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

• Монитор кампании
• Mailchimp
• Sitepoint
• Привлекайте клиентов в Интернете
• Тут +
• Электронная почта на Acid

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

• Монитор кампании | Руководство по поддержке CSS
• HTML-шаблон электронной почты
• Лакмус | Почтовые клиенты часто задаваемые вопросы
• Монитор кампании | Это будет работать?
• Mailchimp | Руководство по электронному маркетингу
• Электронная почта на Acid | Основы CSS: руководство по стилизации HTML для начинающих

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

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

• Монитор кампании | Руководство по отзывчивой поддержке
• Кампания стиля | Руководство по отзывчивой поддержке
• Лакмус | Адаптивная инфографика с инструкциями
• Лакмус | Большой список адаптивных и мобильных ресурсов

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

• Тед Гоас | Шаблоны отзывчивой электронной почты Cerberus
• Электронная почта на Acid | Адаптивный шаблон
• Брайан Грейвс | Шаблоны адаптивных писем
• Antwort | Адаптивные макеты
• Zurb | Чернильные адаптивные шаблоны
• Монитор кампании | Бесплатные шаблоны писем
• Mailchimp | Электронная почта Blueprints

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

• Тут + | Адаптивная электронная почта без медиа-запросов
• Переполнение стека | Пример жидкости
• Электронная почта на Acid | Макет жидкости монстра
• Кампания стиля | Гибкий мобильный дизайн электронной почты
• Переполнение стека | Плавающий контент

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

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

• Электронная почта на Acid | Обходное решение ошибки Yahoo Media Query
• Переполнение стека | Colspans и Rowspans в электронной почте HTML
• Mailchimp | Условный CSS Outlook
• Лакмус | Запрет синих гиперссылок
• Переполнение стека | Веб-шрифты в электронной почте HTML

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

• Монитор кампании | Пуленепробиваемые фоны
• Монитор кампании | Пуленепробиваемые кнопки

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

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

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

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

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