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

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

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

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

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


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

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

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

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

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

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

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

Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

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

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

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

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

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

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




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

Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 2 Как написать хорошее резюме? 7 Визуализация проявляет 4