Должен ли HTML/CSS для информационного бюллетеня по электронной почте в формате html быть в формате таблицы, или я могу использовать DIV с равной уверенностью, что он будет хорошо отображаться в почтовом клиенте? Я загрузил несколько шаблонов, чтобы посмотреть, как они сделаны, и на их основе создать свой собственный, и все они, похоже, используют таблицы.
Любое понимание высоко ценится, спасибо!
⚠️ Обновление от 10.06.2021: это очень старый ответ. Я не уверен, насколько он точен спустя 10 лет после того, как он был написан. Мы надеемся, что почтовые клиенты сегодня более совместимы ⚠️
Когда дело доходит до HTML-кода электронной почты, обратите внимание, что все лучшие практики веб-разработки выходят за рамки. Чтобы образ был гармоничным, следует:
<style>-теги отбрасываются многими клиентами.<html>, <head> и <body> — они все равно будут отброшены большинством клиентов.Вы можете прочитать более подробные версии вышеперечисленных пунктов здесь:
Use table based layouts, теперь мы можем использовать элементы div для гибридных/губчатых электронных писем.
- person Syfer; 21.04.2020
Как все здесь говорили, используйте таблицы и встраивайте все свои css... но существует экосистема почтовых приложений, которые помогут вам создавать электронные письма.
Я использую Mailrox (https://www.mailrox.com/) для большинства моих сборок электронной почты в последнее время, и это кажется чертовски хорошим и выводит идеальные электронные письма в формате HTML, если вы создаете его на основе дизайна, даже если он находится в бета-версии.
Вы также можете попробовать готовые шаблоны из Mailchimp или Campaign Monitor, но похоже, что у вас есть дизайн для электронной почты, так что, возможно, Mailrox подойдет лучше всего.
Если вы действительно хотите заняться созданием электронных писем, я бы посоветовал забыть большую часть того, что вы знаете о современном веб-дизайне и макетах основных таблиц, и использовать ссылки от PatrikAkerstrand.
Litmus также отлично подходит для тестирования дизайнов, написанных вручную. Они дают вам предварительный просмотр вашей электронной почты (почти) во всех почтовых клиентах.
Надеюсь это поможет.
Многие почтовые клиенты не могут отображать css. Я бы использовал таблицы для форматирования почты и изображения для всего остального.
Как уже упоминалось, ваши электронные письма в формате HTML должны быть построены с использованием таблиц (а не элементов div). Вы также можете добавить CSS — как с помощью внешней таблицы стилей, но это не будет воспринято всеми почтовыми клиентами, поэтому на самом деле надежнее добавить свой CSS в строку. Даже при этом некоторые атрибуты могут игнорироваться некоторыми почтовыми клиентами, поэтому лучше всего по-прежнему использовать атрибуты HTML, когда они доступны. «Вы должны сделать это, потому что некоторые клиенты, такие как Gmail, будут игнорировать или удалять содержимое вашего тега или игнорировать его». Источник: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
Помимо этого, методом проб и ошибок я также узнал, что даже изображения должны быть обрезаны до точного размера, который вы хотите, чтобы они отображались в вашем электронном письме. Outlook ужасен при подборе атрибутов HTML для ширины / высоты изображений, и я видел несколько неприятных растянутых электронных писем только потому, что эти атрибуты игнорировались, а изображения отображались в полном размере.
position:fixed;в Gmail). Таблицы позволяют использовать дополнительные html-элементы, недоступные (или несовместимые) с элементами div. Кроме того, Outlook использует движок Microsoft Word для отображения HTML-кода электронной почты и оборачивает его множеством дерьмовых div и т. д. Таблицы помогают поддерживать структуру вашей электронной почты, когда Outlook добавляет туда свою чушь. - person John schedule 13.12.2013