Кращі практики для створення HTML-електронних листів [закрито]

Я розробляю HTML-шаблон для розсилки електронної пошти. Я дізнався, що багато клієнтів електронної пошти ігнорують пов'язані таблиці стилів, а багато інших (включаючи Gmail) взагалі ігнорують декларації блоку CSS. Чи є атрибутами стилю вбудований мій єдиний вибір? Які найкращі практики для стилізації HTML електронних листів?

Кампанія Monitor має чудову матрицю підтримки, яка детально описує, що підтримується, а що немає серед різних поштових клієнтів.

Ви можете скористатися такою послугою, як Litmus, щоб переглянути, як електронний лист з’являється у кількох клієнтів і чи потрапляють вони у фільтри тощо.

Раніше я боровся з битвою за HTML-адресу електронної пошти. Ось кілька моїх порад щодо стилізації для максимальної сумісності між клієнтами електронної пошти.

• Вбудовані стилі - ви найкращий друг. Абсолютно не пов'язуйте таблиці стилів і не використовуйте <style>тег (наприклад, GMail, смужки, що містять теги, і весь його вміст).

• Проти вашого кращого судження використовуйте та використовуйте таблиці та зловживання . <div>s просто не виріжемо його (особливо в Outlook).

• Не використовуйте фонові зображення , вони плямисті і дратують вас.

• Пам’ятайте, що деякі клієнти електронної пошти автоматично перетворять введені гіперпосилання у посилання (якщо ви не прив’язуєте <a>їх самостійно). Іноді це може домогтися негативних ефектів (скажімо, якщо ви додаєте стиль до кожної із гіперпосилань, щоб відобразився інший колір).

• Будьте обережні гіперпосилання фактичного зв'язку з чимось іншим. Наприклад, не друкуйте http://www.google.comі не посилайтеся на нього https://gmail.com/. Деякі клієнти позначать це повідомлення як спам або небажану.

• Збережіть свої зображення якомога менше кольорів, щоб зберегти їх розмір.

• Якщо можливо, вставте свої зображення у свій електронний лист. Електронний лист не повинен звертатися до зовнішнього веб-сервера, щоб завантажити його, і вони не відображатимуться як додатки до електронного листа.

І останнє - тест, тест, тест ! Кожен клієнт електронної пошти робить інакше, ніж браузер.

Шимпанзе з пошти отримали досить гарну статтю про те, що не робити. (Я знаю, що це звучить не так, як ви хочете)

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

Загалом, все, що ви дізналися, що є поганою практикою веб-дизайну, здається, є єдиним варіантом html-пошти.

Основи:

• Абсолютні шляхи для зображень (наприклад, https://stackoverflow.com/random-image.png )
• Використовуйте таблиці для планування (ніколи не думав, що рекомендую!)
• Використовуйте вбудовані стилі (і старий шкільний файл CSS, щонайбільше 2.1, тінь-поле, наприклад, не працюватиме;))

Просто випробуйте стільки клієнтів електронної пошти, скільки зможете отримати свої руки, або використовуйте Латмус, як хтось із запропонованих вище! (кредит Джиму)

Редагувати:

Шимпанзе по пошті зробили чудову роботу, зробивши цей інструмент доступним для громади.

Він застосовує ваші класи CSS до елементів html, вбудованих для вас!

Окрім відповідей, розміщених тут, обов’язково прочитайте цю статтю:

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

Ресурс, з яким я завжди повертаюся до HTML-повідомлень, - це посібник з CSS CampaignMonitor .

Оскільки їх бізнес орієнтований виключно на доставку електронної пошти, вони знають свої речі так само, як і хтось, хто збирається

'Фрайд так. Я б створив 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 = "заповнити порожню", тому що прогнози в більшості випадків не завантажують зображення, і вам залишиться прозорий заголовок. Якщо ви, принаймні, призначите колір, який працює з усіма почуттями електронної пошти, це буде не шокувати для користувача. Ніколи не пробуйте та не використовуйте будь-які аркуші для укладання. Або взагалі CSS! Просто уникайте цього.

Залежно від того, чи ви копіюєте вміст із слова або спільного google Doc, обов'язково (команда + F) Знайдіть усі (') і (") та замініть їх у вашому програмному забезпеченні для редагування (особливо в dreemweaver), оскільки вони відображатимуться як код і це просто не добре.

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

Розгляньте можливість редагування всіх зображень у Photoshop з 15-кратним бордером на кожній стороні (зробіть фон прозорим і збережіть як PNG 24) зображення. Іноді клієнти електронної пошти не читають жодних стилів прокладки, які ви застосовуєте до зображень, щоб уникнути будь-якого дивного форматування!

Також я знайшов рядок під посиланнями особливо дратівливим, тому якщо ви застосовуєте <style = "text-decoration: none; color: # незалежно від кольору ви хочете тут!" > це видалить рядок і додасть вам потрібний вигляд.

Є багато, що дійсно може зіпсуватись із усім виглядом і відчуттям.