Веб-дизайн и верстка сайтов с появлением HTML5 сделали огромный шаг вперед, но, к сожалению, к верстке электронных писем это не относится. Данный сегмент развивается очень медленно, неоднородно, с отставанием от технологий верстки сайтов примерно в 3-5 лет. Я, как профессиональный верстальщик email часто сталкиваюсь с дизайнерскими макетами для mail-рассылок, которые совершенно не учитывают многих специфических особенностей электронных писем и их возможностей.

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

«Только в ограничениях рождается хороший дизайн.» (c) Артемий Лебедев (аргументировано тут)

Ограничения для дизайнеров, разрабатывающих макеты email

1. Оптимальная ширина тела письма 600-650 пикселей

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

Стоит помнить об ограничении тела письма по ширине добавляя в дизайн боковые тени и рамки, их ширина должна вычитаться из общей ширины тела письма. То есть, если ваше письмо имеет рамку в 4 пикселя, то его тело уменьшится на 8 пикселов.

Фон может быть 100%, но тело письма должно уложиться в ограничение.

2. Максимальная высота письма не более 2-х экранов монитора

А лучше в 1 экран, письмо которое можно прочесть целиком не делая дополнительных движений мышкой самое лучшее. Не стоит делать макет email в виде длинной простыни, такие письма много весят, плохо загружаются и практически не читаются. Основная задача письма — заманить клиента на основной сайт. Необходимо сделать хорошо читаемые тексты и понятные ссылки, пусть письмо состоит из анонсов ведущих на более подробные материалы на сайте.

3. Используйте стандартные шрифты

Используя специфические шрифты, вы получите различное отображение письма во многих почтовых программах, те что не смогут подгрузить фирменный шрифт подставят стандартное значение шрифта (например Outlook). Также есть определенные трудности с подключением внешних шрифтов, Google Fonts для этих целей не подойдет, необходимо указывать прямые ссылки на конкретные файлы шрифтов.

Чтобы шрифты были везде одинаковый используйте стандартные, такие как Arial, Georgia, Helvetica, Sans (полный список стандартных шрифтов).

Красивые дизайнерские заголовки и шрифтовые элементы дизайна необходимо верстать изображениями. Изменение межстрочного интервала отобразиться не везде, поэтому его тоже стоит оставить стандартным.

4. Не накладывайте текст на сложный цветной фон

Фоновые изображения не отображаются во многих почтовых программах, например в Outlook и Рамблер. фоновые градиенты еще реже отображаются, HTML5 и CSS3 только только начинают проникать в мир электронной почты.

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

5. Откажитесь от слоев и блоков

Блоки практически бесполезны при верстке писем, свойство float, чаще всего, будет проигнорировано почтовыми программами. Основной каркас верстается таблицей, что обеспечивает кроссплатформенное отображение письма. Все элементы верстаются в один слой, многослойность и фоновые картинки не сработают, доводы вытекают из предыдущего пункта.

6. Не забудьте про обязательные элементы электронного письма

У каждого email есть обязательные элементы, без которых оно может быть расценено как спам, либо просто не будет прочитано (например ссылка на отписку, адрес компании, ссылка на веб-версию). Необходимо помнить про это элементы и гармонично вписывать их в дизайн письма.

7. Не включайте в макет интерактивные элементы

В электронное письмо нельзя вставит аудио/видео файлы и скрипты. Такие элементы верстаются в виде изображений-ссылок, ведущих на сайт с соответствующим контентом. Всплывающие меню, выпадающие списки и прочие прибамбасы невозможно вставить в письмо.

Единственная радость, которой можно оживить письмо — движущиеся gif картинки, но в Outlook они останутся статичными.

В целом, большинство новинок в области верстки адекватно отображается почтой gmail и яндекс-почтой. MS Outlook держит первенство в качестве самого медленно-обновляемого и неадекватного почтового клиента.