HTML электронная почта: таблицы или div? - PullRequest
Новая
       10

HTML электронная почта: таблицы или div?

72 голосов
/ 29 мая 2010

Должен ли HTML / CSS для html-рассылки электронной почты быть в табличном формате, или я могу использовать DIV с одинаковой уверенностью, что он будет хорошо отображаться для почтового клиента? Я скачал несколько шаблонов, чтобы посмотреть, как они сделаны, на чем основаны мои собственные, и все они, кажется, используют таблицы.

Любое понимание высоко ценится, спасибо!

Ответы [ 4 ]

133 голосов
/ 29 мая 2010

Когда дело доходит до электронной почты HTML, обратите внимание, что все лучшие практики веб-разработки выходят за рамки.Чтобы сделать внешний вид единообразным, вам необходимо:

  1. Использовать макеты на основе таблиц
  2. Использовать стилевые атрибуты старой школы для таблиц
  3. Использовать ТОЛЬКО встроенные стили итолько очень простой такой.<style> -теги отбрасываются многими клиентами.
  4. Пропустить, используя <html>, <head> и <body> - они все равно будут отброшены большинством клиентов.
  5. Если вы вставляете изображенияпостарайтесь убедиться, что электронная почта выглядит прилично, даже если изображения не загружены.Многие клиенты требуют от пользователя пометить письмо как «безопасное» перед отображением изображений.

Более подробные версии вышеуказанных пунктов можно прочитать здесь:

9 голосов
/ 15 июня 2012

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

Я использую Mailrox (https://www.mailrox.com/) для большинства моих сборок электронной почты в последнее время, и, похоже, это чертовски хорошо и выводит совершенные письма в формате HTML, если вы создаете одну из дизайн, хотя он в бета-версии.

Вы также можете попробовать предварительно созданные шаблоны из Mailchimp или Campaign Monitor , но, похоже, у вас есть дизайн для вашей электронной почты, поэтому, возможно, Mailrox будет лучшим.

Если вы действительно хотите приступить к созданию электронных писем, я бы сказал, забудьте про большинство из того, что вы знаете о современном веб-дизайне и макетах мастер-таблиц, и воспользуйтесь ссылками от PatrikAkerstrand.

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

Надеюсь, это поможет.

4 голосов
/ 29 мая 2010

Многие почтовые клиенты не могут отображать CSS. Я бы использовал таблицы для форматирования вашей почты и использовал изображения для всего остального.

1 голос
/ 24 мая 2016

Как уже упоминалось, ваши электронные письма в формате HTML должны быть построены с использованием таблиц (а не div-ов). Вы также можете добавить CSS - оба с использованием внешней таблицы стилей, но это не будет восприниматься всеми почтовыми клиентами, поэтому на самом деле более надежно добавить ваш CSS в линию. Даже при этом некоторые атрибуты могут игнорироваться некоторыми почтовыми клиентами, поэтому лучше всего использовать атрибуты HTML, когда они доступны. «Вы должны сделать это, потому что некоторые клиенты, такие как Gmail, будут игнорировать или удалять содержимое вашего тега, или игнорировать их». Источник: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978

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

...