Дизайн Email Soldiers
557

Дизайн email-рассылок: что делать не надо

Дизайн email-рассылок — это не только про красоту, но и про функциональность. В письмах свои ограничения. Если дизайнер не будет им следовать, письмо отобразится некорректно: картинки будут не в том месте или не покажутся вообще, текст станет гигантским или очень мелким. Письмо станет непривлекательным и отталкивающим и ничего не продаст.

В закладки

В этой статье мы поговорим о том, что не надо делать в дизайне рассылок, чтобы ваши письма работали.

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

Стандартные шрифты — это шрифты, установленные на устройствах по умолчанию. Их всего девять:

В списке есть Comic Sans MS, но мы не используем его ни-ког-да. И вам не советуем :)

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

Сейчас нормальная практика — использовать Helvetica (стандартный на Mac OS) и Roboto (стандартный на Android). В других клиентах они заменятся на Arial (или то, что поставит верстальщик дополнительным шрифтом). Но если вы провели исследование и большинство вашей ЦА сидит с айфона, это перестаёт быть проблемой. Иногда это оправданный риск ради имиджа, тот же re:Store так делает.

Учитывайте ширину контента

Надо учитывать ограничения почтовых клиентов. Максимальная ширина контента — 600 px, если сделаете шире — он может не уместиться в экран и появится полоса прокрутки. Ширина фона может быть любой — вплоть до 1200 px.

Самая распространённая ширина экрана на мобильных — 320 px. Сделаем шире — могут возникнуть проблемы с корректным отображением и адаптивностью.

Не верстайте всё письмо картинкой

Верстальщик обрадуется простой работе, но есть риск, что картинки в письме не отобразятся или письмо будет долго загружаться из-за большого размера. В итоге на устройстве пользователя оно будет выглядеть так:

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

А ещё советуем не увлекаться фоновыми изображениями, ведь в некоторых почтовых клиентах они не отображаются.

Потерянная фоновая картинка в Outlook

Оптимизируйте картинки в письмах

Сейчас популярно использовать в письмах gif-анимацию и креативные баннеры. Чтобы пользователь точно увидел результат ваших трудов, необходимо оптимизировать изображения для веб — сжать их, чтобы они весили не больше 1 Мб. Это можно сделать через compresspng.com или www.iloveimg.com.

Иногда картинки в письмах на iPhone или Mac немного замылены. Это не значит, что картинки плохого качества. Просто дизайнер не предусмотрел, что вы будете смотреть письмо на устройстве с экраном Retina. Чтобы макет не «плыл», мы выгружаем их из «Фигмы» в х2 размере, то есть ширина контента не 600px, а 1200, текст не 16px, а 32.

Не забывайте делать кнопку контрастной

Получая десятки писем в день, пользователь может прочитать наше письмо по диагонали, заметив только заголовок и кнопку. А это значит, что если нет яркой кнопки — нет конверсии. Важно создать на ней акцент и побудить нажать на неё. При этом пользователь должен понимать, что он получит после нажатия. Грустно, когда он открыл письмо, прочитал, но так и не понял, что должен сделать.

Средняя ширина указательного пальца — 45 px. Чтобы пользователю было удобно нажимать на кнопку, она должна быть примерно такого размера. Но точно не меньше 35 px.

Не отрицайте важность адаптивности

Результаты исследования Adobe показали, что 75% пользователей проверяют почту через смартфон, ещё 26% — через планшет. Поэтому важность адаптации писем под мобильные устройства отрицать нельзя.

Ответы пользователей на вопрос «На каком устройстве вы обычно проверяете почту» (можно было давать несколько вариантов ответа)

Но! Сейчас у большинства современных смартфоном экраны с высоким разрешением. На них удобно читать книги, смотреть фильмы, проверять почту. Если вы забыли об адаптации, но ваше письмо аккуратно свёрстано и контент интересный, пользователь всё равно сможет (и захочет) прочитать ваше письмо.

Шпаргалка по дизайну писем

  • Используем стандартные шрифтов: Arial, Courier New, Georgia, Impact, Tahoma, Times New Roman, Trebuchet MS, Verdana.
  • Картинки адаптируем для веба с помощью compresspng.com или www.iloveimg.com.
  • Вставляем гиф или иллюстрации весом не более 1 Мб.
  • Оптимальная ширина контента для писем — 600 px, фонового изображения — не больше 1200 px. Не забывайте про экраны с высоким разрешением

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Email Soldiers", "author_type": "self", "tags": [], "comments": 0, "likes": 18, "favorites": 31, "is_advertisement": false, "subsite_label": "design", "id": 57177, "is_wide": false, "is_ugc": true, "date": "Thu, 31 Jan 2019 13:08:23 +0300" }
{ "id": 57177, "author_id": 234439, "diff_limit": 1000, "urls": {"diff":"\/comments\/57177\/get","add":"\/comments\/57177\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/57177"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

Комментариев нет 0 комм.

Популярные

По порядку

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }