Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 36
Для картинок еще обязательно прописать аттрибут image чтобы они отображались в некоторых клиентах
Всё равно каждый почтовик по своему обрезает теги. А Outlook вообще превращает оформленное письмо в кашу.
Подскажите, встречалась ли вам такая проблема, когда веб-доступ к Exchange режет избирательно изображения?
Пытался сверстать макет табличного письма для Outlook, возникла проблема —
таблица выглядит как несколько строк заголовка с логотипами, затем несколько строк с фотографиями сотрудников и текстом. Завершается тоже строкой с логотипом — то есть все картинки находятся внутри таблицы.
MS Outlook показывает корректно, доступ к этому же exchange через web как намеренно удаляет строки с логотипами, оставляя фотографии. Пытался добавить сверху и снизу лишний TR, но web outlook все равно удалил. При просмотре кода, видно что веб-доступ в эксчендже полностью коверкает html верстку, заменяя ее на свою с div/span/p, но как победить я не понял.
P.S. Клиент под apple ведет себя практически также, как web access — отрезал логотипы сверху и справа.
Пытался сверстать макет табличного письма для Outlook, возникла проблема —
таблица выглядит как несколько строк заголовка с логотипами, затем несколько строк с фотографиями сотрудников и текстом. Завершается тоже строкой с логотипом — то есть все картинки находятся внутри таблицы.
MS Outlook показывает корректно, доступ к этому же exchange через web как намеренно удаляет строки с логотипами, оставляя фотографии. Пытался добавить сверху и снизу лишний TR, но web outlook все равно удалил. При просмотре кода, видно что веб-доступ в эксчендже полностью коверкает html верстку, заменяя ее на свою с div/span/p, но как победить я не понял.
P.S. Клиент под apple ведет себя практически также, как web access — отрезал логотипы сверху и справа.
Не надо, пожалуйста, отправлять письма с картиночками и на бланке, это уродство нереальное. Еще и отображается везде по-разному. И грузить сраные картиночки-шрифтики по мобильному интернету тоже грустно.
Сделайте доброе дело, отправляйте письма в text/plain.
Сделайте доброе дело, отправляйте письма в text/plain.
text/plain крут в обычной переписке, а когда нужно провести рекламную кампанию или еще что-то там, то без красивых картинок не обойтись. Таковы реалии
А еще можно делать письма с двумя секциями: html и text/plain и тогда всем будет хорошо =)
Тесты показывают, что на 40% больше кликают на картиночки нежели просто тект
может быть, кто–то сталкивался с такой проблемой: клиент gmail для ios/android выводит вверху над сообщением большую кнопку: «вид сообщения отформатирован под ваш экран. показать оригинал?» естественно, вся вёрстка из–за изменения свойств разваливается, пока не нажмёшь на эту кнопку, после чего сообщение выглядит идеально, как и должно быть. можно как–нибудь заставить приложение изначально не делать ничего, просто сразу отображать оригинал?
Ужас, не думал что почтовые клиенты так ужасно себя ведут.
Из статьи я понял, что если вдруг соберусь делать рассылку, то буду использовать только чистый текст. Из-за отсутствия стандарта отображения html в почтовых клиентах надо слишком много помнить вещей, которые в будущем будут меняться.
Спасибо за подробное руководство!
Я бы добавил, что стоит всегда принудительно указывать шрифты, поскольку каждый почтовик отображает со своим шрифтом по умолчанию. Но это непринципиально, поскольку из текста статьи и так вытекает положение, что необходимо по максимуму заполнять всевозможные атрибуты и стили.
А что Вы можете сказать по поводу кодировки писем? Какую лучше и, если можно так сказать, правильнее использовать для рассылок?
Я бы добавил, что стоит всегда принудительно указывать шрифты, поскольку каждый почтовик отображает со своим шрифтом по умолчанию. Но это непринципиально, поскольку из текста статьи и так вытекает положение, что необходимо по максимуму заполнять всевозможные атрибуты и стили.
А что Вы можете сказать по поводу кодировки писем? Какую лучше и, если можно так сказать, правильнее использовать для рассылок?
Могли бы Вы выложить шаблон такой сверстанной странички для e-mail?
А я бы хотел добавить к всему сказанному в статье, что
Outlook игнорирует все инлайновые стили, которые снабжены !important;.
Довольно долго сегодня ломал голову, почему же ссылки у меня не окрашиваются… спасибо одному незаметному комментарию на стековерфлоу…
Так что учтите это, если когда-то вам случится верстать почтовые рассылки. Глядишь, сэкономите час-другой времени с этим знанием.
Outlook игнорирует все инлайновые стили, которые снабжены !important;.
Довольно долго сегодня ломал голову, почему же ссылки у меня не окрашиваются… спасибо одному незаметному комментарию на стековерфлоу…
Так что учтите это, если когда-то вам случится верстать почтовые рассылки. Глядишь, сэкономите час-другой времени с этим знанием.
zurb.com/ink/
использую для вёрстки писем, потом прогоняю через
templates.mailchimp.com/resources/inline-css/
потому как все стили в head некоторые веб-интерфейсы и почтовики обрубают. Со всем вышеперечисленным сталкивался, приходится помнить.
использую для вёрстки писем, потом прогоняю через
templates.mailchimp.com/resources/inline-css/
потому как все стили в head некоторые веб-интерфейсы и почтовики обрубают. Со всем вышеперечисленным сталкивался, приходится помнить.
Можно я крупными напишу?
Пожалуйста! Не используйте HTML разметку в письмах. НИКОГДА!!!
Кроме того, что это бессмысленная трата сил и времени, это еще и делает чтение письма невозможным в большинстве клиентов, кроме самых мэйнстримовых.
В целом, использование HTML разметки — бессмысленная и вредная практика выходящая за все стандарты и не имеющая ровным счетом никакого смысла.
Лучшее письмо — это plain text из пары строк написанных вежливым и грамотным языком и стандартным привычным для глаза пользователя шрифтом.
Пожалуйста! Не используйте HTML разметку в письмах. НИКОГДА!!!
Кроме того, что это бессмысленная трата сил и времени, это еще и делает чтение письма невозможным в большинстве клиентов, кроме самых мэйнстримовых.
В целом, использование HTML разметки — бессмысленная и вредная практика выходящая за все стандарты и не имеющая ровным счетом никакого смысла.
Лучшее письмо — это plain text из пары строк написанных вежливым и грамотным языком и стандартным привычным для глаза пользователя шрифтом.
Почему бы не использовать удобный и популярный и поддерживаемый всеми HTML, например внутри корпорации?
RTF поддерживается реже, чем html.
Не все являются программистами/сисадминами, да и в этом случае, крайне удобно при переписке помечать и выделять шрифтом и цветами отдельные слова/фразы — что есть кроме HTML? Да ничего!
RTF поддерживается реже, чем html.
Не все являются программистами/сисадминами, да и в этом случае, крайне удобно при переписке помечать и выделять шрифтом и цветами отдельные слова/фразы — что есть кроме HTML? Да ничего!
1. для того чтобы сделать акцент, вам не нужен ни цвет ни другой шрифт.
2. если очень хочется подчеркнуть что-либо, можно использовать классическую разметку _подчеркиваемое_ *выделенное*. Такая разметка
а) делает текст более читаемым
б) удобна для просто алгоритмизируемой машинной обработки, если это нужно корреспонденту (например на раз-два можно сделать парсер средствами bash и sed)
Т.е. «костыли» в виде разнокалиберных шрифтов и цветов в письме выдают в авторах людей элементарно неграмотных, как в смысле визуальной так и языковой культуры, не говоря уже про культуру программирования и тотально непонимающих, как работает типографика и как устроено восприятие текста человеком. Все это делает очевидным банальное неумение выразить мысль через простую компоновку (в абзацы и подпункты) и сделать это средствами самого языка.
Впрочем, это же имеет место и для сайтов. Как правило сайты с дизайном в стиле «вырви глаз» рассылают столь же чудовищные по оформлению письма-подтверждения (не говоря уже про навязчивые аноносы, о которых их никто никогда не просит), порой вовсе игнорируя текстовую часть.
2. если очень хочется подчеркнуть что-либо, можно использовать классическую разметку _подчеркиваемое_ *выделенное*. Такая разметка
а) делает текст более читаемым
б) удобна для просто алгоритмизируемой машинной обработки, если это нужно корреспонденту (например на раз-два можно сделать парсер средствами bash и sed)
Т.е. «костыли» в виде разнокалиберных шрифтов и цветов в письме выдают в авторах людей элементарно неграмотных, как в смысле визуальной так и языковой культуры, не говоря уже про культуру программирования и тотально непонимающих, как работает типографика и как устроено восприятие текста человеком. Все это делает очевидным банальное неумение выразить мысль через простую компоновку (в абзацы и подпункты) и сделать это средствами самого языка.
Впрочем, это же имеет место и для сайтов. Как правило сайты с дизайном в стиле «вырви глаз» рассылают столь же чудовищные по оформлению письма-подтверждения (не говоря уже про навязчивые аноносы, о которых их никто никогда не просит), порой вовсе игнорируя текстовую часть.
Вы рассуждаете с точки зрения IT-специалиста с техническим образованием, и я полностью согласен со всеми приведенными аргументами в пользу text/plain. Но в большинстве случаев требования к HTML-разметке писем, так же как и «вырви-глаз-дизайн» сайтов, исходят от заказчиков или руководителей либо с извращенным вкусом, либо просто настолько упертых, что их невозможно переубедить. Так что нам, как разработчикам, остается либо выполнять требования, либо искать другое место работы/другого заказчика.
Грош — цена специалисту, который не в состоянии аргументированно и доходчиво объяснить заказчику, почему хорошее решение лучше плохого. «Специалист» же, который идет на поводу у глупого заказчика и делает что-либо вопреки собственным представлениям о профессиональном уровне и качестве (тем более, оправдывая это получаемыми деньгами) вовсе не достоин называться таковым и, напротив, достоин всякого порицания.
Любой специалист всегда имеет возможность отказаться работать с клиентом (или начальником) который по его мнению не соответствует своей позиции и предъявляет требования не сопоставимые с его профессиональным уровнем. Всегда можно просто отказаться. Просто ради уважения к себе, хотя бы.
Любой специалист всегда имеет возможность отказаться работать с клиентом (или начальником) который по его мнению не соответствует своей позиции и предъявляет требования не сопоставимые с его профессиональным уровнем. Всегда можно просто отказаться. Просто ради уважения к себе, хотя бы.
А как тогда отправить письмо с сылкой на сброс пароля/просмотр новой публикации/правила акции/новые правила обслуживания/новую политику кофиденциальности и т.д.?
А ещё, если это рассылка, то должна быть ссылка на отписку. Как её вставлять?
Не весть HTML, а просто картинки (для логотипа) + ссылки почему нельзя использовать?
Любопытно узнать на счёт поддержки svg почтовыми клиентами (многие веб-морды и какой-нибудь kmail работают нормально, но на счёт того же outlook посмотреть негде).
Встроили бы все эти почтовики уже давно какой-нибудь WebView или что-то подобное на каком-нибудь WebKit'е. Столько лет прошло, а воз и ныне там.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Верстка email рассылок от А до Я для чайников