Найкращі практики та рекомендації під час написання електронних листів у форматі HTML [закрито]

Я розробляю веб-сайти вже більше десяти років, але швидко виявив, що багато мої звички в розробці для Інтернету марні при розробці для поштових клієнтів. Це викликало у мене величезне розчарування, тому я подумав, що запитаю:

Які найкращі практики та необхідні міркування для інших, таких як я, які час від часу можуть задуматися для Gmail, Outlook тощо?

Приклад: <style>...</style> проти вбудованого CSS.

Коротше кажучи: що переходить із веб-світу на світ електронної пошти, а що ні?

Це здається чудовим місцем для переліку деяких ресурсів для тих, хто намагається вивчити електронну пошту HTML. Це (мабуть) найповніший перелік ресурсів електронної пошти HTML, які ви знайдете в Інтернеті. Щасливого навчання.

Посібники з початку роботи:

• Монітор кампанії
• Mailchimp
• Sitepoint
• Зверніться до клієнтів в Інтернеті
• Tuts +
• Електронний лист про кислоту

Підтримка CSS та загальні посібники:

• Монітор кампанії | Посібник із підтримки CSS
• HTML шаблон електронної пошти
• Лакмус | Поширені запитання щодо клієнтів електронної пошти
• Монітор кампанії | Чи вдасться?
• Mailchimp | Посібник з маркетингу електронною поштою
• Електронний лист про кислоту | Основи CSS: Посібник для початківців із стилізації HTML

Ви завжди повинні вбудовувати свій CSS в html-електронну пошту. Ось список інструментів для вставки CSS

Чуйні путівники:

• Монітор кампанії | Швидкий посібник з підтримки
• Стильна кампанія | Швидкий посібник з підтримки
• Лакмус | Адаптивний Інфографіки
• Лакмус | Великий список адаптивних та мобільних ресурсів

Шаблони та рамки:

• Тед Гоас | Шаблони адаптивних листів Cerberus
• Електронний лист про кислоту | Адаптивний шаблон
• Брайан Грейвз | Адаптивні шаблони електронної пошти
• Мурашник | Адаптивні макети
• Зурб | Чорнильні адаптивні шаблони
• Монітор кампанії | Безкоштовні шаблони електронної пошти
• Mailchimp | Креслення електронною поштою

Адаптивні альтернативні приклади:

• Tuts + | Відповідна електронна пошта без запитів медіа
• Переповнення стека | Приклад рідини
• Електронний лист про кислоту | Розкладка рідини Монстра
• Стильна кампанія | Рідкий мобільний дизайн електронної пошти
• Переповнення стека | Плаваючий вміст

Крім того, посилання Ted Goas Responsive вище має чудовий приклад рідини.

Усунення несправностей та загальні вказівки:

• Електронний лист про кислоту | Вирішення проблеми з помилками запитів Yahoo Media
• Переповнення стека | Colspans і Rowspans в HTML-пошті
• Mailchimp | Умовний CSS Outlook
• Лакмус | Заборона синіх гіперпосилань
• Переповнення стека | Веб-шрифти в електронній пошті HTML

Вам потрібно буде використовувати VML для отримання фонових зображень, що працюють в Outlook (крім тегу body ). Ось кілька посилань на VML:

• Монітор кампанії | Куленепробивні фони
• Монітор кампанії | Куленепробивні кнопки

Я роблю це (досить часто) для своєї роботи вже деякий час. Є багато підводних каменів з електронними листами HTML. Різні клієнти електронної пошти відображають HTML по-різному один від одного, і IE6 виглядає вдосконаленим.

Ось літо того, про що я дізнався до цього часу.

• Використовуйте вбудований CSS : стилі не завжди підтримуються.
• Використовуйте макети таблиць : я знаю, але макети div залежать від css, і багато хто з поштових клієнтів не справляються.
• Не використовуйте інтервал рядків : це спричиняє дивні проблеми з інтервалом.
• Не використовуйте фонові зображення : підтримка цих зображень обмежена.
• Стилі тегів зображень із "display: block" : це виправляє дивні проблеми з інтервалом у Hotmail.
• Якщо використовується кілька таблиць, вкладіть їх в одну батьківську таблицю : Це зупинить більш дивні проблеми з інтервалом.
• Не використовуйте Javascript : знову ж таки підтримується не дуже добре.
• Переконайтеся, що ваша електронна пошта є розбірливою без жодних зображень : користувач може не завантажувати їх.
• Надайте онлайн-версію та посилання на неї : це дозволяє користувачам бачити передбачуваний вміст, навіть якщо їх поштовий клієнт страшний.
• Тест, тест, тест : те, що це працює в одному поштовому клієнті, не означає, що працює в інших. Великий приклад - Outlook 2007. Він використовує слово для відтворення HTML (зітхання).

Це далеко не вичерпний перелік, але він повинен налаштувати більшість людей на правильний шлях.

Вбудовані css і таблиці - подумайте про веб-розробку близько 2000 року, і ви будете добре. Монітор кампанії має чудовий ресурс для того, з чим можуть працювати клієнти електронної пошти. Для тестування також використовуйте http://www.emailonacid.com/ - це заощаджує необхідність надсилати купу тестів.