HTML markup

Дизайнерам HTML писем нужно знать...

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

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

1. Возможно вам пригодится список ресурсов для 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 (целые значения),
- используйте разные слои для элементов, не сводите все в один,
- между блоками одного вида делайте одинаковые отступы,
- композиции слоев позволяет создавать, управлять и просматривать несколько версий макетов писем в одном файле Photoshop.

Из личного опыта составили рейтинг форматов с которыми приходится работать, так сказать от удобного к менее удобному варианту: PSD, Sketch, PDF, PNG (со слоями), 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 применяйте в тех случаях, когда это действительно нужно.

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

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

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

Не допускайте грубую ошибку, некоторые дизайнеры берут десктопный дизайн и просто уменьшают до 320px.
смотреть пример

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)

Планируем периодически обновлять и добавлять новые советы.