Вещи, которые не будут работать или не будут работать, если кросс-клиентский рендеринг является бизнес-требованием (на основе вашего фрагмента кода).
- html5
- медиа-запросы
- стилей привязки с классами и идентификаторами (все должно быть встроено - с помощью программного c инструмента или закодировано вручную)
- CSS отступы (ограниченная поддержка)
- CSS поля (ограниченная поддержка)
- абзацы
- максимальная ширина CSS правило
Если вам нужен кросс-клиентский шаблон, следуйте этим рекомендациям. Это примерно в моей голове, поскольку несколько лет я профессионально кодировал электронные письма как go, но у меня нет каких-то «жестких» тестов или ссылок, подтверждающих все это.
- Используйте HTML 4.01 doctype и его правила.
- Адаптивные (RWD) электронные письма - действительно продвинутый материал следующего уровня. Я бы не рекомендовал это, пока вы действительно не изучите asp, что происходит с движками рендеринга (много тестирования). А пока придерживайтесь гибкой компоновки, чего можно добиться с помощью структуры таблиц, как описано здесь . Кроме того, медиа-запросы не работают в кросс-клиентских приложениях, я бы их отбросил.
- Поля, отступы имеют смешанную поддержку, используйте их только на
td элементах и всегда удваивайте добавление ячеек, если можете. - Избегайте коротких объявлений CSS. Вместо
border используйте border-width, border-style, border-color. Ширина всегда должна быть go первой. - Не использовать абзацы (
p теги), максимально использовать td, используя cellpadding и cellspacing, которые работают везде. - Выравнивание содержимого (текст, изображения) проще всего выполнить с помощью атрибутов
align и valign тегов td. При правильном использовании может очень помочь с кодированием любого макета. - Вы можете использовать это CSS руководство и Могу ли я отправить электронное письмо для быстрой проверки фактов, как указано @cloned (в мои дни не было Can I Email).
- Подумайте о себе: сейчас 1994 год, и все, что у вас есть в вашем распоряжении, - это таблицы (много их), изображения, шрифты по умолчанию и встроенный CSS :) Вы можете пройти долгий путь только с этим.
- Firefox было полезно для меня во время разработки, потому что его движок рендеринга близок к тому, что Thunderbird будет выводиться на экран.
- Если вы можете скрыть правильную визуализацию какого-либо пользовательского шрифта, или анимацию gif, или интересное адаптивное поведение, это прекрасно, но не рассчитывайте на это. Это определенно не будет кросс-почтовым взаимодействием с клиентами, и клиенты / менеджеры, на которые вы работаете (если они у вас есть), должны знать об этом. Это « прогрессивное улучшение » для рендеринга электронной почты :)
- Большинство почтовых клиентов будут делать ужасные вещи с вашим шаблоном, например искажать ваш код до неузнаваемости, добавляя пользовательские идентификаторы, перезапись имен классов, добавление собственных стилей или пользовательских классов, разделение всего заголовочного раздела и т. д. c. Часть этого связана с безопасностью, другая часть - с движком рендеринга. Вот почему вы должны большую часть времени полагаться на таблицы и встроенные стили и сводить количество
head к абсолютному минимуму, который, как вы знаете, будет работать в программах (почтовых клиентах), на которые вы нацеливаетесь.
Короче говоря, это действительно глубокий c, понимание придет к вам по мере того, как вы приобретете опыт работы с результатами тестирования и корректировки кода. Вы должны инвестировать в тестирование предварительного просмотра программного обеспечения (вы упомянули Litmus). Я использовал электронную почту на Acid, и это тоже здорово. Вы должны использовать его для предварительного просмотра результатов в разных почтовых клиентах, а не для отправки ваших кампаний / электронных писем.
Самое важное:
Если вы меняете свой код, протестируйте это сразу (лакмус / электронная почта на кислоте), чтобы получить представление о том, как он отображается в каждом почтовом клиенте. Это утомительно и требует времени, но через несколько раз вы будете точно знать, что вы можете сделать и каков будет результат. Изолируйте то, что вы тестируете, и делайте это часто.
Второй по важности:
Определите, на какой пул почтовых клиентов вы нацеливаетесь. Это нужно делать по согласованию с вашим клиентом / менеджером (если они у вас есть). Вы писали, что хотите шаблон, который будет работать "во всех почтовых клиентах". Это просто нереально c. Их слишком много.
Я тестировал более 60 конфигураций, когда писал новый шаблон. Это 60+ скриншотов для проверки для каждого теста. Вам нужно сузить круг до «достаточно хорошего» пула, который можно обоснованно протестировать. Это следует сверить со статистикой списка подписчиков и видимых адресов электронной почты, используемых подписчиками информационных бюллетеней.
Например: если 50% подписчиков используют Outlook 2007, а остальные используют Gmail, то вы знаете, что вы необходимо настроить таргетинг и протестировать этих двух клиентов. Остальное просто «бонус». Конечно, вы не всегда это знаете, поэтому вам следует также включить наиболее популярных клиентов. Используйте статистику publi c, предоставленную Litmus, или кем-то еще, чтобы определить, что является «популярным» в настоящее время.
Другое дело, что вы можете или не должны включать в свои спецификации тестирования c web почтовые клиенты, относящиеся к географической области c, например gmx.de или onet .pl, et c. Большинство из них имеют собственные движки рендеринга. Некоторые из них даже имеют особые правила, которые применяются к информационным бюллетеням, отправляемым ими своим пользователям. В этом случае у вас должна быть возможность получить письменную документацию о том, как следует подготовить информационный бюллетень (специальные теги, форматирование и т. Д. c).
Также подумайте о некоторых более непонятных почтовых клиентах, что, если кто-то использует Kindle или Apple Watch, чтобы читать электронную почту? Что они должны увидеть? Некоторые клиенты этого типа используют «только текстовую» версию информационного бюллетеня, поэтому вам также следует подготовить текстовую версию, если HTML -версия не может быть отображена, или если пользователь специально заблокировал HTML и запрашивает только текст.