Подтвердить что ты не робот

Styling html в электронной почте

Я отправляю электронные письма с HTML-версией для опытных клиентов (разве это не так сейчас?). Мое беспокойство заключается в том, как его стилизовать. Я использую встроенный css? Можно ли включить таблицу стилей в html? Начат ли html с <html> или <body>? Есть ли стандарт, который я могу прочитать на этом?

Как далеко я могу пойти в стиле? У меня есть граничный радиус, фоновые градиенты и т.д., Которые имеют естественные механизмы восстановления для браузеров, которые его не поддерживают (IE). Для IE я использую PIE.htc, я предполагаю, что слишком далеко...

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

http://www.campaignmonitor.com/css/

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

Наконец, я стараюсь всегда переносить мои письма в формате HTML в тег <html>, поскольку, похоже, сообщение становится более "допустимым" для многих фильтров электронной почты.

Ответ 3

Чтобы процитировать что-то, что я недавно прочитал в журнале, это код 1996 года.

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

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

см. также: http://www.netmag.co.uk/zine/discover-culture/create-the-perfect-newsletter

Heeeeeelllooooo 1996!!

Ответ 4

Я отправляю электронные письма с помощью HTML версия для опытных клиентов (не что практически все в настоящее время?).

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

Я работал с несколькими компаниями, которые были технически прогрессивными, пока не пришли к богатой электронной почте, которая каким-то образом удержалась в доисторические времена (мне нравится комментарий "code like it 1996" в этой теме). Вы потенциально можете бороться с устаревшими установками Lotus, Outlook Web Access 2003, работающими в режиме "вниз" или прокси-серверами, которые будут обрабатывать содержимое HTML до получения.

Сложнее иметь дело с тем, что современные почтовые клиенты, такие как Gmail и Outlook 2007/2010, являются "умными" и не загружают изображения, если это явно не разрешено.

Чтобы ответить на ваш оригинальный вопрос, не полагайтесь ни на что, даже близкое к передовому (например, CSS 3) или сложное (глубоко вложенные макеты, отрицательные поля и т.д.). Если вы решите бросить кубики на изображения, вы можете разместить больше на своем изображении и меньше в своем HTML-коде, что позволит вам стать более креативными с вашими проектами.

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

Ответ 5

Я мог бы, вероятно, поговорить о do и don'ts email, но если вы рассмотрите только пару основных принципов, вы узнаете больше, чем большинство.

gmail (и MS Outlook) являются двумя наиболее сложными почтовыми клиентами для кодирования, но можно разработать responsive с высоким уровнем дизайна, который будет хорошо отображаться среди клиентов. В Gmail он просто отобразит макет рабочего стола без отклика.

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

Забыть css и html, как вы обычно используете. Вы должны попытаться ограничить свои теги xhtml1.0 только действительные теги. Фактически вы можете сделать много макетов с ограниченной палитрой тегов, вам просто нужно подумать о более круглых способах этого.

Для очень простого примера:

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

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#00cc66" width="200">
    <tr>
        <td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
    </tr>
    <tr>
        <td align="center"><font color="#ffffff"><b>Click Here</b></font></td>
    </tr>
    <tr>
        <td><table border="0" cellpadding="6" cellspacing="0"><tr><td></td></tr></table></td>
    </tr>
</table>

CTA Button

Шаг 1

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

В этот момент ваш алфавит должен состоять только из

html, body, table, tbody, tr, td, span, a, b, nobr, src, alt, target, cellpadding, cellspacing, border, align, bgcolor, цвет, высота и буквенно-цифровое содержимое в этих тегах.

У вас может возникнуть соблазн использовать valign, style, background, class,...... НЕ.. еще не

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

Шаг 2

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

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

Шаг 3

После этого вы можете добавить пару [тег: медиа-запросы]. У меня есть медиа-запросы для 600 и 400, и я удваиваю их, чтобы достичь более высокой совместимости. Используя CSS в голове, вы можете установить перезапись любого из ваших макетов в HTML с важными тегами. Таким образом, те клиенты, которые его читают, будут игнорировать встроенный стиль, который вы использовали, и придерживаетесь нового стиля вашего добавления. Это отлично подходит для настройки ширины элементов, скрытия или отображения элементов и т.д.

.mobile {display:none;}
    @media screen and (max-device-width: 600px), screen and (max-width: 600px) {
        *[class="desktop"]{display:none !important;}
        *[class="mobile"]{display:block !important;width:auto !important;max-height:none !important;overflow:visible !important;float:none !important;}

С этими 4 строками вы можете сделать почти все свое отзывчивое структурирование.

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

<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
    <tr style="mso-display:none;">
        <td align="center" class="mobile" style="width:0;max-height:0;overflow:hidden;float:left;mso-display:none;">
            <a href="" target="_blank">
                <img class="banner" alt="o" src="logo-wide.gif" border="0" width="0">
            </a>
        </td>
    </tr>
</table>

Это, наверное, самый важный CSS в моем коде. Таблица примеров не будет отображаться на любых настольных устройствах (включая Gmail), но будет отображаться на мобильных устройствах. Единственным клиентом, с которым он не работает, является Windows Mobile 7.

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

Шаг 4

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

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

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

Стоит отметить, что когда я работал для запуска, мне приходилось кодировать несколько писем в неделю, и мы решили сделать это самым сложным способом: безумная совместимость с клиентами и использование как можно большего количества изображений. Никакого текста в изображениях, скорее мне пришлось сплайсировать текст, и сделать такие вещи, как фоновые изображения за текстом, хорошо работают на клиентах. Фон за текстом в электронной почте невероятно сложно сделать работу хорошо для некоторых почтовых клиентов. Возможно, но разочарование как дерьмо. Когда я перешел с этой работы и начал работать на крупные бренды, на короткий промежуток времени мне пришлось закодировать еще несколько писем (я больше не копирую электронные письма).. но для этих крупных брендов.. они не " Я хочу, чтобы я тратил много времени на электронные письма. Они предпочли просто сделать это одним большим изображением, текстом и всем.. Легко peezy. На этой заметке, когда я работал при запуске, мы выполнили тест один раз, сравнивая скорость кликов на высокополированных закодированных электронных письмах и текстовых сообщениях электронной почты против всех графических писем. В лучшем случае различия были незначительными.

Ответ 6

Использовать ли встроенный css?

Да,

  • в элементах A и FONT для цвета, font-size//face/font-family равны для парсера электронной почты
  • в IMG-элементах для отображения: block;//gmail использует display: inline; поэтому вам нужно переопределить его
  • в первой таблице для фонового изображения; фон-повторить;//для отображения bg-изображений в Outlook 2007/10.

Можно ли включить таблицу стилей в html?

Да, теги HEAD и BODY необходимы, потому что большинство веб-mailer анализируют только содержимое BODY

Работает ли html с <html> или <body>?

Html начинается с декларации DOCTYPE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Это мой любимый, потому что вы можете использовать элемент FONT. (полезно для создания стабильных цветов ссылок в элементе A)

http://www.w3schools.com/html/html_doctype.asp

http://www.w3schools.com/tags/tag_doctype.asp