Статьи

Как кодировать HTML рассылку по электронной почте

Январь 14, 2019

Как кодировать HTML-рассылки

Эта статья была впервые опубликована в 2006 году, а затем обновлена ​​в 2015 году

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

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

Основы HTML электронной почты

Самая большая проблема при кодировании электронной почты в формате HTML заключается в том, что для чтения электронной почты доступно очень много различных программных инструментов, от настольных приложений, таких как Eudora, Outlook, AOL, Thunderbird и Lotus Notes, до веб-служб электронной почты, таких как Yahoo !, Hotmail, и Google Mail, для отправки приложений по электронной почте на телефоны и планшеты. Программное обеспечение, используемое для визуализации HTML для каждого программного инструмента электронной почты, определяет, какой код HTML и CSS работает и не работает.

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

Независимо от того, решите ли вы кодировать свою электронную почту в формате HTML (мои личные предпочтения) или использовать существующий шаблон, при создании электронной почты в формате HTML следует учитывать две основные концепции:

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

Самый быстрый и простой способ увидеть, как таблицы HTML и встроенный CSS взаимодействуют в электронной почте HTML, — это загрузить некоторые шаблоны из Campaign Monitor и MailChimp . Когда вы откроете один из этих шаблонов, вы заметите несколько вещей, которые мы обсудим более подробно позже:

  • Объявления стиля CSS появляются под тегом body , а не между тегами head .
  • Сокращения CSS не используются: вместо использования сокращенного font: 12px/16px Arial, Helvetica правила стиля font: 12px/16px Arial, Helvetica , вы должны вместо этого разбить это сокращение на его отдельные свойства: font-family , font-size и line-height .
  • span s и div s используются экономно для достижения определенных эффектов, в то время как HTML-таблицы выполняют основную часть работы с макетом.
  • Объявления стилей CSS являются очень простыми и не используют никакие файлы CSS.

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

Шаг 1. Использование таблиц HTML для макета

Это верно: столы вернулись, большое время! Веб-стандарты, возможно, стали нормой для кодирования страниц для отображения в веб-браузерах, но это не Интернет, детка. Несколько клиентов программного обеспечения для электронной почты отстают на восемь лет в плане поддержки CSS, что означает, что мы должны прибегнуть к использованию таблиц для разметки, если мы действительно хотим, чтобы наши информационные бюллетени отображались последовательно для каждого читателя (см. Список для чтения в конце эта статья о некоторых превосходных ресурсах по поддержке CSS в почтовых клиентах).

Поэтому отложите ваши лучшие практики и навыки бережливой разметки в сторону: мы собираемся испачкать руки!

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

Макет с одним столбцом обычно состоит из:

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

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

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

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

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

Это подход, который я использую для создания электронных писем в формате HTML:

  • Для двухколоночного макета создайте по одной таблице для заголовка, двух столбцов с центральным содержимым и нижнего колонтитула — всего три таблицы. Оберните эти таблицы в другой контейнерный стол. Используйте тот же подход для макетов с одним столбцом, но присвойте таблице содержимого один столбец. Этот подход особенно подходит, если дизайн вашей электронной почты содержит изображения, разбитые на несколько ячеек таблицы. В противном случае одна таблица со строками td для ее заголовка (с colspan="2" если в проекте используются два столбца), содержимое и нижний колонтитул должны нормально отображаться во всех программах, кроме Lotus Notes.
  • Используйте атрибуты в таблице и теги td для управления отображением таблицы. Например, установка border="0" , valign="top" , align="left" (или center , если это соответствует дизайну), cellpadding="0" , cellspacing="0" и т. Д. Это в первую очередь помогает старым почтовым клиентам отображать почту (едва ли) приемлемым способом.
  • Даже если дизайн вашей электронной почты не включает рамку вокруг таблицы, вам может оказаться полезным в ходе разработки установить border="1" чтобы помочь с отладкой любых проблем, возникающих при внутреннем выравнивании тегов tr и td , Измените его обратно на border="0" для тестирования и производства.

Хотя этот подход может обидеть пуристов, которые предпочитают кодировать с использованием самых последних стандартов, на данный момент это единственный жизнеспособный подход. Но тот факт, что мы используем таблицы для разметки, не означает, что нам нужно полностью прибегать к методам старой школы. Например, независимо от того, насколько плохо Lotus Notes отображает электронную почту в формате HTML, вам никогда не придется прибегать к использованию тега font . И хотя механизм рендеринга HTML в Outlook 2007 не идеален, он отображает базовые HTML-таблицы просто отлично.

Есть некоторые предостережения, хотя; давайте посмотрим на стиль нашего текста дальше.

Шаг 2. Добавление стилей CSS

Я говорил, что поддержка CSS была плохой в почтовых клиентах? Ну, это так. Но вы можете (и должны) по-прежнему использовать CSS для стилей в вашей электронной почте, как только ваш вложенный макет таблицы на месте. Есть только несколько вещей, которые нужно остерегаться. Вот шаги, которые я использую.

Во-первых, используйте встроенные стили для хранения всей информации о вашем стиле, как показано здесь: 

 <p style="color: red;"></p>

Это включает в себя table , td , p , a и так далее.

Не используйте объявление style CSS в теге HTML-заголовка, как при создании веб-страниц. Вместо этого разместите объявление style прямо под тегом body — однако Google Mail ищет любое объявление style в сообщении и (услужливо) удаляет его. Кроме того, не беспокойтесь об использовании элемента link для ссылки на внешнюю таблицу стилей: Google Mail, Hotmail и другие почтовые программы будут игнорировать, изменять или удалять эти внешние ссылки на таблицу стилей.

Для вашей таблицы контейнеров — той, в которой размещены таблицы заголовка, содержимого и нижнего колонтитула, — установите ширину таблицы равной 98%. Оказывается, Yahoo! Почта нуждается в этой 1% -ой подушке с обеих сторон, чтобы правильно отобразить электронную почту. Если боковые желоба имеют решающее значение для дизайна вашей электронной почты, установите ширину 95% или даже 90%, чтобы избежать потенциальных проблем. Конечно, таблицы внутри таблицы контейнеров должны быть установлены на 100%.

Поместите общую информацию о стиле шрифта в таблицу, наиболее близкую к содержанию. Да, это может привести к повторным объявлениям стиля в нескольких ячейках td . Поместите определения стиля шрифта в заголовок (например, h1 , h2 ), p или теги только при необходимости.

Используйте div s экономно, чтобы перемещать небольшие блоки контента и ссылки справа или слева внутри ячейки td таблицы. Google Mail, со своей стороны, похоже, игнорирует объявление с плавающей точкой CSS (однако Yahoo! и Hotmail справляются с ним просто отлично). Иногда лучше кодировать более сложный макет таблицы, чем полагаться на объявление с плавающей точкой. Или, поскольку слишком легко загромождать электронную почту, попросите вашего дизайнера поместить вместо этого всплывающее содержимое в узкую боковую колонку. Слабая поддержка float — одна из проблем, которая может привести к переработке дизайна электронной почты.

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

Обратите внимание, что некоторые службы доставки электронной почты распаковывают определения стилей, чтобы сделать их более явными и, следовательно, более удобочитаемыми для всех почтовых программ. Например, CSS сокращенная запись style="margin: 10px 5px 10px 0;" может быть расширен в объявлении длинного стиля, показанном ранее. Протестируйте каждое письмо и посмотрите, что происходит с кодом электронной почты. Начните с сокращения CSS, потому что, в худшем случае, оно хорошо работает со всеми почтовыми программами.

Если вы скачали и изучили шаблоны электронной почты из Campaign Monitor и MailChimp, вы увидите, что они обрабатывают таблицу контейнеров так, как если бы это был тег html body . Команда Campaign Monitor именует эту таблицу как «BodyImposter», которая является отличным способом подумать о таблице фреймов или оберток. С точки зрения CSS, таблица-контейнер выполняет то, что делал бы элемент html body , если бы такие службы, как Google Mail, не отключали или не игнорировали тег body .

Шаг 3: Принятие лучших практик

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

Следующим шагом является проверка вашей электронной почты в формате HTML в различных почтовых клиентах. Часто это выявляет проблемы, которые требуют обходных путей.

Первые инструменты для тестирования — это браузеры Firefox и Internet Explorer. Если электронная почта отображается хорошо или отлично в обоих браузерах, есть хороший шанс, что проверка электронной почты в Outlook, Yahoo !, Google Mail и других службах покажет только незначительные проблемы. Если возможно, я бы также порекомендовал протестировать вашу электронную почту в Internet Explorer 6 — это должно дать вам хорошее представление о том, как ваша электронная почта будет отображаться в Outlook 2003 (информацию о работе в Интернете см. В списке ресурсов в конце этой статьи). Исследователь 6). Наконец, чтобы проверить, как электронная почта будет выглядеть на iPhone или iPad, проверьте свою электронную почту HTML в веб-браузере Safari.

После того, как электронная почта появится в этих двух веб-браузерах, используйте службу доставки электронной почты, чтобы отправить электронную почту на ряд тестовых учетных записей электронной почты. В идеале это должно включать учетные записи в службах Yahoo !, Hotmail и Google Mail.
Разумеется, используемые вами тестовые учетные записи должны определяться по доменным именам в списке рассылки людей, которые будут получать электронную почту. Например, если в этом списке нет подписчиков AOL, вероятно, это пустая трата времени и денег, чтобы настроить и протестировать учетную запись электронной почты AOL.

Вот наиболее распространенные изменения кода, которые я нашел необходимыми на этом этапе тестирования:

  • Иногда требуется переключение с ширины в процентах на фиксированную ширину. Хотя это и не идеально — поскольку читатели могут изменять размер окон электронной почты во время чтения, а иногда изменяют размер, иногда использование фиксированной ширины является единственным способом правильного отображения макета в нескольких почтовых клиентах.
  • Если между столбцами в дизайне электронной почты есть cellpadding , сначала cellspacing атрибуты cellpadding и cellspacing таблиц HTML. Если это не сработает, примените атрибуты CSS margin и padding . Интервал HTML лучше работает с более старой программой электронной почты.
  • Смещение изображения может возникнуть, когда ячейка td закрывается прямо под тегом img . Это древняя проблема HTML. Помещение </td> сразу после (на той же строке, что и) тег img устраняет раздражающий и загадочный пробел в 1 пиксель.

Кроме того, рекомендуются следующие передовые практики:

  • Избегайте использования JavaScript. Большинство почтовых программ в любом случае отключат его.
  • Если изображение разделено на несколько ячеек таблицы HTML, протестируйте электронную почту, используя множество тестовых аккаунтов. Иногда это может выглядеть прекрасно в Outlook, но может быть смещено на один или несколько пикселей в Hotmail и других службах. Также подумайте о том, чтобы сделать изображение фоновым изображением в новой HTML-таблице, которая охватывает все строки и столбцы таблицы, которые будут отображать части вашего фонового изображения; это часто дает тот же эффект, что и разрезание изображения, но использует меньше кода и может обеспечить лучшие результаты (см. ниже). Обратите внимание, что Outlook 2007 не отображает фоновые изображения; не забудьте проверить свой код электронной почты с целевым программным обеспечением электронной почты.
  • Для фоновых изображений используйте атрибут background таблицы вместо CSS. Это работает более последовательно в программном обеспечении электронной почты, чем другие потенциальные решения.
  • Храните изображения электронной почты на веб-сервере — предпочтительно в папке, которая отделена от изображений вашего веб-сайта (например, в папке /images/email ), и не удаляйте их. Некоторые люди открывают электронные письма недели или месяцы спустя, так же, как люди используют закладки для возврата на веб-сайты.
  • Убедитесь, что все ваши изображения используют атрибуты alt , height и width . Установка значений для этих атрибутов улучшает результаты в Google Mail, а также поддерживает макет, когда у читателя отключены изображения. Однако обратите внимание, что Outlook 2007 не распознает атрибут alt .
  • Используйте атрибут target="_blank" для тегов a, чтобы люди, читающие с помощью служб веб-почты, не имели запрашиваемой страницы, появлялись в их интерфейсе веб-почты.
  • Хотя для создания точного макета электронной почты можно использовать изображение размером 1 × 1 пиксель, спамеры часто используют изображения размером 1 × 1 пиксель, чтобы определить, была ли открыта их электронная почта. Использование этой практики увеличит вероятность того, что ваше письмо классифицируется как спам.
  • Точно так же избегайте использования большого изображения «выше сгиба» в электронном письме. Это еще одна классическая практика рассылки спама, которая может привести к тому, что ваше письмо будет интерпретировано как спам.

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

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

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

  • Правильно ли отображается адрес отправителя (как имя, а не пустой адрес электронной почты)?
  • Правильная ли тема?
  • Является ли контактная информация правильной и визуально очевидной?
  • В верхней части письма отображается текст: «Вы получили это письмо, потому что… инструкции по отмене подписки находятся внизу этого письма»?
  • Содержит ли ваша электронная почта текст с просьбой к читателям добавить ваш адрес От в свою адресную книгу?
  • Содержит ли верхняя часть вашей электронной почты ссылку на веб-версию сообщения?

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

Шаг 4. Код для Google Mail, Lotus Notes и Outlook 2007

Google Mail, Lotus Notes и Outlook 2007 представляют свои собственные уникальные проблемы кодирования. В Outlook 2007, хотите верьте, хотите нет, поддержка CSS значительно меньше, чем в предыдущих версиях Outlook!

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

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

Прежде всего, Google Mail удаляет стили CSS, содержащиеся между любыми тегами стилей, независимо от того, где они появляются в электронном письме. А шрифты, отображаемые в таблицах HTML — единственная альтернатива использованию стилей — имеют странную привычку выглядеть больше, чем предполагалось, независимо от того, как структурирована электронная почта HTML.

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

  • Определите цвет фона в ячейке td с помощью атрибута bgcolor , а не стиля CSS.
  • Как отмечено выше, используйте атрибут background в ячейке td для фоновых изображений вместо использования CSS. Одним из побочных эффектов этого подхода является то, что фоновое изображение может быть получено настолько длинным, насколько это необходимо — если содержимое, используемое в шаблоне электронной почты, вероятно, будет различаться по размеру, использование слишком высокого фонового изображения таким образом позволяет высоту электронная почта сокращается или расширяется, в зависимости от высоты копии, от одного электронного письма к другому. Помните, однако, что Outlook 2007 полностью игнорирует фоновые изображения.
  • Если это работает лучше, используйте объявление заполнения для контроля полей в ячейке td. Стиль margin не работает в этих ячейках, но padding работают.
  • Если вам нужна граница вокруг ячейки td , имейте в виду, что Google Mail отображает рамку вокруг ячейки td когда она определена в div , а не когда она определена как стиль границы в теге td .
  • Если вам нужна светлая ссылка на темном фоне, поместите определение шрифта в ячейку td (чтобы оно одинаково применимо к p и тегам), затем добавьте color: style в тег a.
  • Если шрифты p и шрифты имеют разные размеры, поместите тег в тег p .
  • Google Mail активно использует правую колонку пользовательского интерфейса Google Mail, которая втискивает электронную почту HTML в центральную панель. Убедитесь, что стиль заполнения в содержимом tds установлен на 10 пикселей по всему периметру, чтобы текст не ударялся о левый и правый края.
  • При тестировании электронной почты в формате HTML с учетной записью Google Mail, скорее всего, вы обнаружите, что в тегах td , h1 , h2 , p , a и других отсутствуют один или несколько стилей шрифтов. Внимательно проверьте каждый шрифт, чтобы убедиться, что Google Mail отображает шрифты правильно.

Помимо Google Mail, существует еще одна, менее очевидная опасность, с которой сталкивается программист при создании электронной почты в формате HTML: Lotus Notes. Многие крупные корпорации продолжают поддерживать и обновлять свои установки Notes.

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

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

Вот несколько советов, которые помогут вам убедить Notes правильно отобразить вашу электронную почту в формате HTML:

  • Как мы уже обсуждали ранее, используйте таблицу контейнеров, которая содержит все внутренние таблицы макетов (например, для заголовка, содержимого и нижнего колонтитула). Это позволяет хранить электронную почту вместе в одном фрагменте HTML, поэтому элементы макета с меньшей вероятностью будут отклоняться при отображении в Notes.
  • Создайте желоб вокруг стола контейнера, установив ширину в процентах и ​​/ или используя ячейку по крайней мере 5.
  • Как я упоминал ранее, избегайте использования декларации style заголовке вашей электронной почты. Это может быть подход, который придерживается веб-стандартов, но Notes (например, Google Mail) может удалить ваши стили. Вместо этого полагайтесь на встроенные стили в table , td , h1 , h2 , p , a и другие теги.
  • Используйте абсолютные URL-адреса для изображений, хранящихся на веб-сервере. Вы не можете ничего сделать с конвертированием изображений в Notes, но использование удаленных изображений может помочь.
  • Ссылки внутри электронной почты, использующие именованные якоря, редко (если вообще когда-либо) работают в Notes. Лучше всего избегать ссылок, которые переходят по электронной почте на определенный фрагмент контента.
  • Избегайте использования colspan в ваших таблицах HTML. Примечания — особенно его более ранние версии — могут иметь дело только с основными макетами таблиц.
  • Будьте уверены, что ваши ширины ячеек ТД являются точными. В отличие от веб-браузеров, которые автоматически устанавливают ширину всех ячеек, Notes определяет размер каждой ячейки td в соответствии с определенной шириной.
  • Центрирование макета электронной почты обычно не работает в Notes. Макеты электронной почты обычно должны быть выровнены по левому краю.

Использование этих методов для достижения успешного рендеринга в Google Mail и Lotus Notes гарантирует, что ваши электронные письма также будут хорошо отображаться в Outlook 2007, который использует более старый механизм рендеринга HTML. Microsoft опубликовала подробности о том, что их программное обеспечение электронной почты будет и не будет отображаться должным образом; более подробную информацию можно найти в разделе «Ресурсы» в конце этой статьи).

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

Шаг 5: Кодирование для телефонов и планшетов

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

Решение состоит в том, чтобы использовать определение CSS @media для нацеливания на ячейки TD таблицы HTML и увеличить размеры шрифта, необходимые для хорошего отображения. Например, для разборчивости шрифтов на iPhone должно быть 13 пикселей. Лучшая часть? Программное обеспечение для работы с электронной почтой и веб-почтой либо удалит, либо проигнорирует ваши определения @media, в то время как ваш телефон и планшет прочитают код и отобразят все идеально.

Вот пример набора определений @media для отображения HTML-таблицы с одной колонкой для телефонов и планшетов: 

 @media only screen and (max-width: 480px) { /* mobile-specific CSS styles go here */ table[class=email], table[class=email-content] { clear: both; width: 320px !important; font-size: 13px !important; } }

Поместите этот код @media прямо под body tag class="email" для определения table а class="email-content" для ваших TD-ячеек. Когда ваша электронная почта в формате HTML просматривается на устройстве (или веб-браузере с измененным размером по горизонтали) менее 480 пикселей, эти определения активируются.

Секрет кодирования электронной почты с двумя столбцами для адаптации к экранам небольших телефонов и планшетов? Поместите каждый столбец в свою таблицу. Затем для каждой таблицы HTML используйте встроенный CSS для float: left и HTML align="left" для плавания и выравнивания каждой таблицы столбцов содержимого по левому краю. Затем добавьте class="email" в определение table и class="email-content" в ячейки TD.

С приведенным выше кодом @media для экранов шириной менее 480 пикселей будут установлены таблицы столбцов, левый и правый столбцы, равные ширине левого столбца содержимого и слайды под основным столбцом.

Этот подход может использоваться для нацеливания любых изменений дизайна макета для работы с телефонами и / или планшетами.

Это решение взято из отличного руководства от Campaign Monitor, Responsive Email Design , в котором есть еще больше деталей и идей о том, как сделать электронную почту HTML реагирующей на экран разных размеров.

Резюме

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

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

Дальнейшее чтение

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

И вот еще немного …

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

Бесплатный монитор кампании и шаблоны электронной почты MailChimp HTML
Обе эти службы доставки электронной почты активно тестируют свои шаблоны с различными почтовыми клиентами. Однако в подходе, который использует каждый из них, есть тонкие различия — Campaign Monitor помещает объявление style в тег head , а MailChimp — нет. Обязательно протестируйте окончательный HTML-код с теми почтовыми клиентами, которые используются получателями вашего списка рассылки.

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

Тестирование электронной почты в формате HTML
В этой статье рассматриваются процедуры тестирования для нескольких почтовых клиентов. Другие связанные статьи включают создание макетов электронной почты в формате HTML и понимание многомерного тестирования .

Статьи о заблокированных изображениях электронной почты от Campaign Monitor
Начиная с 2004 года в статье ClickZ показано, как сравнивается основное почтовое программное обеспечение, когда изображения блокируются или когда содержимое просматривается на панели предварительного просмотра. В статье «Монитор кампании» более подробно рассматриваются реальные примеры и идеи о том, как бороться с рендерингом ваших писем по умолчанию, а также о том, как правильно настроить электронную почту на панелях предварительного просмотра.

Возможность визуализации HTML и CSS в Word 2007 в Outlook 2007
Официальное описание Microsoft того, что Outlook 2007 будет и не будет отображаться для HTML и CSS. Включает ссылку на валидатор, который работает в Dreamweaver, а также инструменты редактирования Microsoft.

MailChimp Email HTML Кодирование / Руководство по доставке
Много полезной информации обо всех аспектах электронной почты в формате HTML, в том числе о том, как работают спам-фильтры.

Серия «Секреты электронной почты в формате HTML»
Часть этой информации устарела, но в Lotus Notes предлагается хороший материал.

CSS и электронная почта, поцелуи в дереве
Этот превосходный CSS-подход к электронной почте был опубликован A List Apart. ПРИМЕЧАНИЕ. Автор написал обновление этой статьи, опубликованное в блоге Campaign Monitor, « Оптимизация представления CSS в электронных письмах HTML» .

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

54
Share: