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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Какой движок выбрать для сайта рекламного агентства? Чеклист публикации сайта 2 Как объяснять разработчикам архитектуру проекта? Как улучшить сообщение о баге для разработчиков?




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

Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 3 Какие законы для текста, который будет восприниматься только на слух? 1