Предпросмотр во входящих
Пока письмо не открыли, человек видит только строку в списке: от кого оно, тему и несколько серых слов. Введите свои и посмотрите, как их показывают семь раскладок почтовых ящиков и где обрезают.
Серые слова после темы или под ней. Оставьте поле пустым, чтобы увидеть, что показывает почтовый ящик, когда у письма его нет.
Первый видимый текст письма, сверху вниз, включая ссылку «открыть в браузере» или описания картинок. Почтовые клиенты берут его, когда текста превью нет или он слишком короткий.
Превью рисует ваш браузер по мере ввода. Ничего из введённого не отправляется нам и не сохраняется.
Во входящих
Семь строк почтового ящика, перерисованных в HTML при типичной ширине и показанных как непрочитанное письмо. Это близкие приближения: реальная обрезка меняется в зависимости от ширины окна, настройки плотности, размера шрифта и шрифтов, установленных на устройстве. Число символов измерено по этим рисункам.
На что смотреть
Скрытый прехедер для вставки
Поставьте этот блок первым внутри <body>, перед любым другим текстом. В открытом письме div невидим, но списки писем его читают, потому что это первый текст в HTML. Длинная цепочка ‌ после вашей фразы и есть заполнение: символы нулевой ширины и пробелы, которые занимают остаток области превью, так что клиенту негде дописать «Открыть это письмо в браузере» или ссылку из меню.
Три части строки во входящих
Папка «Входящие» это список строк, и каждая строка собрана из одних и тех же трех частей письма.
- Имя отправителя
- Отображаемое имя в заголовке
From, часть перед адресом:From: Harbor Books <orders@harborbooks.example>. Обычно оно стоит первым или выделено жирным, и именно по нему люди решают, знают ли они вас. - Тема
- Заголовок
Subject. Одна строка в любой раскладке, обрезанная многоточием, когда кончается место. - Текст предпросмотра
- Это вовсе не заголовок. Почтовая программа читает начало тела письма и показывает первые найденные слова. Когда маркетологи ставят туда фразу намеренно, ее называют прехедером.
Первыми двумя частями вы управляете напрямую. Третьей только через то, какой текст идет в вашем HTML первым.
Обрезка зависит от ширины, а не от числа символов
Вы наверняка читали, что тема должна быть короче 50 символов. Это эмпирическое правило, потому что ни одна почтовая программа символы не считает. Каждая отводит теме поле определенной ширины и дает тексту выйти за его край. В строку из узких букв помещается больше, чем в строку из заглавных. «illicit little fib» на экране гораздо короче, чем «WWW MMM SUMMER», хотя символов в них примерно поровну.
Эта страница работает так же. Каждый макет это настоящая HTML-раскладка типичной ширины со шрифтами, которые запрашивает эта программа, и браузер обрезает текст так, как обрезала бы она. Затем скрипт измеряет, сколько ваших символов уцелело. Считайте цифры приблизительными: у вашего читателя может быть крупнее шрифт, уже окно или устройство без этого шрифта.
| Раскладка | Как устроена строка |
|---|---|
| Gmail и Yahoo Mail в браузере на компьютере | Одна строка. Фиксированная колонка для отправителя, затем тема и предпросмотр делят оставшуюся ширину, так что длинная тема вытесняет предпросмотр. |
| Outlook на компьютере, Apple Mail на Mac | Узкая колонка списка рядом с областью чтения. Отправитель, тема и предпросмотр получают по своей строке. Apple Mail отводит предпросмотру две строки. |
| Gmail и Outlook на телефоне | Три строки одна под другой, по одной на каждую часть, рядом с круглым значком с инициалом. |
| Apple Mail на iPhone | Отправитель, тема, затем по умолчанию две строки предпросмотра. Читатель может выбрать от нуля до пяти. |
Как задать текст предпросмотра и дополнить его
Чтобы выбрать текст предпросмотра, сделайте свою фразу первым текстом в теле письма и скройте ее в открытом письме. Блок, который генерирует эта страница, делает это с помощью div, который не занимает места и не имеет видимого цвета.
Есть подвох. Если ваша фраза длиной 60 символов, а у программы место на 110, она читает дальше и добавляет то, что идет следом: «View this email in your browser», альтернативный текст вашего логотипа, «Home | Shop | Contact». Чтобы это остановить, поставьте после фразы длинную цепочку символов, которые занимают место в предпросмотре, но ничего не рисуют: несоединитель нулевой ширины и неразрывный пробел, повторенные много раз (‌ ). Программа заполняет ими область предпросмотра и останавливается.
Почтовые программы меняют способ построения предпросмотра, никого не предупреждая, а некоторые схлопывают пустые символы. Перед большой рассылкой отправьте себе тестовое письмо и посмотрите его на телефоне.
На чем основаны замечания
Список под макетами строится на простых измерениях того, что вы ввели:
- Точки обрезки темы и имени отправителя, взятые из макетов, с указанием самой короткой телефонной раскладки.
- Текст предпросмотра: отсутствует, повторяет тему (то же начало или не меньше 80% тех же слов) или короче отведенного места, так что за ним следует текст письма.
- Форма: больше 70% заглавных букв, два восклицательных знака или больше, число эмодзи, «Re:» или «Fwd:» в письме, которое не является ответом.
- Спамные слова: короткий английский список («free», «act now», «guaranteed»…), только для сведения.
Ничто из этого не решает, куда попадет ваше письмо. Почтовые провайдеры фильтруют в основном по отправителю: проходит ли домен SPF, DKIM и DMARC и как получатели обращались с его письмами раньше. Эту сторону можно проверить с помощью проверки аутентификации почты. Слова важны для того, что происходит после доставки, когда человек решает, открывать ли письмо.
Частые вопросы
Какой длины должна быть тема письма?
Телефоны показывают примерно от 30 до 45 символов темы, в зависимости от букв и программы. Поместите в это пространство слова, по которым письмо узнают. Более длинная тема допустима, если остальное это подробности, которые увидит читатель на компьютере.
Что такое прехедер в письме?
Фраза, которая показывается после темы или под ней в списке входящих. Это первый текст в теле письма, обычно скрытый в открытом письме с помощью CSS, чтобы он появлялся только в списке.
Почему во входящих мое письмо показывает «View this email in your browser»?
Потому что эта ссылка первый текст в вашем HTML и перед ней нет текста предпросмотра. Добавьте скрытый прехедер первым элементом тела письма и дополните его заполнителем, чтобы программа не продолжала читать до ссылки.
Сколько символов предпросмотра показывает Gmail?
Фиксированного числа нет. В браузере на компьютере Gmail ставит тему и предпросмотр в одну строку, поэтому предпросмотру достается то, что оставила тема, от нуля до более чем 100 символов. На телефоне ему отведена отдельная строка, примерно от 35 до 45 символов.
Что делает ‌ в прехедере?
Это заполнитель, который ничего не рисует. Несоединитель нулевой ширины и следом неразрывный пробел, повторенные много раз после фразы предпросмотра, занимают остаток области предпросмотра, так что никакой другой текст письма туда не добавляется.
Отправляют ли эмодзи или слова вроде «free» письмо в спам?
Сами по себе редко. Фильтры придают аутентификации и репутации отправителя гораздо больше веса, чем словам. Но тема, в которой нагромождены заглавные буквы, восклицательные знаки и рекламные слова, действительно выглядит как мусор для человека, который ее читает, и это достаточная причина ее смягчить.