Какие рекомендации вы можете дать для расширенного форматирования HTML в электронных письмах при сохранении хорошей визуальной стабильности для многих клиентов и веб-интерфейсов электронной почты?
Предлагаемый несвязанный ответ на вопрос о переполнении стека:
http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html
Которая содержит следующие рекомендации:
- Поместите таблицу стилей
<body>вместо.<head>
Некоторые почтовые клиенты удаляют CSS из головы, но оставляют его, если блок стиля (недействительно) находится в теле. - По возможности используйте встроенные стили
Gmail удалит любую таблицу стилей, будь то в<head>или в<body>, но соблюдает встроенные стили, назначенные с помощьюstyle=""атрибута - Вернуться к таблицам За
последние годы стандарты электронной почты сделали гигантский шаг назад благодаря Outlook 2007, использующему механизм визуализации Microsoft Word. Забудьте о большей части того, что вы узнали о позиционировании без таблиц стилей. - Не полагайтесь на изображения
Большинство клиентов и большинство почтовых веб-клиентов не будут отображать изображения, если пользователь специально не попросит их отобразить.
Еще у меня есть несколько «неподтвержденных» истин, которые я не помню, где их читал.
- Не используйте более двух уровней вложенности в таблицах.
Это правда. Что может случиться, если я это сделаю? Есть ли какой-то конкретный клиент / клиенты, которые задыхаются от этого? - Будьте осторожны с вложением фоновых изображений в ячейки / таблицы
Насколько я понимаю, вы можете столкнуться с ситуациями, когда фоновое изображение применяется в нисходящей таблице / ячейке полностью заново, а не просто «просвечивает». Опять правда или нет? Какие клиенты?
Я хотел бы дополнить этот список дополнительными рекомендациями и опытом из окопов.
Можете ли вы предложить какие-либо дополнительные предложения?
Обновление: я специально прошу дать рекомендации по части дизайна в HTML и ее согласованности. Вопросы об общих рекомендациях по предотвращению спам-фильтров и общей вежливости уже есть на SO.
Ответы:
На самом деле действительно сложно создать приличное электронное письмо в формате HTML, если подойти к нему с точки зрения «современного HTML и CSS».
Для достижения наилучших результатов представьте, что сейчас 1999 год.
styleатрибутом, если вам необходимо использовать CSS.float<a href="http://domain.tld">www.someotherdomain.tld</a>, плохие )Удачи ;)
Обновите, чтобы ответить на дополнительные вопросы:
Я считаю, что это устаревшее руководство, относящееся к Lotus Notes. Вложенные таблицы должны быть в порядке, но на самом деле, если у вас есть достаточно сложный макет, чтобы они вам понадобились, у вас, вероятно, все равно возникнут проблемы. Сделайте свой макет простым .
Это может быть связано с вышеизложенным, и то же самое применимо, если вы усложняете задачу, тогда у вас будут проблемы. Последние версии Outlook вообще не поддерживают фоновые изображения, поэтому рекомендуется полностью забыть о них.
источник
Всегда используйте многостраничный пантомим и предоставляйте альтернативу в виде обычного текста.
источник
Люди, стоящие за Campaign Monitor, также запустили веб-сайт проекта стандартов электронной почты с большим количеством полезной информации.
источник
Взгляните на этот шаблон, он похож на html5boilerplate, но для электронных писем: http://htmlemailboilerplate.com/
источник
Я думаю, что это более низкий уровень, чем вопрос, который вы задаете, но если вы действительно хотите, чтобы HTML-письмо правильно просматривалось как можно большим количеством клиентов, убедитесь, что оно использует действительный MIME. В частности, для того, чтобы электронное письмо считалось действительным MIME, заголовки ДОЛЖНЫ (в смысле этого слова RFC) содержать оба этих заголовка:
Очень строгие клиенты будут отображать ваш HTML как необработанный текст, если один или другой из них отсутствует. Вы были бы удивлены, сколько крупных онлайн-продавцов, которым следовало бы лучше знать, облажались (в частности, я получал электронные письма в формате HTML без MIME-версии: заголовки от Amazon и ACM в прошлом)
источник
источник
Совет из трех слов: тест, тест, тест.
Ознакомьтесь с сервисом тестирования электронной почты LitmusApp.com. Вы отправляете им сообщение, и они обрабатывают его в группе клиентов и показывают вам скриншоты результатов. Не идеально, но неплохо.
(Lotus Notes до 8.0, кстати, действительно воняет для почты в формате HTML)
Кроме того, помимо встроенных стилей CSS, я рекомендую по возможности переключаться на теги.
источник
Встраивайте свои изображения, а не ссылки на них.
Это плохо :
Это хорошо :
Да, это выглядит странно, но ознакомьтесь с этим руководством по встраиванию изображений в электронные письма .
источник
Если вы включаете блок стиля, не начинайте новую строку с «.classname» или «.» что-нибудь. Перед месячными поставьте скобу или что-то в этом роде. Если вы этого не сделаете, некоторые системы веб-почты не будут правильно отображать ваши таблицы стилей.
Многие люди ошибочно предположили, что они не могут использовать блоки CSS в электронных письмах из-за такого поведения ... IIRC "." является разделителем тела для SMTP. Системы будут стремиться скрыться в своих почтовых хранилищах, чтобы предотвратить неправильное распознавание содержимого одного сообщения как нового сообщения. Способ обработки имеет тенденцию нарушать любой стиль, начинающийся с новой строки с точкой.
источник