Должен ли HTML/CSS для рассылки электронной почты html быть в табличном формате, или я могу использовать DIV с одинаковой гарантией, что он отобразит хорошо перекрестный почтовый клиент? Я загрузил несколько шаблонов, чтобы посмотреть, как они сделаны, на чем основано мое собственное, и все они, кажется, используют таблицы.HTML-адрес электронной почты: таблицы или divs?
Любое понимание очень ценится, спасибо!
Когда дело касается электронной почты HTML, обратите внимание, что все лучшие практики веб-разработки выходят из окна. Для того, чтобы выглядеть последовательным, вы должны: на основе
<style> -tags отбрасываются многими клиентами.<html>, <head> и <body>. В любом случае они будут отброшены большинством клиентов.Вы можете прочитать более подробные версии вышеуказанных пунктов здесь:
Это так. Outlook 2007 является одним из худших из них (и большинство из них довольно плохо ...). – Max
И никаких фоновых изображений (спасибо много перспективы 2010). –
Эти правила являются чистым GOLD, когда дело доходит до создания электронных писем HTML/CSS. Спасибо. –
Многие почтовые клиенты не могут отображать css. Я бы использовал таблицы для форматирования вашей почты и использования изображений для чего-либо еще.
Вы не можете использовать изображения в письмах по умолчанию; почтовые клиенты будут блокировать их до тех пор, пока пользователь не пометит отправителя как безопасный. Почти все обычные клиенты поддерживают ограниченный встроенный CSS. –
Старые клиенты этого не делают, и многие бизнес-пользователи все еще используют их. И нет, не каждый клиент не показывает изображения. Это всего лишь шаг для дополнительной безопасности, но у клиентов как iPhone нет причин блокировать изображения. – fb55
[Gmail теперь показывает изображения] (http://gmailblog.blogspot.ch/2013/12/images-now-showing.html) :-) – rds
Как и все здесь сказал, использовать таблицы и рядный все ваш css ... но есть экосистема приложений электронной почты, которые помогут вам создавать электронные письма.
Я использую Mailrox (https://www.mailrox.com/) для большей части моей электронной почты, созданной в последнее время, и, похоже, она очень хороша и дает отличные HTML-письма, если вы строите один из дизайна, даже если он находится в бета-версии.
Вы также можете попробовать готовые шаблоны от Mailchimp или Campaign Monitor, но похоже, что у вас есть дизайн для электронной почты, поэтому, возможно, Mailrox будет лучше.
Если вы действительно хотите попасть в электронную почту, я бы сказал, что забыл большую часть того, что вы знаете о современных веб-дизайнах и макетах главных таблиц, и используйте ссылки от PatrikAkerstrand.
Litmus также отлично подходит для проверки ваших рисунков с ручной кодировкой. Они дают вам предварительный просмотр вашей электронной почты (в значительной степени) всех почтовых клиентов.
Надеюсь, это поможет.
Как уже упоминалось, ваши электронные письма HTML должны быть построены с использованием таблиц (а не div). Вы также можете добавить CSS - как с помощью внешней таблицы стилей, но это не будет воспринято всеми почтовыми клиентами, поэтому на самом деле более надежно добавить ваш css в строку.Даже при этом некоторые атрибуты могут игнорироваться некоторыми почтовыми клиентами, поэтому ваш лучший выбор по-прежнему использует атрибуты HTML, когда они доступны. «Вы должны сделать это, потому что некоторые клиенты, такие как Gmail, будут игнорировать или лишать содержимое вашего тега или игнорировать их». Источник: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
В целом, я также узнал из-за проб и ошибок, что даже изображения должны быть обрезаны до точного размера, который вы хотите отобразить в своем письме. Outlook, если он ужасен при сборе атрибутов HTML для ширины/высоты для изображений, и я видел несколько неприятных растянутых писем, только потому, что эти атрибуты были проигнорированы, а изображения отображались в полном размере.
Это невероятно полно: [http://mailchimp.com/resources/guides/email-marketing-field-guide](http://mailchimp.com/resources/guides/email-marketing-field-guide) –
Очень полезно. Вставка CSS внутри тега body. Кто бы мог подумать! – aaandre
URL изменился: http://mailchimp.com/resources/guides/email-marketing-field-guide/ – JasonB