Я, возможно, мог бы немного поговорить о том, что можно и чего нельзя делать в email кодировании, но если вы рассмотрите лишь пару базовых принципов, вы будете знать больше, чем большинство ..
gmail (и MS Outlook) - два самых сложных почтовых клиента для кодирования, но можно разработать отзывчивое электронное письмо с высоким уровнем дизайна, которое будет хорошо отображаться через клиентов. В Gmail он просто отображает макет вашего рабочего стола без отклика.
Вы должны использовать совсем немного CSS или вообще не использовать его при начале написания электронного письма. Подумайте о подходе «сначала на рабочем столе» и запишите его настолько простым, насколько это возможно, так, как вы хотели бы, чтобы он отображался при просмотре с шириной 600 пикселей. Мне все равно, если люди говорят, что это работает по электронной почте или нет, если есть более устаревший способ сделать то же самое, более устаревший метод всегда будет более совместимым с почтовыми клиентами.
Забудьте о css и html , как вы обычно его используете. Вы должны попытаться ограничить свои теги только xhtml1.0 только допустимыми тегами. На самом деле вы можете сделать много макетов с ограниченной палитрой тегов, вам просто нужно придумать более округлые способы сделать это.
Для очень простого примера:
Вместо того, чтобы использовать отступы или отступы или прозрачные спейсеры для достижения вертикального интервала внутри кнопки CTA, вы можете использовать таблицу, вложенную на одну таблицу глубиной, допустимые теги атрибута xhtml и нулевой CSS для достижения вертикально центрированной метки в кнопке с мягкими цветами с цветной текст.
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#00cc66" width="200">
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
</tr>
<tr>
<td align="center"><font color="#ffffff"><b>Click Here</b></font></td>
</tr>
<tr>
<td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
</tr>
</table>
Шаг 1
Кодируйте свою электронную почту без CSS и сделайте так, чтобы она выглядела хорошо.
На этом этапе ваш алфавит должен состоять только из
* Тысяча тридцать четыре * HTML, тело,
таблица ,
TBODY , тр, тд, пролет, а, б, NOBR, SRC, альт, цель,
CELLPADDING ,
cellspacing , border, align, bgcolor, color, height и буквенно-цифровое содержимое в этих тегах.
У вас может возникнуть соблазн использовать valign, стиль, фон, класс ...... ...... 1045 * НЕ .. еще нет
Если вы хотите достичь максимально возможной перекрестной совместимости, примите к сведению, что некоторые клиенты будут видеть это таким образом, поэтому вам следует сделать это как можно более чистым и презентабельным.
Шаг 2
После того, как базовая структура выглядит хорошо и презентабельно, вы можете рассмотреть возможность ее улучшения. Вы можете начать добавлять некоторые теги CSS и HTML4, чтобы улучшить стилизацию для тех клиентов, которые его увидят. Но не бредите, старайтесь придерживаться минималистического подхода.
После того, как вы установили свой CSS, какой бы CSS вы ни хотели использовать (caniuse.com - отличный ресурс, если вы хотите получить представление о том, что пытаться использовать). Как только все это на месте, удалите все это внезапно и без ущерба, просто удалите эти новые теги, больше ничего. Теперь посмотрите на электронную почту. Если удаление этих тегов не нарушило ваш макет, тогда все в порядке. Вы можете безопасно удалить их и спать спокойно, зная, что у вас есть совместимая электронная почта. Если что-то нарушило ваш макет, лучше всего не иметь его там, потому что многие клиенты собираются сделать именно это и удалить его, и у вас будет действительно плохой день, если вы оставите его там.
Шаг 3
Как только это будет сделано, вы можете добавить пару [тег: медиа-запросы]. У меня есть медиа-запросы на 600 и 400, и я удваиваю их, чтобы добиться более высокой совместимости. Используя CSS в голове, вы можете переписать любой ваш макет в HTML важными тегами. Таким образом, те клиенты, которые читают его, будут игнорировать встроенный стиль, который вы использовали, и придерживаться нового стиля, который вы добавляете. Это отлично подходит для настройки ширины элементов, скрытия или отображения элементов и т. Д.
.mobile {display:none;}
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
*[class="desktop"]{display:none !important;}
*[class="mobile"]{display:block !important;width:auto !important;max-height:none !important;overflow:visible !important;float:none !important;}
С этими четырьмя строками вы можете выполнить почти всю свою адаптивную структуризацию.
** примечание: использование настольного класса требует дополнительных усилий
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr style="mso-display:none;">
<td align="center" class="mobile" style="width:0;max-height:0;overflow:hidden;float:left;mso-display:none;">
<a href="" target="_blank">
<img class="banner" alt="o" src="logo-wide.gif" border="0" width="0">
</a>
</td>
</tr>
</table>
Это, наверное, самый важный CSS в моем коде. Таблица примеров не будет отображаться на любых настольных устройствах (включая Gmail), но будет отображаться на мобильных устройствах. Единственный клиент, с которым не удается правильно работать, - это Windows Mobile 7.
Я использую эти два класса для удаления элементов из мобильного макета для достижения адаптивного дизайна. Класс рабочего стола избегают и используют только в редких случаях, потому что это означает, что ваша электронная почта потеряет совместимость в Windows Mobile 7.
Шаг 4
Тестовый тест Тестовый тестовый тест. Смехотворно безумно, как легко может сломаться электронная почта. Не доверяйте Litmus или любому набору тестов, потому что они точны только до определенной степени. У вас должно быть тестовое устройство для каждого вашего устройства. Если вы потратили значительно больше времени на тестирование электронной почты, чем сколько времени вам потребовалось для написания кода, значит, вы недостаточно тщательно протестировали ..
Не верьте тому, что люди говорят о кодировании электронной почты, если вы не попробовали, не проверили и не доказали это сами. Потому что гораздо больше людей думают, что знают о чем они говорят, чем те, которые на самом деле знают, особенно когда речь идет о чтении блогов и статей о кодировании электронной почты.
Если вы хотите использовать пример или шаблон, вот шаблон, который я создавал в течение примерно 2-х лет кодирования 2+ писем почти каждую неделю. Я могу в значительной степени гарантировать, что это будет самый распространенный пример маркетинговой электронной почты, совместимой с клиентом и устройством. Не стесняйтесь копировать, модифицировать, что угодно.
Стоит отметить. Когда я работал над стартапом, мне приходилось кодировать несколько писем в неделю, и мы решили сделать это самым сложным из возможных способов: безумной совместимостью с клиентом и использованием как можно меньшего количества изображений. Никакого текста на изображениях, скорее мне пришлось склеить текст и сделать так, чтобы фоновые изображения за текстом хорошо работали на клиентах. Фоны для текста в электронном письме невероятно трудно сделать хорошо для некоторых почтовых клиентов. Возможно, но расстраивает как дерьмо. Когда я ушел с этой работы и начал работать с известными брендами, в течение короткого периода времени мне приходилось кодировать еще несколько писем (я больше не пишу письма) ... но для тех крупных брендов ... они не сделали Я не хочу, чтобы я тратил часы на написание электронных писем. Они предпочли просто сделать это одно большое изображение, текст и все. На этой ноте, когда я работал над стартапом ... мы однажды запускали тест, сравнивая частоту кликов по сильно отшлифованным закодированным электронным письмам с текстовыми электронными письмами со всеми электронными письмами с изображениями.