Стиль и изображения не работают при тестировании Rails-писем с Mailcatcher [duplicate]

«Боишься так. Я бы сделал HTML-страницу с таблицей стилей, затем с помощью jQuery применил таблицу стилей к стилю attr каждого элемента. Что-то вроде этого:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

Затем скопируйте DOM и используйте это в письме.

Я считаю, что картирование изображений работает очень хорошо. Если у вас есть верхние или нижние колонтитулы, которые являются образами, убедитесь, что вы применили bgcolor = "заполнить пробел", потому что Outlook в большинстве случаев не загрузит изображение, и вы останетесь с прозрачным заголовком. Если вы, по крайней мере, обозначаете цвет, который работает со всеми ощущениями электронной почты, он будет менее шоком для пользователя. Никогда не пытайтесь использовать листы для стилизации. Или CSS вообще! Просто избегайте этого.

В зависимости от того, копируете ли вы контент из слова или совместно с Google Doc (команда + F), найдите все (') и (") и замените их в своем программном обеспечении для редактирования (особенно dreemweaver) потому что они будут отображаться как код, и это просто не хорошо.

ALT - ваш лучший друг. Используйте тег ALT, чтобы добавить текст ко всем вашим изображениям. Так как вероятность того, что они не будут загружаться правильно. И этот текст ALT - это то, что заставляет людей щелкнуть по кнопке (см. Изображения). Также определите ваши изображения Ширина, Высота и сделайте границы 0, чтобы не было странных линий вокруг вашего изображения.

Рассмотрите возможность редактирования всех изображений в Photoshop с 15px-границами с каждой стороны (сделать прозрачный фон и сохранять как PNG 24). Иногда клиенты электронной почты не читают стили заполнения, которые вы применяете к изображениям, чтобы избежать любого странного форматирования!

Также я нашел строку под ссылками, особенно раздражающую, поэтому, если вы примените & lt; style = "text-decoration: none; цвет: # какой цвет вы хотите здесь! "> он удалит линию и даст вам желаемый вид.

Существует много, что может действительно испортить внешний вид.

У шимпанзе почты есть довольно хорошая статья о том, что не делать. (Я знаю, что это звучит не так, как нужно)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

В общем, все, что вы узнали, это плохая практика для веб-дизайна, кажется единственной возможностью для html-email.

Основы:

• Имеют абсолютные пути для изображений (например, https://stackoverflow.com/random-image.png )
• Использовать таблицы для макета (никогда не думал, что рекомендую это!) [/ ​​g4]
• Использовать встроенные стили (и старая школа css тоже, самое самое 2.1, box-shadow не будет работать, например;))

Просто тест на столько клиентов электронной почты, сколько вы можете взять на себя, или использовать Litmus, как кто-то еще предложил выше! (кредит Джиму)

EDIT:

Почтовый шимпанзе проделали отличную работу, сделав этот инструмент доступным для сообщества.

Он применяет ваши классы CSS к вашим элементам html, встроенным для вас!

Ресурс, в котором я всегда возвращаюсь к сообщениям в формате HTML, - это руководство по кампаниям CampaignMonitor .

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

Раньше я боролся с блогом электронной почты HTML. Вот некоторые из моих советов о стилизации для максимальной совместимости между почтовыми клиентами.

• Встроенные стили - лучший друг. Абсолютно не связывайте таблицы стилей и не используйте тег <style> (например, GMail, разделите этот тег и все его содержимое).
• Против вашего лучшего суждения, использования и злоупотребления таблицами. <div> s просто не будет его обрезать (особенно в Outlook).
• Не используйте фоновые изображения, они пятнистые и будут вас раздражать.
• Помните, что какой-то адрес электронной почты клиенты автоматически преобразуют введенные гиперссылки в ссылки (если вы сами не привязываете <a>). Иногда это может привести к негативным последствиям (скажем, если вы добавляете стиль каждой гиперссылки к другому цвету).
• Будьте осторожны с гиперссылкой на фактическую ссылку с чем-то другим. Например, не печатайте http://www.google.com, а затем связывайте его с https://gmail.com/. Некоторые клиенты будут отмечать это сообщение как спам или нежелательный файл.
• Сохраните изображения в виде нескольких цветов, чтобы сохранить размер.
• Если возможно, вставьте свои изображения в свой адрес электронной почты. Электронному письму не нужно будет обращаться к внешнему веб-серверу, чтобы загрузить его, и они не будут отображаться в виде вложений в адрес электронной почты.

И, наконец, тест, тест, тест! Каждый почтовый клиент делает все иначе, чем браузер.

В дополнение к ответам, размещенным здесь, убедитесь, что вы прочитали эту статью:

http://24ways.org/2009/rock-solid-html-emails