x
 
Михаил Озорнин
14 декабря 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Василий и Руст!

Расскажите как верстать электронные письма?

На фоне современных браузеров там прошлый век и чёрная магия: таблицы, инлайновые стили и теги font.

Какие библиотеки подойдут, с чего начать изучение, что прочитать?


Почтовых клиентов много, и у каждого из них свой уровень поддержки ЦСС, зачастую довольно низкий. Из-за этого вёрстка писем утомительна: приходится искать универсальные решения, которые будут работать в большинстве клиентов и не будут ничего ломать в оставшихся, а потом тестировать всё это в десятках клиентах на различных устройствах.

Чтобы не потратить на вёрстку одного письма месяцы, советую взять готовый шаблон и адаптировать его под свои нужды:

Многие клиенты не поддерживают стили, описанные внутри тега <style>. Для них нужно встроить стили в атрибуты тегов. Инструменты, которые это делают, называются инлайнерами. Их много, можете воспользоваться инлайнерами компаний:

Или взять фреймворк:

Если решите погрузиться поглубже, прочитайте статьи:

И начинайте тестировать письма с помощью сервисов, а не руками:

Если же вы решили посвятить этому жизнь, подписывайтесь:

Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

Как избежать «эффекта Тильды»? 2 Как вы верифицируете оценку сроков от сотрудника? 1 3 Давайте соберём в одном посте студии и фрилансеров, которые работают по принципам ФФФ 45