В начале была почта, или маркетинг в почтовом ящике

Дизайн, копирайт, идеи для правильных рассылок. Блог Почтового Куба

03.06.2007

Экранная типографика в почтовом ящике

Специальные символы — длинные тире, кавычки, символы копирайта и другие — прочно вошли в обиход веб-дизайнеров. Безусловно, они оказывают большое влияние на внешний вид текста, но, как выяснилось, использовать их нужно аккуратно.

Плакат гласил: «Средняя температура в нашей больнице 36.6±3°С».
«Вот фигня», — подумал доктор.

Мы давно и успешно применяем небезызвестный инструмент Типограф для обработки текстов, которые публикуем в вебе. Несмотря на разнообразную критику, этот инструмент действительно очень помогает в работе. Он незаменим, когда нужно обработать большое количество текста. И это единственный инструмент подобного рода, который работает в онлайне.

Естественно, мы стали пользоваться Типографом для верстки текстов писем, но сразу получили сообщения о том, что некоторые спецсимволы неверно отображаются в почтовых системах. Мы решили проверить полученные сигналы и провели небольшое исследование «совместимости спецсимволов».

Нестандарт

Быстрый тест. Наберем в редакторе фразу:

Минус – это не тире.

пропустим её через Типограф и получим:

Минус — это не тире.

Вставим этот код в макет письма, отправим письмо на тестовый адрес на mail.ru и увидим в ящике примерно такой текст:

Минус ? это не тире.

Как выяснилось, у пользователя gmail.com будет аналогичная проблема, только вместо тире он увидит квадратик.

Хотя все остальные системы — от Яндекс.Почты до Microsoft Oulook — покажут длинное тире.

Мы проверили все спецсимволы, описанные в статье Экранная типографика и составили «таблицу совместимости» c почтовыми системами Gmail.com, Яндекс.Почта, Mail.ru, Почта Рамблера, Pochta.ru, NewMail.ru, Tut.by, а также Microsoft Outlook и The Bat!.

Полностью таблицу совместимости мы не приводим, поскольку проблемы с показом выявлены только у двух систем.

Gmail.com и Mail.ru не показывают длинное тире, лапки, многоточие и некоторые другие символы, закодированные так, как описано в Экранной типографике.

Это означает, что при создании макета письма нельзя руководствоваться указанными в статье кодами и нельзя пользоваться Типографом, настроенным по-умолчанию.

Таблица 1. Несовместимость символов "экранной типографики":

    По § 62
§ параграф §
© copyright ©
® символ зарегистрированного товарного знака ®
символ товарного знака ™
° знак градуса °
« левая кавычка (левая ёлочка) «
» правая кавычка (правая ёлочка) »
многоточие …
апостроф ’
открывающая лапка „
закрывающая лапка “
открывающая английская лапка “
закрывающая английская лапка ”
жирная точка •
среднее тире –
минус −
± плюс-минус ±
тире —
знак номера №

О несоответствии этих кодов стандарту писали и раньше:

Символы с кодами 128—159 не могут использоваться в HTML-документах, ибо зарезервированы как управляющие. Тем не менее [...] широко практикуется подстановка, например, — для формирования символа длинного тире.

http://ezhe.ru/ib/issue.html?69

Стандарт

Как показали последующие опыты, все системы правильно отображают символы, закодированные
по стандарту HTML4. Это означает, что если вместо — поставить — или — то шансы читателя увидеть тире резко возрастут.

Вот таблица кодов, которые правильно отображаются во всех проверенных нами почтовых системах, включая веб-системы и настольные почтовые клиенты (таблица 2):

    Правильно
§ параграф §
© copyright ©
® символ зарегистрированного товарного знака ®
символ товарного знака ™
° знак градуса °
« левая кавычка (левая ёлочка) «
» правая кавычка (правая ёлочка) »
многоточие …
апостроф ’
открывающая лапка „
закрывающая лапка “
открывающая английская лапка “
закрывающая английская лапка ”
жирная точка •
среднее тире –
минус −
± плюс-минус ±
тире —
знак номера №

Мы предполагаем, что все остальные спецсимволы, закодированные по стандарту HTML4 также будут корректно отображаться всеми почтовыми системам.

Некоторые источники сообщают, что не все стандартные символы корректно отображаются в старых браузерах — например, в Opera 5. Впрочем, те же источники признают, что таких браузеров почти не осталось.

Выводы

Во-первых, нужно перестать использвать — для кодирования тире. Вместо — используйте — Другие символы также кодируйте буквенными обозначениями, как указано в таблице 2.

Во-вторых, если Вы пользуетесь Типографом, настройте его правильно. Зайдите в «Настройки» и установите опцию «Выдавать символы только буквенными кодами». После этой настройки Вы будете получать «оттипографленный» текст с правильными кодами.

Вне зачета: Copy-Paste

Microsoft Word автоматически заменяет «клавиатурные» кавычки на «ёлочки», минус — на тире и т.д. Начинающие дизайнеры вставляют текст «из ворда» в дизайн-макет, не задумываясь о кодировании спецсимволов. И многие почтовые клиенты прощают такое копирование.

Эксперимент показал, что такие скопированные спецсимволы почти всегда правильно отображают Microsoft Outlook, The Bat!, Gmail, Яндекс.Почта, Mail.ru, tut.by, и newmail.ru, то есть большинство исследованных нами почтовых систем.

Однако, если кодировка письма будет отлична от windows-1251, возникнут проблемы у Mail.ru. Он подставит вместо полученных таких путем кавычек-ёлочек другие символы, совсем не похожие на кавычки.

Вывод: хотя большинство почтовых систем поддерживает спецсимволы, скопированные
из ворда, очень желательно не полениться закодировать спецсимволы (так, как указано в таблице 2).

 

[1] List of XML and HTML character entity references, Wikipedia
[2] Экранная типографика, Артемий Лебедев

[3] Неразрывные проблемы, Артемий Ломов

Popularity: 12% [?]

No related posts.

1 комментарий »

Vallery — 18.10.2007 17:30 #

Вообще, использование символов – это немалая проблема для вебдизайнеров при разработке некоторых типов веб страниц. Я знаю не мало веб дизайнеров, пишущих HTML код почти исключительно в нотепаде. И проблема показа HTML кода как текста на веб странице – весьма актуальна. Приходится писать часть кода в HTML редакторах, потом его добавлять в поле нотепада. Для себя я просто разработал программку для перекодировки. А вот хороших статей и справочных материалов совсем мало. Спасибо Вам за эту статью. Весьма полезна.
С уважением

Оставить комментарий

Блог Почтового Куба — сервиса почтовых рассылок для дизайнеров.
При перепечатке, пожалуйста, ставьте ссылку на источник.