Отправьте себе тестовое письмо и откройте его на телефоне с тёмной темой. Проверьте, виден ли основной текст, читается ли логотип и заметна ли кнопка действия. Чтобы подготовить email-рассылку к такому просмотру, начните с отдельных проблемных блоков: фона, изображений и подписей на кнопках. Полный редизайн для этого нужен не всегда. Ниже разберём, как провести проверку в почтовом приложении и какие исправления внести в шаблон перед отправкой клиентам.
Как отправить тестовое письмо и проверить тёмную тему?
Проверяйте письмо, которое пришло в почтовый ящик. Предпросмотр в редакторе помогает собрать макет, но почтовое приложение может иначе показать его цвета. Даже если на компьютере всё выглядит аккуратно, на телефоне стоит отдельно проверить фон и надписи.
Тёмная тема меняет оформление интерфейса, а обработка самого письма зависит от почтового приложения. Одно приложение сохраняет фон отдельных блоков, другое меняет цвета текста и подложки. Поэтому результат одной проверки нельзя переносить на все почтовые ящики.
- Отправьте тестовую версию из сервиса рассылок на свой адрес.
- Откройте письмо в почтовом приложении телефона со светлой темой.
- Переключите телефон или почтовое приложение в тёмную тему.
- Повторно откройте письмо и просмотрите его до конца.
- Сохраните снимок экрана с каждым местом, где текст или элемент теряется на фоне.
Если письмо осталось светлым, проверьте настройки самого почтового приложения: оно не обязательно повторяет тему телефона. Сохранённый светлый фон тоже не означает ошибку. Задача проверки — убедиться, что получатель видит содержание и понимает, куда нажать.
Для первой проверки достаточно собственного телефона. Если доступно другое почтовое приложение, откройте то же письмо и в нём. В заметке рядом со снимком экрана укажите приложение и проблемный блок, например: «Тёмная тема, подпись под товаром сливается с фоном». Так проще передать конкретную правку тому, кто собирает рассылку.
Как исправить текст и фон без полного редизайна?
Начните с главного предложения письма. Получатель должен прочитать, что вы предлагаете, на каких условиях и как действовать дальше. Затем проверьте второстепенный текст: подписи к изображениям, условия предложения и ссылки внизу письма.
Бледный текст на светлой подложке требует внимания: после изменения цветов контраст может стать недостаточным. Не пытайтесь сохранить оттенок любой ценой. В редакторе выберите более контрастный цвет текста, отправьте новую пробу и сравните тот же участок в обеих темах.
- Задайте цвет текста и фон для проблемного блока, если редактор позволяет менять их отдельно.
- Замените фоновую картинку однотонной заливкой там, где поверх неё трудно читать текст.
- Вынесите условия предложения из изображения в обычный текст письма.
- Оставьте ссылки различимыми: используйте подчёркивание, если оно доступно в шаблоне.
Пример для магазина: на баннере виден товар, а срок действия предложения написан мелко и теряется. Сохраните изображение товара, а условия перенесите в текстовый блок под ним. Теперь их можно редактировать отдельно от картинки и проверять в каждой теме.
Если после правки текст всё ещё исчезает, передайте снимок экрана специалисту по шаблону. Попросите проверить цвета текста и фона именно в этом блоке. Формулировка «подпись под изображением не читается в тёмной теме» полезнее просьбы «сделать письмо красивее».
Что делать, если логотип исчезает на тёмном фоне?
Посмотрите на знак и название компании отдельно. У логотипа с прозрачным фоном тёмные буквы могут сливаться с тёмной подложкой письма. Сам файл при этом загружается, но получатель не различает название.
Для такой ситуации подготовьте версию логотипа со светлой подложкой внутри изображения. Тогда фон непосредственно под буквами будет частью картинки. Оставьте вокруг знака свободное место, чтобы он не выглядел тесно обрезанным.
Не меняйте весь верхний блок письма до проверки самого файла. Сначала замените логотип и отправьте тест. Если название читается, а светлая подложка выглядит аккуратно, эту правку можно сохранить без переделки остального шаблона.
По тому же принципу проверьте небольшие значки: телефон, конверт, стрелку рядом со ссылкой. Когда значок теряется, оставьте рядом понятную текстовую подпись. Ссылка «Посмотреть заказ» должна объяснять действие и без изображения стрелки.
Как проверить кнопки и главный сценарий письма?
Кнопку проверяют в двух состояниях: её должно быть видно, а нажатие должно вести к нужному действию. В тёмной теме посмотрите на заливку, границу и надпись. Если надпись сливается с кнопкой, получатель видит цветной прямоугольник без объяснения.
В редакторе задайте контрастные цвета кнопки и текста. Если кнопка сливается с фоном письма, попробуйте добавить границу, когда шаблон это позволяет. После изменения снова отправьте письмо себе: внешний вид в редакторе не подтверждает результат в почтовом приложении.
Используйте подпись, которая описывает следующий шаг: «Посмотреть подборку», «Подтвердить запись», «Открыть заказ». Проверьте её на телефоне. Длинная надпись не должна обрезаться или выходить за края кнопки, а сама кнопка должна оставаться доступной для нажатия.
Затем пройдите путь получателя до конца. Откройте письмо, найдите действие и нажмите кнопку. Проверьте, что ссылка ведёт на нужную страницу, а условия на ней соответствуют тексту рассылки. Читаемое письмо с неверной ссылкой всё равно требует исправления.
Для уведомлений о покупке особенно важны статус и следующий шаг. Если вы готовите такие письма, пригодится материал о том, как снизить количество вопросов о заказе с помощью SMS, Viber и email. В email-шаблоне сначала проверьте видимость статуса заказа, затем кнопку перехода к подробностям.
Когда рассылку собирают через сервис, полезно хранить исправления в основном шаблоне и отправлять тест из того же редактора, откуда уйдёт кампания. Так при следующей подготовке письма не придётся заново заменять логотип или подбирать цвет кнопки. После изменения содержания проверку всё равно повторяют.
Типичные ошибки при проверке email в тёмной теме
- Проверять только предпросмотр. Исправление: открыть тестовое письмо в почтовом приложении на телефоне.
- Считать тёмную тему телефона гарантией тёмного оформления письма. Исправление: проверить настройки приложения и фактический вид сообщения.
- Менять сразу весь шаблон. Исправление: сначала поправить один проблемный блок и повторить отправку.
- Оставлять важные условия только на баннере. Исправление: добавить их обычным текстом рядом с изображением.
- Проверять цвета и забывать о ссылках. Исправление: нажать основную кнопку в тестовом письме и проверить страницу назначения.
Письмо готово к следующему этапу проверки, когда в обеих темах читается предложение, различим отправитель и понятна кнопка действия. Полного совпадения оттенков добиваться необязательно. Если фон изменился, но содержание осталось читаемым, переделывать этот блок только ради одинакового вида не требуется.
Сейчас потратьте до двух минут на один шаг: отправьте себе тестовую версию ближайшей email-рассылки.
