Таблицы электронной почты в формате HTML и другие факторы в кодировании электронной почты (обновлено)

1. Таблицы в электронных письмах HMTL: вложенность, заполнение и ширина, Oh My
2. Зачем использовать таблицы электронной почты HTML?
3. Table Math, Meet Box-Model Math
4. Создание эффективного HTML-шаблона электронной почты
5. 1. Рассмотрим почтовые клиенты
6. 2. Вложите свои таблицы
7. 3. Ваши прокладки и ширина имеют важное значение
8. Клиенты протестированы
9. Заворачивать

Статья впервые опубликована в июле 2007 г., обновлена ​​в апреле 2019 г.

Я хотел бы предвосхитить эту статью, заявив, что я использую основанную на стандартах разметку для создания своих электронных писем в формате HTML и своих веб-сайтов. Тем не менее, те из вас, кто знаком с другими статьями, размещенными здесь в Campaign Monitor о электронных письмах в формате HTML, будут знать, что основанная на стандартах разметка приводит к форматированию, во многом аналогичному формату RTF во многих популярных почтовых клиентах. Я доволен этим, как и мои клиенты, когда они узнают о том, как веб-стандарты обеспечивают доступность и совместимость контента между клиентами / платформами / устройствами и помогают электронной почте достигать законных подписчиков без искоренения спам-фильтрами.

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

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

Таблицы в электронных письмах HMTL: вложенность, заполнение и ширина, Oh My

Одним из наиболее важных аспектов вашей почтовой кампании является призыв к действию (CTA). Когда ваш читатель откроет письмо и закончит его читать, вы захотите получить от него ответ. Есть много советов и хитростей оптимизировать свой CTA для того, чтобы получить желаемый ответ от ваших читателей. Одним из них является обеспечение того, что ваша электронная почта отображается так, как вы хотели бы на разных устройствах.

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

Зачем использовать таблицы электронной почты HTML?

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

Table Math, Meet Box-Model Math

Когда в блендер помещают ширину таблицы, ширину td, td padding и CSS padding, результаты получаются довольно хаотичными и противоречивыми. Взять, к примеру, следующую таблицу:

Как и предполагалось, полученная ширина этой таблицы составляет 400 пикселей, а ширина столбцов составляет 100 и 300 пикселей:

<table cellspacing = "0" cellpadding = "0" border = "0" width = "400">
<TR>
<td width = "100"> </ td>
<td width = "300"> </ td>
</ TR>
</ Table>

Как и предполагалось, полученная ширина этой таблицы составляет 400 пикселей, а ширина столбцов составляет 100 и 300 пикселей:

Но при добавлении некоторого отступа - либо через CSS, либо через HTML - ширина столбцов снижается:

Однако, когда ширина таблицы прощается, результаты мало чем отличаются от блочной модели CSS. Если к исходному примеру добавлен отступ, а ширина таблицы удалена, код выглядит следующим образом:

<table cellspacing = "0" cellpadding = "10" border = "0">
<TR>
<td width = "80"> </ td>
<td width = "280"> </ td>
</ TR>
</ Table>

И, как и предполагалось, результирующие ширины являются правильными как для таблицы, так и для столбцов:

Но обратите внимание, как ширина td была уменьшена для размещения нового отступа. Это похоже на блочную модель CSS, в которой ширина 100 пикселей + отступ 10 пикселей = всего 120 пикселей.

Создание эффективного HTML-шаблона электронной почты

Источник: emailframe.work

Создание электронной почты в формате HTML является сложной задачей для многих разработчиков. Выбор для готовый html почтовый шаблон Такие, как те, что доступны в Campaign Monitor, могут сэкономить много времени, но для разработчиков, которые хотели бы бросить себе вызов, есть несколько важных факторов, которые им необходимо учитывать перед созданием собственного шаблона.

1. Рассмотрим почтовые клиенты

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

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

Источник: Монитор кампании

2. Вложите свои таблицы

Вложенность может быть определена как размещение области таблицы внутри другой области таблицы, и в результате теги таблицы могут стать немного сложными. Это идеально подходит для более сложного кодирования таблиц, так как поможет вам получить желаемую разметку. При вложении не забудьте сначала закрыть таблицы с помощью типичных </ tr> и </ table>, прежде чем начинать закрывать ячейки внутри.

Если таблица вложена в другую, применяются указанные выше правила, за исключением пары существенных отклонений:

• Yahoo Mail (новая версия), Gmail, Outlook 2007 и Eudora применяют дополнительную ширину для учета границ. Однако, только когда они вложены, родительская таблица ведет себя соответствующим образом.
• Применение ширины к тэгам td, которые также имеют отступы CSS или HTML, создает путаницу по всем направлениям. Почти каждый клиент отображает ширину по-своему.
• Даже без каких-либо границ существуют отклонения по ширине на 2–4 пикселя для вложенной таблицы шириной в два столбца. Мои тесты были неубедительными в отношении рифмы и причины этого неестественного явления.

3. Ваши прокладки и ширина имеют важное значение

Источник: MailChimp

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

Есть много способов достичь этого.

• С тегами <div> можно использовать поля: <div style = «margin: 5px;»>
• С тегами <td> можно использовать отступы: <td style = ”padding: 5px;”>

Вы всегда можете поиграться с кодировкой, чтобы увидеть, какой результат вы предпочитаете. Эмма подчеркивает, что использование атрибута padding в тегах <div> удалит их из Outlook 2007 и 2010.

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

Клиенты протестированы

Webmail

• Почта Яху
• Yahoo Mail Beta
• Windows Live Hotmail (старая версия)
• Windows Live Hotmail (новый)
• Gmail
• макинтош
• AOL

рабочий стол

• Apple Mail
• буревестник
• Outlook 2007
• Outlook 2003
• Outlook Express
• Eudora
• Lotus Notes

Могу ли я использовать div в письме в формате HTML?

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

Несмотря на то, что эти профессионалы заслуживают внимания, у маршрута divs есть свои проблемы:

• Сложность с контролем расстояния.
• Некоторые почтовые клиенты не смогут интерпретировать это
• Некоторые из ваших CSS не удастся

Заворачивать

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

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

Выбор для готовый html почтовый шаблон такие, которые доступны в Campaign Monitor, могут сэкономить много времени.