Как стать автором
Обновить

Комментарии 35

Для картинок еще обязательно прописать аттрибут image чтобы они отображались в некоторых клиентах
Всё равно каждый почтовик по своему обрезает теги. А Outlook вообще превращает оформленное письмо в кашу.
Мы с ним долго боролись)
НЛО прилетело и опубликовало эту надпись здесь
В соответствии с RFC-5322:
Данная спецификация вносит два ограничения на число символов в строке. Строка должна содержать не более 988 символов; следует использовать строки размером не более 78, без учета CRLF.

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

Пытался сверстать макет табличного письма для Outlook, возникла проблема —
таблица выглядит как несколько строк заголовка с логотипами, затем несколько строк с фотографиями сотрудников и текстом. Завершается тоже строкой с логотипом — то есть все картинки находятся внутри таблицы.

MS Outlook показывает корректно, доступ к этому же exchange через web как намеренно удаляет строки с логотипами, оставляя фотографии. Пытался добавить сверху и снизу лишний TR, но web outlook все равно удалил. При просмотре кода, видно что веб-доступ в эксчендже полностью коверкает html верстку, заменяя ее на свою с div/span/p, но как победить я не понял.

P.S. Клиент под apple ведет себя практически также, как web access — отрезал логотипы сверху и справа.

Если у вас есть код письма и скриншоты проблемы, то напишите в личку, попробуем решить вместе. А так, затрудняюсь ответить.
Не надо, пожалуйста, отправлять письма с картиночками и на бланке, это уродство нереальное. Еще и отображается везде по-разному. И грузить сраные картиночки-шрифтики по мобильному интернету тоже грустно.
Сделайте доброе дело, отправляйте письма в text/plain.
text/plain крут в обычной переписке, а когда нужно провести рекламную кампанию или еще что-то там, то без красивых картинок не обойтись. Таковы реалии
А еще можно делать письма с двумя секциями: html и text/plain и тогда всем будет хорошо =)
Тесты показывают, что на 40% больше кликают на картиночки нежели просто тект
может быть, кто–то сталкивался с такой проблемой: клиент gmail для ios/android выводит вверху над сообщением большую кнопку: «вид сообщения отформатирован под ваш экран. показать оригинал?» естественно, вся вёрстка из–за изменения свойств разваливается, пока не нажмёшь на эту кнопку, после чего сообщение выглядит идеально, как и должно быть. можно как–нибудь заставить приложение изначально не делать ничего, просто сразу отображать оригинал?
для таблицы, которая контролирует ширину письма, добавить style=«min-width: ШИРИНА_ПИСЬМА;»
Адаптивная верстка решит эту проблему
Ужас, не думал что почтовые клиенты так ужасно себя ведут.
НЛО прилетело и опубликовало эту надпись здесь
Точно также как ситуация с Браузерами — их много разных и все по-разному себя ведут
Ну сейчас не настолько ужасно. Просто тут приходится костыли на костылях делать, будто в старые времена попал. Хорошо мне не приходилось заниматься почтовой вёрсткой и большая часть мучений позади.
Из статьи я понял, что если вдруг соберусь делать рассылку, то буду использовать только чистый текст. Из-за отсутствия стандарта отображения html в почтовых клиентах надо слишком много помнить вещей, которые в будущем будут меняться.
Спасибо за подробное руководство!
Я бы добавил, что стоит всегда принудительно указывать шрифты, поскольку каждый почтовик отображает со своим шрифтом по умолчанию. Но это непринципиально, поскольку из текста статьи и так вытекает положение, что необходимо по максимуму заполнять всевозможные атрибуты и стили.

А что Вы можете сказать по поводу кодировки писем? Какую лучше и, если можно так сказать, правильнее использовать для рассылок?
Могли бы Вы выложить шаблон такой сверстанной странички для e-mail?
А я бы хотел добавить к всему сказанному в статье, что

Outlook игнорирует все инлайновые стили, которые снабжены !important;.

Довольно долго сегодня ломал голову, почему же ссылки у меня не окрашиваются… спасибо одному незаметному комментарию на стековерфлоу…

Так что учтите это, если когда-то вам случится верстать почтовые рассылки. Глядишь, сэкономите час-другой времени с этим знанием.
Глупости. Important работет прекрасно. Для оформления ссылок в аутлуке необходимо внутри ссылки добавить дополнительный тег span с заданием цвета.
zurb.com/ink/
использую для вёрстки писем, потом прогоняю через
templates.mailchimp.com/resources/inline-css/

потому как все стили в head некоторые веб-интерфейсы и почтовики обрубают. Со всем вышеперечисленным сталкивался, приходится помнить.
Можно я крупными напишу?
Пожалуйста! Не используйте HTML разметку в письмах. НИКОГДА!!!

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

В целом, использование HTML разметки — бессмысленная и вредная практика выходящая за все стандарты и не имеющая ровным счетом никакого смысла.

Лучшее письмо — это plain text из пары строк написанных вежливым и грамотным языком и стандартным привычным для глаза пользователя шрифтом.
Почему бы не использовать удобный и популярный и поддерживаемый всеми HTML, например внутри корпорации?
RTF поддерживается реже, чем html.

Не все являются программистами/сисадминами, да и в этом случае, крайне удобно при переписке помечать и выделять шрифтом и цветами отдельные слова/фразы — что есть кроме HTML? Да ничего!
1. для того чтобы сделать акцент, вам не нужен ни цвет ни другой шрифт.
2. если очень хочется подчеркнуть что-либо, можно использовать классическую разметку _подчеркиваемое_ *выделенное*. Такая разметка
а) делает текст более читаемым
б) удобна для просто алгоритмизируемой машинной обработки, если это нужно корреспонденту (например на раз-два можно сделать парсер средствами bash и sed)

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

Впрочем, это же имеет место и для сайтов. Как правило сайты с дизайном в стиле «вырви глаз» рассылают столь же чудовищные по оформлению письма-подтверждения (не говоря уже про навязчивые аноносы, о которых их никто никогда не просит), порой вовсе игнорируя текстовую часть.
Вы рассуждаете с точки зрения IT-специалиста с техническим образованием, и я полностью согласен со всеми приведенными аргументами в пользу text/plain. Но в большинстве случаев требования к HTML-разметке писем, так же как и «вырви-глаз-дизайн» сайтов, исходят от заказчиков или руководителей либо с извращенным вкусом, либо просто настолько упертых, что их невозможно переубедить. Так что нам, как разработчикам, остается либо выполнять требования, либо искать другое место работы/другого заказчика.
Грош — цена специалисту, который не в состоянии аргументированно и доходчиво объяснить заказчику, почему хорошее решение лучше плохого. «Специалист» же, который идет на поводу у глупого заказчика и делает что-либо вопреки собственным представлениям о профессиональном уровне и качестве (тем более, оправдывая это получаемыми деньгами) вовсе не достоин называться таковым и, напротив, достоин всякого порицания.

Любой специалист всегда имеет возможность отказаться работать с клиентом (или начальником) который по его мнению не соответствует своей позиции и предъявляет требования не сопоставимые с его профессиональным уровнем. Всегда можно просто отказаться. Просто ради уважения к себе, хотя бы.
Любопытно узнать на счёт поддержки svg почтовыми клиентами (многие веб-морды и какой-нибудь kmail работают нормально, но на счёт того же outlook посмотреть негде).
Забудьте об SVG в письмах. Тем не менее Outlook поддерживает VML.
Встроили бы все эти почтовики уже давно какой-нибудь WebView или что-то подобное на каком-нибудь WebKit'е. Столько лет прошло, а воз и ныне там.
Приветствую, коллега. Раз речь идет об англоязычных пользователях, то крайне интересна ситуация с поддержкой BlackBerry. Я на этот счет информацией практически не располагаю.
Обнаружил случайно, что в TheBat 4.2 не отображаются картинки, если указать ширину и высоту перед тегом src. Т.е.
картинка отображается, если
<img src="http://example.com/image.jpg" width=200 height=200 />
и не отображается, если
<img width=200 height=200 src="http://example.com/image.jpg"  />

А если добавить кавычки к значениям атрибутов? Браузеры-то это нормально съедают, а вот почтовик такое небрежное написание может сводить с ума.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации