1. дома
  2. Вопрос и ответ
  3. Какие руководящие принципы для дизайна электронной почты HTML существуют?

Какие руководящие принципы для дизайна электронной почты HTML существуют?

2008-09-24 4 views
90

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

неродственного ответ на вопрос о переполнении стека предложил:

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

Который содержит следующие рекомендации:

  1. Место таблицы стилей в <body> вместо <head>
    Некоторые почтовые клиенты удалит CSS из головы, но оставьте его, если блок стиля (недействительно) в th e body.
  2. Используйте встроенные стили, где когда-либо возможно
    Gmail лишит любую таблицу стилей, будь то в <head> или в <body>, но честь внутренних стили, назначенные с помощью атрибута style=""
  3. Вернуться к таблицам
    стандартов электронной почты имеют фактически сделал гигантский шаг назад в последние годы благодаря Outlook 2007 с использованием механизма Microsoft Word. Откажитесь от большей части того, что вы узнали о позиционировании без таблиц стилей.
  4. Не полагайтесь на изображения
    Большинство клиентов и большинство веб-почтовых клиентов не будут отображать изображения, если только пользователь не попросит их отобразить их.

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

  1. Не следует использовать более двух уровней вложенности в таблицах
    Это правда. Что может произойти, если я это сделаю? Есть ли какой-то конкретный клиент/клиент, который задыхается от этого?
  2. Будьте осторожен гнездовые фоновые изображения в ячейках/таблицах
    Как я понимаю, вы можете столкнуться с ситуациями, где применяются фоновое изображение в нисходящей таблице/ячейках полностью заново, а не просто «просвечивает». Опять же, правда или нет? Какие клиенты?

Я хотел бы изложить этот список с большим количеством рекомендаций и опыта из траншей.

Можете ли вы предложить дополнительные предложения?

Update: Я в особенности по просить руководящие принципы для проектирования части в HTML и последовательность там из. Вопросы об общих рекомендациях для avoiding spam filters и common courtesy уже находятся на SO.

источник

2008-09-24 kaa

+0

Вот [большой список ресурсов] (HTTP: // StackOverflow.com/questions/2229822/html-email-best-practices-соображения-и-как-писать-код-for-outlook-gma/21437734 # 21437734) по [очень похожий вопрос] (http: // stackoverflow. ком/вопросы/2229822/html-электронное-передовой опыт-соображения-и-как-на-запись-кода для-прогноза-ГМЫ /). – John 2014-05-15 21:09:24

ответ

12

Всегда используйте multipart mime и предоставляйте альтернативу обычного текста.

источник

2008-09-24 14:25:40 JeeBee

1
  • Фоновые изображения не являются надежными.
  • Практически без проблем, но нет javascript.
  • Используйте редактор, который позволяет отправлять текущий файл/буфер в виде электронной почты или, по крайней мере, находить программу, которая позволит вам отправлять содержимое файла в виде HTML-письма. не проверяйте свои письма, скопировав HTML и вставляя их в Outlook (или любую другую почтовую программу, если на то пошло).

источник

2008-09-24 14:31:35

53

Это на самом деле действительно трудно сделать достойный HTML электронной почты, если подойти к нему с «современной HTML и CSS» точки зрения.

Для достижения наилучших результатов, представьте себе, это 1999.

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

удачи;)

Update, чтобы ответить на дополнительные вопросы:

Не следует использовать более двух уровней вложенности в таблицах

Я считаю, что это старше руководство, относящееся к Lotus Notes. Вложенные таблицы должны быть в порядке, но на самом деле, если у вас есть макет, который достаточно сложный, чтобы в них нуждаться, у вас наверняка будет все равно.Сохраните ваш макет простой.

Будьте осторожны гнездовых фоновых изображений в ячейках/таблиц

Это может быть связано с выше, и то же самое, если вы получаете, что сложным, то вы будет проблемы. Недавние версии Outlook не поддерживают фоновое изображение вообще, поэтому вам лучше всего об этом забыть.

источник

2008-09-24 14:39:01 Dan

+2

Почему поддержка электронной почты в формате HTML не так много эволюционирует? Почему мы должны продолжать реализовывать все эти плохие практики, как если бы мы вернулись в 1999 году? – smonff 2013-03-28 10:18:52

9

Люди за Монитором Кампании также запустили веб-сайт Email Standards Project с большим количеством хорошей информации.

источник

2008-09-24 14:42:35

2

Я думаю, что это более низкий уровень, чем вопрос, который вы задаете, но если вы действительно хотите, чтобы html-адрес был правильно просмотрен как можно большим количеством клиентов, убедитесь, что он использует действительный MIME. В частности, для электронной почты, чтобы считаться действительным MIME, заголовки должны (в смысле RFC слова) содержат оба этих заголовков:

MIME-Version: 
Content-Type:

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

источник

2008-09-24 15:02:42 jj33

1

Три слова рекомендации: тест, тест, тест.

Отъезд службы проверки электронной почты LitmusApp.com. Вы отправляете им сообщение, и они отображают его в кучу клиентов и показывают скриншоты результатов. Это не идеально, но это очень хорошо.

(Lotus Notes до 8,0 действительно, на самом деле никуда не годится для HTML почты, кстати)

Кроме того, вне только встроенных стилей CSS, я рекомендую переключиться на теги везде, где это возможно.

источник

2009-02-19 16:45:51 Eli

0

Если вы включили блок стиля, не начинайте новую строку с «.classname» или «.». что-нибудь. Поместите скобу или что-то еще до периода. Если вы этого не сделаете, некоторые системы веб-почты не будут правильно отображать ваши таблицы стилей.

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

источник

2009-06-19 16:13:38 Einstein

1

Внесите ваши изображения, на них не ссылайтесь.

Это плохо:

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

Это хорошо:

<img src=cid:myImage/>

Да, это выглядит странно, но проверить это guide regarding embedding images in emails.

источник

2010-11-25 15:08:20

Смежные вопросы

 Смежные вопросы