Дизайнерам HTML писем: 12 пунктов, которые могут спасти ваш дизайн от искажения

Email маркетинг

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

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

Содержание
  1. 1. Возможно вам пригодится список ресурсов для email вдохновения
  2. 2. Важные рекомендации к PSD файлам
  3. 3. Создавайте письма с шириной 600px, а если этого размера недостаточно, попробуйте уложиться до 800px
  4. 4. Декоративные линии и секции с фоном не ограничены шириной контента
  5. 5. Скругленные углы повторить не проблема, задействуем css3 (border-radius)
  6. 6. Графические элементы верстаются в письмах двумя способами и у каждого есть свои преимущества и недостатки
  7. Вариант 1: как фон (background)
  8. Вариант 2: как изображение (img)
  9. 7. Используйте шрифты из списка Web Safe Fonts, так как большинство почтовых сервисов отобразят именно их
  10. 8. Gif анимация работает и помогает привлекать внимание
  11. 9. Для вёрстки адаптивного письма ДОСТАТОЧНО десктопного дизайна
  12. 10. Подготовка под Retina экраны: удваивайте размер или делайте smart object
  13. 11. Учитывайте особенности блочной верстки
  14. 12. Мнения зарубежных экспертов на темы, связанные с email templates

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

image12

смотреть пример 1 целиком.

image9

смотреть пример 2 целиком.

image3

смотреть пример 3 целиком.

4. Декоративные линии и секции с фоном не ограничены шириной контента

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

image5

смотреть пример 1 целиком.

image8

смотреть пример 2 целиком.

image15

смотреть пример 3 целиком.

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

image14

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

Вариант 1: как фон (background)

image18

image4

image1

Особенности: применяется в блоках с живым текстом, но не во всех сервисах рассылок имеется удобный инструмент замены фонов.

Вариант 2: как изображение (img)

image2

image7

image17

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

7. Используйте шрифты из списка Web Safe Fonts, так как большинство почтовых сервисов отобразят именно их

  • Arial,
  • Tahoma,
  • Verdana,
  • Trebuchet MS,
  • Georgia,
  • Times New Roman.

смотреть полный список

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

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

image16

8. Gif анимация работает и помогает привлекать внимание

Старайтесь делать вес gif файла как можно меньше.

gif-1

gif-2

gif-3

9. Для вёрстки адаптивного письма ДОСТАТОЧНО десктопного дизайна

Мобильный дизайн предоставляется по желанию заказчика, так как email верстальщик может самостоятельно выполнить перестроение контента, что сэкономит время и деньги.

При создании мобильного дизайна его ширина должна быть 320px, основной текст желательно оставить такого же размера, блоки с информацией перестроить друг под друга.

image11

смотреть пример целиком.

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

image13

смотреть пример целиком.

10. Подготовка под Retina экраны: удваивайте размер или делайте smart object

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

11. Учитывайте особенности блочной верстки

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

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

image10

image6

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)

Подпишитесь на рассылку новостей. Никакого спама!

Оцените статью
Поделитесь статьей с друзьями
madcats.ru
X