HTML-таблицы в электронной почте: что может пойти не так?

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

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

Почему мы используем таблицы

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

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

Хотя в последнее время ситуация изменилась, особенно после крупного обновления Gmail в прошлом году, некоторые почтовые клиенты по-прежнему не поддерживают много HTML и CSS. Самый примечательный: семейство почтовых клиентов Microsoft Outlook, которые используют Microsoft Word в качестве механизма рендеринга. Поскольку Outlook по-прежнему пользуется огромной популярностью (в настоящее время занимает пятое место в нашем трекере доли рынка почтовых клиентов), разработчикам электронной почты все равно приходится использовать в той или иной мере таблицы, если они хотят, чтобы их кампании правильно отображались для подписчиков.

И когда нам приходится полагаться на таблицы HTML, есть ряд вещей, которые могут пойти не так ...

Все усложняют

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

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

Когда вы вкладываете несколько таблиц в другую, вы, вероятно, столкнетесь с проблемами в своем коде. Очень легко случайно поместить таблицу не в то место или вставить важный HTML-тег при перемещении вещей. А для некоторых клиентов (глядя на вас, Lotus Notes) вы можете увидеть, что электронные письма плохо отображаются, когда вы слишком глубоко вкладываете таблицы. По этой причине мы рекомендуем создавать электронные письма с использованием модульного подхода, о чем писал наш друг Брайан Грейвс. И постарайтесь свести количество вложенных таблиц к минимуму. Вложенные таблицы почти неизбежны, но сохранение глубины вложенности максимум 4-6 таблиц поможет избежать каких-либо проблем.

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

У некоторых почтовых клиентов есть проблемы даже с базовой математикой. Известно, что некоторые версии Microsoft Outlook добавляют дополнительный интервал в столбцы таблицы, нарушая макет электронной почты. Хотя вы можете подумать, что использование четырех ячеек таблицы с шириной 25% имеет смысл, Outlook добавит дополнительное пространство в эти ячейки и сделает макет шире 100%. В полученном электронном письме некоторые из этих ячеек будут помещены в отдельную строку, разрушив вашу хорошо продуманную, идеально спланированную кампанию электронной почты.

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

Отсутствующие теги

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

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

 <table> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>

Вы можете видеть, что существует три разных тега: таблица, строка таблицы и ячейка таблицы. Эти теги открываются, а затем закрываются (обозначаются символом /).

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

Такие инструменты, как W3C Markup Validation Service, могут помочь определить недостающие теги. Отсутствующие теги и неправильно сформированная разметка также являются причиной, по которой мы рекомендуем использовать шаблоны электронной почты или инструменты, такие как Partials и Snippets Builder, для создания электронных писем. Они не только помогают гарантировать, что ваш код хорошо написан и правильно протестирован, но и имеют дополнительное преимущество в виде ускорения рабочего процесса, позволяя вам уложиться в сжатые сроки и сделать вашу команду счастливой.

Отсутствующие атрибуты

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

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

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

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

 <table cellpadding="0" cellspacing="0"> </table>

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

Узнайте, как устранять неполадки

Хотите узнать, как устранять неполадки в собственных почтовых кампаниях и избегать неприятных проблем для подписчиков? Присоединяйтесь к нам на Litmus Live, чтобы пройти полноценный семинар по устранению неполадок с электронной почтой, как профессионал. Мы рассмотрим наиболее распространенные ошибки электронной почты, их решения и лучшие методы устранения неполадок в кампаниях.

Получите билеты Litmus Live! Зарегистрируйтесь сегодня, чтобы отпраздновать электронную почту с нами! Зарегистрируйтесь сейчас →