Какой самый простой способ сделать адаптивным email-рассылку в html?

Question

[Кристина]

Какой самый простой способ сделать адаптивным email-рассылку в html?
Задавать таблице width в процентах?

<table cellpadding="0" cellspacing="0" border="0" width="600" height="200"
       style="margin: 20px auto; padding:0; width:98%; max-width: 600px !important; min-width: 600px;
 class="mob-gmail-fix">

Comments

[Сергей Мирченко]

В сети куча бесплатных шаблонов писем, посмотрите, как сделаны они. Но вообще да, в основном ставят ширину 100%.

[CityCat4]

автоконверт в plain text - и вся Ваша хитромудрия идет лесом :)

Answer 1

[Exploding]

Так рассылку или таблицу?:)
Если таблицу то Вы логику в css немного перепутали, надо так:
width: 600px; max-width: 98%;

А вообще, чтобы Ваша рассылка была более эффективной - достаточно элементарно провести анализ факторов при которых письма рекламного характера сразу удаляют, на своем же опыте. Вот Вы часто в НОРМАЛЬНОЙ переписке с товарищем/партнером/etc. прямо в тексте письма таблицы рисуете? Цветом или размером шрифта что-то выделяете?
То-то и оно)

Comments

[Кристина]

Спасибо за ответ!
Мне для определенной цели нужно, просто тренируюсь их делать)) чтобы нормально отображались
Так то конечно я письма таблицами не пишу))

Answer 2

[id_baton4eg]

Самый простой способ использовать фреймворк, я использую https://foundation.zurb.com/emails.html

Очень подкупает сходство с бутстрапом, все классы ультра логичны.
Почитайте внимательно, собираете обычное письмо с классами, загоняем в инлайнер и на рассылку.

Answer 3

[Кристина Головашин]

Самый простой наверное, это использовать встроенные редакторы сервисов рассылок или специальные сервисы, где есть готовые шаблоны, которые будут сразу адаптироваться под разные устройства.
Если же верстать письмо кодом, то необходимо использовать медиа-запросы и прописывать в них, как будет выглядеть письмо на экранах с разным расширением. С их помощью можно менять размеры шрифта и цвет кнопок, размещение, ширину блоков и картинок в зависимости от размера экрана.
Например, чтобы для экрана в 600px уменьшить размер отображаемого текста, необходимо указать:

@media (max-width:600px) {
  body { font-size: 16px; }
}