Які вказівки щодо дизайну HTML електронної пошти існують? [зачинено]

101

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

Непов’язана відповідь на запитання про переповнення стека запропонувала:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

Що містить такі вказівки:

  1. Розмістіть таблицю стилів <body>замість<head>
    Деякі клієнти електронної пошти знімуть CSS з голови, але залиште його, якщо блок стилів (недійсно) знаходиться в тілі.
  2. Використовуйте стилі вбудованих версій, де будь-коли можливо,
    Gmail зніме будь-яку таблицю стилів, чи в, <head>або в <body>, але шануйте стилі вбудованого розміру, призначені за допомогою style=""атрибута
  3. Повернення до таблиць
    Стандарти електронної пошти фактично зробили величезний крок назад за останні роки завдяки Outlook 2007 за допомогою механізму візуалізації Microsoft Word. Вивчіть більшість того, що ви дізналися про позиціонування без таблиць стилів.
  4. Не покладайтеся на зображення
    Більшість клієнтів та більшість клієнтів електронної пошти не відображатимуть зображення, якщо користувач спеціально не вимагає їх відображення.

У мене також є кілька «непідтверджених» істин, які я не пам’ятаю, де я їх читав.

  1. Не використовуйте більше двох рівнів вкладання в таблицях.
    Це правда. Що, швидше за все, станеться, якщо я це зробити? Чи є якийсь конкретний клієнт / клієнти, які задихаються від цього?
  2. Будьте уважні до вкладення фонових зображень у комірки / таблиці.
    Як я розумію, у вас можуть виникнути ситуації, коли фонове зображення застосовується у низхідній таблиці / комірці повністю заново, а не просто "просвічується". Знову правда чи ні? Які клієнти?

Я хотів би скласти цей список, щоб отримати більше рекомендацій та досвіду з окопів.

Чи можете ви запропонувати будь-які подальші пропозиції?

Оновлення: я конкретно прошу вказівки щодо частини дизайну в HTML та послідовності. Питання щодо загальних рекомендацій щодо уникнення спам-фільтрів та загальної ввічливості вже є на ПО.

html  email 
— каа
джерело
— Іван

Відповіді:

63

Насправді дуже важко зробити гідний HTML-лист, якщо ви підходите до нього з точки зору "сучасного HTML та CSS".

Для найкращих результатів уявіть, що це 1999 рік.

  • Поверніться до таблиць для макета (або бажано - не намагайтеся скласти будь-який складний макет)
  • Не бійтеся фонових зображень (вони порушуються в Outlook 2007 та Gmail).
  • Річ стилю-тегів-у-тілі полягає в тому, що Hotmail звик сприймати це таким чином - я майже впевнений, що зараз це знімають. Використовуйте вбудовані стилі з styleатрибутом, якщо вам потрібно використовувати CSS.
  • Забудьте повністю про float
  • Пам'ятайте, що ваші зображення, ймовірно, будуть заблоковані - використовуйте колір тла та тексту на вашу користь - переконайтеся, що є текст, який можна читати, а зображення відключені
  • Будьте дуже обережні з посиланнями, будьте особливо обережні до всього, що схоже на URL-адресу в тексті посилання - ви злите фільтри на "фішинг" (наприклад, <a href="http://domain.tld">www.someotherdomain.tld</a>це погано )
  • Пам’ятайте, що «складка» клієнтів веб-пошти має надзвичайно високий рівень сторінки (на екрані 1024x768 більшість інтерфейсів не відображатиметься більше ста пікселів або близько того) - отримайте свої особисті дані прямо вгорі, щоб одержувач знає хто ти.
  • В останній версії перспективи є панель попереднього перегляду "портрет", яка значно вужча, ніж ви могли очікувати, - будьте дуже обережні до макетів фіксованої ширини, якщо вам потрібно використовувати їх, зробіть їх максимально вузькими.
  • Навіть не думайте про флеш, Javascript, SVG, полотно чи щось подібне.
  • Тест, багато. Переконайтеся, що ви протестуєте в недавньому Outlook (все змінилося дуже сильно! Зараз він використовує Word як двигун відображення HTML, і його покалічено: підтримка HTML 2007 / HTML CSS ). Gmail також досить вибагливий. Дивно, але веб-пошта Yahoo надзвичайно хороша, з приємною підтримкою CSS.

Удачі ;)

Оновіть відповіді на інші запитання:

Не використовуйте більше двох рівнів вкладання в таблицях

Я вважаю, що це більш стара інструкція, що стосується Lotus Notes. Вкладені таблиці повинні бути в порядку, але насправді, якщо у вас є досить складна компоновка, щоб їх потребувати, ви, ймовірно, все одно матимете проблеми. Зробіть макет простим .

Будьте уважні до вкладення фонових зображень у клітинки / таблиці

Це може бути пов'язано з вище, і те ж саме, якщо ви отримуєте , що складно , то ви будете мати проблеми. Останні версії Outlook взагалі не підтримують фонові зображення, тому рекомендується повністю забути про них.

— Ден
джерело
3
Чому підтримка HTML-електронних листів не змінилася настільки сильно? Чому ми повинні продовжувати впроваджувати всі ці погані практики, як ніби ми повернулися в 1999 році?
— smonff
Існує обхідний шлях для підтримки bgimages stackoverflow.com/a/17358553/413032 . Чергування ms-word html. @ Smonff я повністю з вами згоден. ........ Чому html, наданий MS-Word!
— Davut Gürbüz
1
перевірити Кодування електронною поштою 101 з лакмусу, сподіваємось, допоможе.
— shaijut
13

Завжди використовуйте багаточастинні міми та надайте альтернативу простому тексту.

— JeeBee
джерело
2

Я думаю, що це нижчий рівень, ніж питання, яке ви задаєте, але якщо ви дійсно хочете, щоб HTML-повідомлення було переглянуто якомога більше клієнтів, переконайтеся, що він використовує дійсний MIME. Зокрема, щоб електронний лист вважався дійсним MIME, заголовки ОБОВ'ЯЗКОВО (у значенні цього RFC цього слова) містять обидва ці заголовки:

MIME-Version:
Content-Type:

Дуже суворі клієнти відображатимуть ваш HTML як вихідний текст, якщо одного чи іншого з них немає. Ви здивуєтеся, скільки великих інтернет-постачальників, які повинні знати краще, накрутили це (зокрема, я отримав HTML-повідомлення з відсутньою MIME-версією: заголовки Amazon та ACM в минулому)

— jj33
джерело
1
  • Фонові зображення не є надійними.
  • Практично не вимагає, але немає JavaScript .
  • Використовуйте редактор, який дозволяє надсилати поточний файл / буфер у вигляді електронної пошти або, принаймні, знаходити програму, яка дозволить вам надсилати вміст файлу у вигляді HTML електронної пошти. не перевіряйте свої електронні листи, копіюючи HTML-код і вставляючи його в Outlook (або будь-яку іншу поштову програму з цього питання).
— Джонатан Аркелл
джерело
1

Три слова поради: тест, тест, тест.

Перевірте службу тестування електронної пошти LitmusApp.com. Ви надсилаєте їм повідомлення, і вони передають його в купу клієнтів і показують скріншоти результатів. Це не ідеально, але це досить добре.

(Lotus Notes до 8.0 дійсно, насправді смердить для HTML пошти)

Крім того, крім просто вбудованих стилів CSS, я рекомендую переходити до тегів, де це можливо.

— Елі
джерело
0

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

Багато людей неправильно припустили, що вони не можуть використовувати блоки CSS в електронних листах через таку поведінку ... IIRC "." є роздільником тіла для SMTP. Системи, як правило, уникають своїх магазинів пошти, щоб запобігти неправильному визнанню вмісту одного повідомлення як нового повідомлення. Те, як це обробляється, має тенденцію порушувати будь-який стиль, починаючи з нової лінії з періодом.

— Ейнштейн
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.