Клиент жалуется что в одном из писем разломалась верстка

HTML-макеты электронной почты ломаются при пересылке — выжить в редакторе HTML Word 2003

Клиенты моего начальника жалуются, что при пересылке некоторых информационных бюллетеней в формате HTML их табличный макет ломается. Я определил, что это, скорее всего, вызвано использованием в Outlook следующего параметра:

Инструменты> Параметры> Формат почты> Использование Microsoft Office Word 2003 для редактирования сообщений электронной почты

Мой начальник отказывается менять эту опцию и требует, чтобы я придумал обходной путь. Но я просто в тупике. Электронная почта, которая ломается при пересылке с этой опцией, находится по адресу http. : //www.egusts.com/stratham/stanford-square/10-0826/new/

Вот что происходит, когда редактор Word 2003 HTML покончил с этим. Никаких изменений, просто нажмите «вперед» с выбранной опцией — http : //www.egusts.com/stratham/stanford-square/10-0826/new/alt/

Но я все еще в тупике. Я понятия не имею, что делать. Я думал, что table-html моего исходного шаблона был действительно простым и понятным. Что ломается в редакторе Word 2003? Почему? Это убирает какие-то теги? Добавление тегов, которые все портят? Что я могу сделать?

Я в своем уме! Спасибо за помощь

2 ответа

Я понял, что, помимо использования прозрачных разделительных GIF-файлов, мне нужно указать «ширину» для каждого из s, в которых размещены разделительные GIF-файлы.

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

К сожалению, пересылка электронной почты заставляет одного клиента повторно отображать HTML, который уже был обработан, и это почти всегда что-то портит. Однако использование передовых методов при написании писем поможет сократить эти проблемы. Я написал много писем и вот кое-что узнал:

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

Если у вас маркированный список, используйте либо неупорядоченный список (ul), либо, если вы должны использовать таблицу из 2 столбцов со строкой для каждого элемента списка и поставить • в первый столбец для каждого элемента.

Держитесь подальше от тегов p, они имеют непоследовательный интервал между почтовыми клиентами. Использование двух тегов br может дать вам примерно такое же количество места.

Используйте отступы для управления интервалом между элементами вместо полей. Опять же, не очень последовательный, на самом деле, я не уверен, что это вообще работает.

Элементы с суперсценариями обычно сдвигают строку, на которой они находятся, вниз (или строки вверху). Используйте встроенный стиль line-height: 0; чтобы исправить это. Учтите, однако, что это все равно произойдет при пересылке. Если вы используете сноски и вам нужно добавить в верхний индекс только несколько цифр, используйте объекты HTML & sup1; , & sup2; , и & sup3 ;.

Фоновые изображения не поддерживаются в Outlook 2007-2013 для Windows. Кажется, они работают для Outlook Mac и многих других клиентов, но не беспокойтесь о них, если вам нужно поддерживать Outlook для Windows.

Найдите надежный шаблон для использования и всегда начинайте с него. Это должно включать стили в голове, направленные на решение проблем с веб-клиентом, настольным компьютером и почтовым клиентом. Вот некоторые из них, которые я обычно использую:

В то время как веб-клиенты, такие как Gmail, Yahoo, Outlook.com и AOL, вероятно, удалят заголовок и любые внутренние стили из вашей электронной почты, они будут доступны для большинства пользователей мобильных почтовых клиентов и для настольных почтовых клиентов, таких как Outlook и Thunderbird, которые что эти стили стремятся исправить. Для всего остального используйте встроенные стили.

Кроме того, похоже, вы создали это с помощью Fireworks. Это может сработать для веб-страницы, но электронная почта имеет множество подводных камней и ограничений, которые FW, вероятно, не учитывает. Я бы рекомендовал использовать Dreamweaver или какой-нибудь другой полезный текстовый редактор и делать это с помощью HTML со встроенными стилями.

Основы верстки HTML-писем для веб-разработчиков

Светлана Шаповалова, коммерческий автор и переводчик, специально для «Нетологии» адаптировала статью Ли Манро, в которой он рассказывает об основах верстки писем и делится советами по ее оптимизации.

Верстка HTML-писем. Когда веб-разработчики видят эти слова — на глазах у них выступают слезы.

Если вы верстальщик, то рано или поздно столкнетесь с версткой писем, нравится вам это или нет. HTML-письма — это настоящий олдскул.

Эдакое путешествие в прошлое, в год, скажем, 1999 — эпоху вебмастеров, Frontpage и WYSIWYG-редакторов и табличной верстки.

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

Последние несколько лет я провел, проектируя инструменты для разработчиков, и два года из них работал ведущим дизайнером продукта в Mailgun — email-сервиса для разработчиков. Я многое узнал о том, как работают email-рассылки и с какими проблемами сталкиваются разработчики при верстке HTML-писем. В этой статье я поделюсь своими знаниями.

Основы верстки HTML-писем для веб-разработчиков

Светлана Шаповалова

Коммерческий автор и переводчик

Основы верстки HTML-писем для веб-разработчиков курс

Старт в программировании

Узнать больше

Научитесь писать код за две недели
Создайте свой первый проект — небольшую игру для индивидуального подсчёта продолжительности жизни и мотивации
Познакомитесь с основами самого популярного языка программирования — JavaScript

HTML-шаблоны

Верстка HTML-шаблонов утомляет. Из-за этого появляется куча убого спроектированных писем — несуразных, однотипных, перегруженных, бессмысленных и раздражающих. Конечно, если вы получаете удовольствие от процесса или вам требуется что-то необычное и уникальное, тогда верстка собственных шаблонов стоит того. В противном случае, поискать хорошие шаблоны можно здесь:

Верстка HTML-шаблонов для email-рассылки

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

Графические движки на клиентской стороне

Дизайн email-писем до сих пор завис где-то в Средневековье. В бесчисленном количестве email-клиентов и устройств письма обрабатываются совершенно по-разному.

Для обработки HTML-писем почтовые клиенты используют различные движки:

Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit.
Outlook 2000, 2002 and 2003 используют Internet Explorer.
Outlook 2007, 2010 and 2013 используют Microsoft Word (да, Word!).
Веб-клиенты используют браузерный движок (например, WebKit для Safari использует, Blink для Chrome).

Кроме того, почтовые клиенты могут добавлять стили на свой вкус прямо сверху ваших. Например, Gmail приводит все шрифты для тега к виду:

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

Поддержка встроенных стилей и медиа-запросов в Gmail

В сентябре 2016 в Google объявили о поддержке встраиваемых стилей и медиа-запросов для Gmail. Это огромный шаг для развития email-индустрии. Сейчас Gmail поддерживает немалое количество CSS-свойств, что существенно упрощает разработку e-mail-шаблонов.

Использование табличной верстки

При блочной верстке с использованием div-ов возникают проблемы с позиционированием в различных клиентах. Особенно в тех, где для обработки используется Microsoft Word, к примеру, Outlook. Конечно, при желании можно пользоваться div-ами, но безопаснее верстать, будто за окном 1999 год — таблицами. Это означает:

table вместо div
#FFFFFF вместо #FFF
padding вместо margin
CSS2 вместо CSS3
HTML4 вместо HTML5
background-color вместо background
HTML-атрибуты вместо CSS
встроенные стили вместо подключаемых или блоков style.

Это советы из опыта. Понятное дело, вы можете их проигнорировать, но действовать придется на свой страх и риск.

При использовании таблиц, не забывайте использовать

Если пользуетесь Premailer, у него есть список с описанием CSS-атрибутов, применяемых в таких случаях.

Встроенные стили

Некоторые клиенты, особенно Gmail до недавних пор, беспощадно обрезают любые не встроенные стили. Есть несколько вариантов:

вписывать стили вручную в каждую строку;
использовать веб-инлайнер CSS;
использовать программный CSS-инлайнер;
положиться на почтовый сервис, который вы используете (если он поддерживает такую функцию).

Основы верстки HTML-писем для веб-разработчиков

Вписывать стили вручную — не самое оптимальное решение, поэтому я не стану его советовать. Такие шаблоны сложно масштабировать и изменять. Тем не менее, многим разработчикам такой подход нравится, потому что он позволяет контролировать процесс на 100%.

Если вы вписываете стили руками, я советую использовать сниппеты и/или язык шаблонов с partial и helper. Это избавит вас от необходимости по многу раз прописывать одно и то же.

К веб-инлайнерам относятся: CSS-инлайнер в Campaign Monitor, CSS Inliner Tool в MailChimp и Responsive Email Inliner в Foundation for Email.

В качестве программного инлайнера я рекомендую модуль Juice для Node.js. Неплохие Ruby-альтернативы — Premailer gem и Roadie.

Кнопки

Чтобы создать кнопку, идеально отображаемую любым клиентом, придется поизвращаться. Как я уже говорил, надо использовать таблицы — даже для кнопок.

Мне нравится вот такое решение. С ним вы получите нормальную кнопку для веб-клиентов:

В таком случае, встроенные стили будут выглядеть примерно так:

<table border=»0″ cellpadding=»0″ cellspacing=»0″ btn-primary» style=»border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box; min-width: 100% !important;» width=»100%»>
<tr>
<td align=»center» style=»font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;» valign=»top»>
<table border=»0″ cellpadding=»0″ cellspacing=»0″ style=»border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;»>
<tr>
<td style=»font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center;» valign=»top» bgcolor=»#3498db» align=»center»> <a href=»» target=»_blank» style=»display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;»>Take action now</a> </td>
</tr>
</table>
</td>
</tr>
</table>

Разберем подробнее. Первый тег <td> — это обертка, чтобы отцентрировать кнопку. Второй <td> задает размер кнопки. Некоторые клиенты, например, Outlook не распознают внутренние отступы в теге <a>, поэтому необходимо закрасить всю ячейку. В таком случае тег <a> займет все место во втором <td>, и вся область станет кликабельной.

Это лишь один из способов вставить кнопку в письмо. Конечно, не всегда получается добиться идеального отображения во всех клиентах, но и веб не всегда идеален до пикселя. Мне нравится этот способ, потому что он прост и не требует использования картинок или VML.

Что такое VML? Если вы хоть раз занимались разработкой писем, то, вероятно, сталкивались с этим понятием. Язык векторной разметки (Vector Markup Language, VML) поддерживается старыми версиями Outlook. В Microsoft заявили, что VML больше не поддерживается в Internet Explorer (IE), начиная с IE10. Тем не менее, пока в ходу Outlook 2007, 2010 и 2013, вы еще не раз увидите, как его используют для фоновых изображений.

Типографика

Проще всего пользоваться стандартными системными шрифтами. Это Helvetica, Arial и прочие. Однако можно использовать и веб-шрифты, например, Google Fonts. Расположите их за медиа-запросом WebKit, чтобы Outlook не ничего не перепутал.

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

Условия

Мы можем применять специальные CSS стили и показывать/скрывать определенные элементы/контент в различных версиях Outlook.

Если надо обратиться только к версии Outlook, базирующейся на Microsoft Word:

<!—[if mso]>
Этот контент видно только в версиях Outlook, базирующихся на Microsoft Word.
<![endif]—>

Версии Outlook, базирующиеся на IE:

<!—[if (IE)]>
Этот контент видно только в версиях Outlook, базирующихся на IE.
<![endif]—>

Если нужна определенная версия Outlook:

<!—[if mso 12]>
Этот контент видно только в Outlook 2007.
<![endif]—>

Также с помощью медиа-запросов можно выбрать клиентов, базирующихся на WebKit:

.special-webkit-element <
display: none;
>
@media screen and (-webkit-min-device-pixel-ratio:0) <
.special-webkit-element <
display: block !important;
>
>

Изображения и медиа

Изображения в письмах

Некоторые клиенты отображают картинки по умолчанию. Некоторые нет. Помните об этом, когда добавляете их в письма. Это также влияет на показатели метрик, так как изображения обычно используются для отслеживания открытий.

Outlook по умолчанию блокирует обработку изображений.
Apple Mail нет.
Gmail уже нет.

Не забывайте прописывать качественный alt-текст ко всем изображениям. Текст расскажет пользователю, что было написано на картинке или пояснит, что это за изображение, например, «Логотип компании». Можно даже привнести в текст немного творчества, как это сделали Email Monks:

Основы верстки HTML-писем для веб-разработчиков

Не забудьте добавить базовый сброс стилей для всех изображений:

Анимированные гифки поддерживаются большинством клиентов. Версии Outlook с 2007 по 2013 не отображают гифки, вместо этого показывается первый кадр.

Не забывайте также сжимать медиафайлы и загружать их на облако или хостинг. Большинство сервисов рассылок обычно делают это за вас.

У масштабируемой векторной графики (Scalable Vector Graphics, SVG) масса преимуществ для использования в вебе. Однако ее отображение в письмах может вести себя не так как надо, поэтому SVG нуждается в запасных вариантах или условиях. Обычно я не рекомендую использовать ее в письмах.

Для изображений, адаптированных под Retina-дисплеи, подбирайте изображения крупнее (1.5× to 3×) и изменяйте размер. Я обычно сохраняю изображения низкого качества в двух разрешениях, получается неплохо.

Помните, что для Outlook необходимо задавать ширину изображения с помощью атрибута width. Иначе Outlook отобразит реальный размер картинки и поломает верстку.

Видео в письмах

Видео поддерживается на iOS, Apple Mail и Outlook.com. В зависимости от клиента, вы можете использовать медиа-запросы, чтобы показывать или скрывать видео.

Формы в письмах

Поддержка форм везде разная. Поэтому лучше держитесь от них подальше и при необходимости подключайте внешние формы. Понятное дело, все зависит от целей. Безопаснее не пользоваться формами, но, к примеру Rebelmail и Mixmax делали классные штуки для опросов и e-commerce.

Кнопки быстрого действия в Gmail (Gmail Actions)

В Gmail можно использовать удобные кнопки быстрого действия. Возможно, вы встречали их в оповещениях GitHub или Amazon.

Как правильно верстать письма: рекомендации и требования для верстальщика

В предыдущей статье мы писали о визуальном стиле рассылок и давали рекомендации для дизайнеров. Если дизайн письма готов, то теперь нужно подготовить его к вёрстке.

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

Письма плохо отображаются в разных почтовиках.

Письма неадаптивны и плохо отображаются на мобильных устройствах.

С письмом трудно взаимодействовать и неудобно читать.

Письмо не увлекает, не вовлекает.

Некоторые блоки письма не отобразились, часть письма исчезла.

Письмо в почте выглядит не так, как было свёрстано и нарисовано в макете.

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

Не получается сверстать то, что задумали.

Непонятно, как сделать интерактив в письме.

Письмо разваливается на десктопных почтовиках вроде Outlook.

Письма попадают в спам (такое может быть из-за вёрстки и ссылок).

Письма долго грузятся.

Чтобы ваши письма корректно отображались в большинстве почтовиков, устройств, а сервисы рассылок не сломали их — следуйте советам по HTML и CSS кода.

Обратите внимание на DOCTYPE. Для писем самым безопасным доктайпом является:

Используйте табличный подход к вёрстке. Иначе письма будут плестись в хвосте в плане технологии вёрстки.

Избегайте сокращений CSS.

● Вместо сокращённого правила для стиля — несколько CSS-стилей. Например, вместо

● Не задавайте цвет, используя краткие формулировки вроде RED или #FFF. Всегда используйте полное шестнадцатеричное представление, например, #bb0000.

● Не используйте сокращённые варианты записи шрифта, характерные для CSS (то есть «font: 12px arial;»). Семейство шрифта, размер, цвет и высота строки должны задаваться по отдельности.

Старайтесь избегать объединения ячеек (colspan, rowspan). Лучше использовать вложенные таблицы. И не забывайте указывать параметры align и valign у ячеек.

Значение атрибутов CELLPADDING и CELLSPACING следует установить как «0». Не используйте никаких значений атрибута BORDER у table (кроме «0»), так как не все почтовые клиенты корректно интерпретируют другие значения.

Не задавайте line-height в em или процентах. Используйте только пиксели, тогда во всех почтовиках и устройствах письма будут выглядеть так, как вы задумали.

Оформление текста производите сразу двумя тегами — FONT и SPAN. Для родительской ячейки указать LINE-HEIGHT (это принципиально для Outlook 2013 и большинства веб-интерфейсов). Стоит отметить, что Outlook игнорирует параметр LINE-HEIGHT, указанный у ячейки, поэтому следует указать его также и у SPAN.

Используйте тег <BR> для вставки разрывов между блоками текста вручную. Однако будьте предельно осторожны, некоторые почтовые клиенты (например, Outlook 2007 и клиент iPhone) отображают размер межстрочных промежутков и шрифтов крупнее, чем принято, — и могут перенести текст на новую строку раньше запланированного вами разрыва.

Будьте внимательны при использовании CSS3. Здесь нет чётких правил. Какие-то стили поддерживаются полностью, какие-то частично. Всё зависит от того, какими почтовиками и устройствами пользуются ваши подписчики. Если используете CSS3 в вёрстке писем — тщательно тестируйте. Поддержка тех или иных стилей почтовиками и устройствами постоянно меняется, ориентируйтесь на инструкции в интернете.

Используйте текст предварительного заголовка. Почти все веб-интерфейсы выводят рядом с темой письма прехедер. Примерная структура:

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