#css #html-email #email-client
#css #html-электронная почта #email-client
Вопрос:
В настоящее время я кодирую электронное письмо в формате HTML, и это чертов кошмар. Я довольно близок к идеальному дизайну, но мои изменения находятся на стадии, когда исправление одного клиента вызывает проблемы для исправления другого клиента. Я где-то читал (не могу найти), что outlook применяет идентификатор #outlook к телу электронного письма. Это изменило бы жизнь, если бы это произошло для многих клиентов… Google тоже бесплоден — так может кто-нибудь поделиться мудрыми словами мудрости по этой теме?
Спасибо,
~ Харли
Комментарии:
1. Для тех, кто испытывает тот же кошмар, я использую MJML, фреймворк, который упрощает разработку адаптивных электронных писем, которые работают на большинстве HTML-клиентов. Надеюсь, это кому-то поможет.
Ответ №1:
Мои мудрые слова основаны на опыте работы с кошмаром под названием HTML-электронные письма. Некоторые всегда будут применять свой собственный мусор ко многим элементам. Поэтому, когда вы спрашиваете, добавляют ли они идентификатор, я спрашиваю, добавляют ли они к чему? Ваш первый элемент? все элементы? Ага. Много раз они так и делают. Многие особо не заморачиваются. Зависит от почтового клиента.
Я писал электронные письма в формате HTML для многих крупных именитых клиентов. В конце концов, лучше всего вернуться к сырому, старому школьному html. Забудьте о CSS. Если вы разрабатываете и внедряете свою новостную рассылку в формате HTML, полностью основанную на старых правилах переходного HTML версии 4.0 и всех устаревших методах оформления со времен hayday of code, тогда вы должны быть хороши для всех клиентов.
Вы можете добавить css, если хотите, но подобные зависимости могут и, скорее всего, будут больше похожи на исправление, чем на решение.
Комментарии:
1. Эй, приятель, я полностью погружаю тебя в кошмар. Я пришел в веб-дизайн сразу после того, как от макетов таблиц отказались в пользу CSS2, так что для меня это был мега-процесс обучения. Я делаю это по большей части — как я уже сказал ниже, моя главная проблема заключается в том, что в
background-position: right -4px;клиентах на базе webkit это отображается идеально, однако многие другие удваивают его. своего рода боль. конкретные селекторы решили бы эту проблему по большей части … спасибо за мудрые слова 🙂2. И только этот метод показывает, что вы используете фоновое изображение, которое я бы не рекомендовал для HTML-рассылок. Я говорю всем клиентам, что все изображения должны быть на уровне блоков, и над ними не должно быть ничего динамического. Например, даты или заголовки или что-нибудь еще. В идеальном мире селекторы могли бы справиться с этим. Но многие почтовые клиенты просто удаляют все объявления css, кроме базовых. Насколько мне известно, никакого списка не существует. Но такие вещи, как z-индекс, позиция и т. Д., Почти всегда удаляются.
Ответ №2:
Да, Outlook нередко добавляет идентификаторы, теги MSO и кучу другой ерунды. Просто просмотрите источник HTML-сообщения электронной почты после его передачи через Outlook, и вы поймете, что я имею в виду.
Важно настроить ожидания вашего клиента, что сообщения электронной почты в формате HTML никогда не будут идеальными для всех почтовых клиентов. Поддержка улучшается, но фоновые изображения, CSS и модель box в лучшем случае шаткие.
Лучший совет, который я могу дать, — начать с шаблона MailChip и работать оттуда. В противном случае простые табличные конструкции лучше всего подходят для всех клиентов.
Также из MailChip (http://kb.mailchimp.com/article/top-html-email-coding-mistakes /)
Связанные файлы CSS не всегда будут работать в электронной почте в формате HTML, поэтому вам придется использовать встроенный или встроенный CSS. Обычно, когда вы кодируете веб-страницу, вы помещаете встроенный CSS-код между вашими тегами. Но многие почтовые приложения (особенно браузерные) удаляют теги ЗАГОЛОВКА и тела вашего HTML-письма, поэтому ваш CSS тоже будет удален.
Комментарии:
1. Кроме того, не совершайте ошибку, думая, что такие громкие имена, как campaign monitor или mail chimp, являются конечным словом в дизайне HTML-рассылки. Мне нужно полностью переписать информационные бюллетени, которые были ошибками шаблона от campaign monitor — так называемого эксперта по этому вопросу. Они пытаются найти обходные пути, чтобы найти золотую середину для всех клиентов, но в итоге это просто лишний мусор, которого там не должно быть. хотите, чтобы это было сделано правильно? возвращайтесь к основам, пока все не перейдут на приемлемый стандарт — или примите тот факт, что на всех платформах никогда не будет баланса.
Ответ №3:
Это может помочь:
<html>
<body>
<!--[if gte mso 9]><![endif]–>
gte mso 9
<!–[if gte mso 9]><![endif]–>
<!--[if !gte mso 9]><!---->
!gte mso 9
<!--<![endif]-->
<!--[if !mso]><!-->
!mso
<!--<![endif]-->
</body>
</html>