Для создания HTML писем обычно используется табличная вёрстка, она имеет свои ограничения + нужно учитывать особенности отображения контента в разных почтовых сервисах и на мобильных устройствах.

Email верстальщик сможет приступить к своей работе сразу, если следовать простым советам из этой статьи.

1. Cписок ресурсов для email вдохновения:
pinterest.com
dribbble.com
email-gallery.com
htmlemailgallery.com
reallygoodemails.com
campaignmonitor.com
htmlemaildesigns.com
emaildesigngallery.com
beautiful-email-newsletters.com
inspiration.mailchimp.com
salemail.upperup.com
email-competitors.ru

2. Рекомендации к PSD файлам:
- используйте цветовой режим RGB,
- используйте режим наложения слоев "Normal",
- указывайте размер текста и его межстрочный интервал в px (целые значения),
- используйте разные слои для элементов, не сводите все в один,
- между блоками одного вида делайте одинаковые отступы.

Из личного опыта составили рейтинг форматов с которыми приходится работать, от удобного к менее удобному варианту: PSD, Sketch, Figma, PDF, PNG (со слоями), AI, INDD, PPTX, JPG, эскиз на бумаге сфотографированный на телефон ;)

3. Создавайте письма с шириной 600px, а если этого размера недостаточно, попробуйте уложиться до 800px.
смотреть пример 1
смотреть пример 2
смотреть пример 3

4. Декоративные линии и секции с фоном не ограничены шириной контента.
При необходимости их можно потянуть на всё окно браузера или окно почтового клиента.
смотреть пример 1
смотреть пример 2
смотреть пример 3

5. Скругленные углы повторить не проблема, задействуем css3 (border-radius).
смотреть пример

6. Графические элементы верстаются в письмах двумя способами и у каждого есть свои преимущества и недостатки.

- как фон (background).
смотреть пример 1
смотреть пример 2
смотреть пример 3
Особенности: применяется в блоках с живым текстом, но не все сервисы рассылок имеет удобный инструмент замены фонов.

- как изображение (img).
смотреть пример 1
смотреть пример 2
смотреть пример 3
Особенности: поверх изображения нельзя разместить редактируемый текст, проблем с заменой изображения у клиентов нет.

7. В первую очередь используйте шрифты из списка Web Safe Fonts, так как большинство почтовых сервисов отобразят именно их.
- Arial,
- Tahoma,
- Verdana,
- Trebuchet MS,
- Georgia,
- Times New Roman.
смотреть полный список

Размер меньше 10px применяйте в тех случаях, когда это действительно нужно.

Текст с необычным шрифтом может быть сохранен как изображение.
смотреть пример

Еще можно подключить любой шрифт из Google Fonts, но отображать их умеет только малая часть почтовиков, в остальных текст отобразится одним из Web Safe Fonts.

8. Gif анимация работает и помогает привлекать внимание.
Постарайтесь сделать вес gif файла как можно меньше.
смотреть пример 1
смотреть пример 2
смотреть пример 3

9. Для вёрстки адаптивного письма ДОСТАТОЧНО десктопного дизайна, мобильный дизайн предоставляется по желанию заказчика, так как email верстальщик может самостоятельно выполнить перестроение контента,
это всем сэкономит время.
Когда создается мобильный дизайна ширину стоит сделать 320px или 375px.
смотреть пример

Мобильный дизайн не должен быть просто пропорционально уменьшенной копией десктопного.
смотреть пример

10. Если необходимо логотипы, иконок или изображения адаптировать под Retina экраны, чтобы на дисплеях с высокой плотностью (телефонах) они остались чёткими, изначально подготовьте дизайн в 2x размере или сделайте дизайн в обычном размере, но все графические элементы реализуйте как smart object.

11. Опытные верстальщики могу оживить любой дизайн, однако необычно расположенные элементы усложняют html код, увеличивается его объем, теряется универсальность, добавление новых блоков становится непростой задачей.
Попробуйте размещать изображения таким образом, чтобы они не находились сразу в нескольких секциях.
смотреть пример 1
смотреть пример 2

12. Мнения зарубежных экспертов на темы связанные с email templates.
Limitations of HTML Email Design - Email Width and Size (Roland Pokornyik)
Typographic patterns in email (Anna Yeaman)
Understanding Email Layout and Structure (Roland Pokornyik)