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

Условия публикации на Котиках

Платного размещения у нас нет. Вы можете написать для нас статью. Авторы могут поработать с нами под заказ. >> подробнее

#BDD17

А куда ты поедешь в августе? Все едут в Калининград! И мест почти не осталось

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

Для создания 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

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

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

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

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 файла как можно меньше.

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

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

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

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

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)

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: