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

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

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

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

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

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

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

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

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

   тело { ширина: 100% !важно; -webkit-text-size-adjust:100%; -ms-настройка размера текста: 100%; маржа: 0; заполнение: 0; } a: ссылка {цвет: #1d3666; украшение текста: подчеркивание; } a: посетили {цвет: #1d3666; украшение текста: подчеркивание; } a: hover {цвет: #a43232; украшение текста: нет; } таблица { граница коллапса: коллапс; mso-таблица-lspace: 0pt; mso-таблица-rspace: 0pt; } таблица td { граница коллапса: коллапс; } изображение { схема: нет; текстовое оформление: нет; -ms-режим-интерполяции: бикубический; } изображение { граница: нет; дисплей:блок; }

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

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

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

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