Html — Верстка HTML — писем


Содержание

Верстка html-писем — советы

Дмитрий Арсеньев

Большинству тех, кто занимается email-маркетингом, в том числе и новичкам, так или иначе приходится вникать в кухню html-верстки.

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

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

Не все html-шаблоны, которое вы встретите на просторах интернета будут учитывать все особенности и универсально хорошо отображаться во всех почтовых ящиках и email-клиентах. Мы собрали для вас несколько рекомендаций для html-верстки писем, которые вам надо будет иметь в виду и, по необходимости, добавлять. Будьте готовы к экспериментам!

Но для начала, небольшое отступление.

На то, как будет видеть шаблон ваш подписчик, влияет в первую очередь устройство, с которого он его читает — это ПК или мобильное устройство. Если это ПК — то почтовый клиент (десктопное приложение) или веб-почта (вход в почту через веб-браузер). Если это смартфон или планшет, то и тут может быть родной почтовый клиент, другой почтовый клиент или отдельное приложение от любимого email-провайдера (например Gmail App или приложение Yandex.Mail).

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

Сегодня мы рассмотрим html-верстку писем для ПК. Он пока все-таки еще преобладает. Адаптивная верстка писем для мобильных устройств — отдельная тема, требует отдельного поста.

Начнем с главного.

Структура

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

Нечто похожее, кстати, было с браузерами лет 10 назад, когда они вели яростную войну за долю рынка и не желали сотрудничать друг с другом. Приходилось из кожи вон лезть, чтобы сайт одинаково хорошо выглядел и в Интерент-Эксплорере, и в Опере. Благодаря Web Standards Project и совместным усилиям программистов, удалось создать и внедрить универсальные стандарты. Будет ли у email-писем такая же судьба?

Не отходя от кассы — что такое табличная структура:

Блочная структура, популярная в web-верстке использует тэг div.

Размер шаблона

Ширина письма не должна превышать 680px. Иногда вполне уместно использовать и 700px, но не более. И тут дело не только в современной эстетике.

Уже доказано на многочисленных экспериментах, что для быстрого, поверхностного чтения (а именно так и читают/просматривают свою почту читатели), оптимальный размер горизонтальной строки — это около 65-75 символов. Если учесть пробелы, пунктуацию, отступы и стандартный шрифт в 14px, то это как раз 600-680 пикселей.

Поля и отступы

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

Одно из основных правил табличной верстки — это добавление свойств, которые обнуляют лишние отступы и рамки, добавляемые очень многими почтовыми клиентами и провайдерами web-почты (Gmail, Yandex, Outlook и т.д.).

Эти свойства (border, cellpadding, cellspacing, margin) должны вставляться под каждым тэгом table.

А потом добавить

В 2013, Outlook.com (бывший Hotmail) стал вырезать внешние отступы, или поля — margin — из кода емэйлов. Поэтому, для того чтобы горизонтальные отступы отображались корректно, необходимо прибегнуть к внутренним отступам — padding. С другой стороны, тот же Outlook, только уже почтовый клиент не поддерживает padding, когда он прописан inline (подробнее об этом ниже). Т. е. когда данное свойство прописано непосредственно под тэгом p . Поэтому, чтобы уравновесить отступы, можно прибегнуть к следующим трюкам.

Вариант 1: Отказаться как от padding, так и от margin

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

Вариант 2: Отказаться от тэга

В таком случае, вписывать текстовые блоки непосредственно под тэгом td, предварительно прописав в каждом тэге td ВСЕ свойства, от шрифта до отступов. А для разбивки абзацев использовать тэг br. Например:

В качестве дополнительного вертикального отступа, между блоками можно использовать пустые блоки/контейнеры с заданной высотой строки. Например:

Второй вариант будет означать очень много кода.

Фон и цвет

Обычно, html-шаблон предполагает белый фон для основного письма (текстовые блоки) и более темный, контрастный — для основного контейнера самого html-шаблона. Обычно это разновидности серого, но сегодня им никто не ограничивается. Например — это может быть бордовый, темно-коричневый, лазурный или даже черный.

Важно помнить — всегда необходимо использовать полный, шестизначный hex-код оттенка, например #2a7fb8 или #b6b6b6, и не укорачивать его. Например, правильно писать белый цвет как #ffffff, а не сокращенно как #fff. Иначе, многие почтовые клиенты его просто не распознают.

Также, сейчас в качестве фона можно использовать изображения или паттерн, т. е. повторяющийся мотив.

Ниже приведен пример кода для фонового паттерна.

Добавьте этот кусок после открывающего тэга body, до первого открывающего тэга table:

И этот кусок — до закрывающего тэга /body:

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

Текст, ссылки и CSS

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

Первое правило, которое стоить помнить при верстке писем — всегда использовать inline-css.

Inline-css — что это такое

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

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

Именно поэтому, все стили для текста применяются не только в заглавной ячейке, но и дублируются в тэге span, в каждой новой строчке p или в каждой новой ячейке td. Пример:

Важно помнить: цвет, шрифт и размер — font-family: Helvetica,Arial,sans-serif; font-size: 14px; color: #757575; line-height: 145%; — ВСЕГДА применять в инлайне (inline). Иначе почтовые клиенты будут добавлять к этим свойствам свои собственные значения.

Не стоит писать данные свойства шрифта в сокращенном виде, так как в некоторых почтовиках и email-клиентах, сокращенный вариант вполне сработает, а вот например в Outlook-е — уже нет. Правильно будет указывать каждое свойство отдельно, например:

  • font-family: Helvetica, Arial, sans-serif; font-style:italic, font-size:14px; color:#757575;

А так уже будет не правильно: font: Arial italic 14px #757575;

Высота строки — line-height — ее можно указывать как в пикселях, так и в процентах. Например line-height:145%; или line-height:24px; Когда высота указывается в пикселях, значение должно быть минимум на 8px больше, чем размер шрифта. Например, если размер шрифта 14px, высота строки — минимум 22px.

Стоить еще отметить что Outlook.com игнорирует высоту строки, если она вписана в тэг span . Поэтому позаботьтесь о том чтобы, она присутствовала в тэге td.

-webkit-text-size-adjust:none — данное свойство используется для решения проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. На этих устройствах, по умолчанию, минимальный размер шрифта 13px. Поэтому, если у вас где-то встречается шрифт меньше 13px, используйте это свойство.

Шрифты

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

Без засечек (sans serif):

  • font-family: Arial, Helvetica, sans-serif;
  • font-family: ‘Arial Black’, Helvetica, sans-serif;
  • font-family: ‘MS Sans Serif’, Geneva, sans-serif;
  • font-family: Tahoma, Geneva, sans-serif;
  • font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
  • font-family: Verdana, Geneva, sans-serif;


С засечками (serif):

  • font-family: Georgia, serif;
  • font-family: ‘Times New Roman’, Times, serif;

Названия шрифтов, состоящих из двух или более слов стоит брать в ординарные кавычки, например ‘Trebuchet MS’, обозначая таким образом единое значение/название. Иначе, некоторые почтовые программы или почтовики автоматически будут разбивать все значения через запятую и название шрифта будет выглядеть так — Trebuchet, MS, Helvetica, sans-serif; Это будет засчитано как ошибка и вместо ‘Trebuchet MS’ будет отображаться дефолтный Times New Roman.

Ссылки

Стиль ссылок также желательно дублировать тэгом span. Как минимум для цвета, шрифта и размера.

Если хотите, чтобы при нажатии на ссылку, страница открывалась в новом окне, добавляйте атрибут target=«_blank».

Если хотите, чтобы при наведении курсора на ссылку, появлялся текст-подсказка (text-hover), добавляйте атрибут title=«ваш текст».

Следует также учитывать, что почтовики и почтовые клиенты (не все, конечно) имеют привычку подчеркивать ярко синим все ссылки в тексте. Поэтому, если хотите чтобы текст НЕ подчеркивался (например в заголовке) — указывайте значение text-decoration:none;

А если подчеркивание ссылки не только уместно, но и нужно, например в ссылках, привязанных к определенным словам текстового блока, указывайте значение text-decoration:underline; В этом случае подчеркивание будет того цвета, который указан в тэге span. Например:

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

Для электронной почты:

Изображения

Блокирование изображений — частая проблема. Многие почтовики и email-клиенты блокируют изображения по умолчанию, лишая таким образом html-шаблон одного из самых главных своих преимуществ — картинок.

Подписчик может разрешить почтовику/клиенту отображать автоматически ваши картинки, а может и не разрешить, предпочитая, от раза к разу, загружать или не загружать изображения в ручном режиме. И в этом случае, открывая письмо, вместо изображений подписчик будет видеть пустое место. Разумеется, это пустое место можно как-то обозначить или дополнить по смыслу. Для этого существуют атрибуты alt, title и другие свойства.

Атрибут alt отображает текст, присвоенный изображению. Таким образом, если картинка заблокирована, подписчик сможет увидеть ее подпись. У этой подписи могут быть такие свойства, как шрифт, цвет шрифта, его размер, стиль.

Атрибут title отображает всплывающий текст-подсказку и может быть отличным от alt-текста.

У изображения также может быть собственный фон — background-color (такой-же как и общий фон шаблона или отличный от него), скругленные края — border-radius (к сожалению, нечитаемое некоторыми почтовиками и клиентами свойство — Yahoo, Outlook), а также просто рамки.

Насчет рамки — border — всегда стоит использовать полный, не сокращенный вариант этого стиля. Например, правильно будет указывать:

  • border-width:1px; border-style:solid; border-color:#999999;

А так будет не правильно: border: 1px solid #999;

display:block; — свойство изображения, позволяющее отображать его отдельным блоком, иначе, в некоторых клиентах оно может поплыть и уйти в другой ряд или угол. Также, это не позволяет email-клиенту Outlook добавлять к изображению нежелательные отступы.

Стоит также указывать line-height, когда высота изображения менее 19px. Это поможет избежать лишних зазоров между ячейками в Outlook 2013.

Также, всегда стоит указывать ширину и высоту изображения, в точных и реальных размерах, чтобы избежать некорректного изображения и позиционирования внутри самого шаблона. Например, если ваша изображение — размером 820х600px, не стоит его масштабировать и писать размеры как — 410х300px, так как Outlook будет отображать именно реальные размеры изображения, а не его уменьшенную версию. Такое изображение запросто сломает вам весь шаблон.

В итоге, код для изображения может выглядеть так:

Как видите, есть с чем повозиться.

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

HTML верстка e-mail писем, 4 особенности которые следует принять во внимание

Публикую перевод статьи “How to Code HTML Email Newsletters”, написанной Тимом Слэйвином (Tim Slavin) для сайта sitepoint.com.

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

В последнее время сверстать письмо в HTML формате стало легче – некоторые почтовые провайдеры, такие как Google Mail, улучшили поддержку CSS. Однако, в тоже время, Outlook 2007 сделал шаг назад на пути отображения HTML писем: в прошлом году Microsoft заменила движок рендеринга HTML, который использовался Outlook, на новый, уступающий предыдущему в плане поддержки CSS.

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

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

Это, по сути, вторая версия статьи, которая была написана и опубликована на sitepoint.com в 2004 году, и включает в себя новые материалы, которые помогут вам убедиться в том, что ваши электронные письма отвечают всем требованиям сегодняшних почтовых клиентов.

Основы html для e-mail

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

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

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

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

  1. Объявление CSS-стилей описано ниже тэга body.
  2. Не используется CSS-сокращения: вместо того, что бы использовать правило font: 12px/16px Arial, Helvetica, вы должны использовать сочетание правил: font-family, font-size, и line-height.
  3. Таблицы исполняют всю работу по представлению письма, а с помощью тэгов span и div можно добиться специфических эффектов.
  4. CSS-стили — базовые.
Цукерберг рекомендует:  #языки_программирования - Языки для написания игр под различные платформы.

Шаг 1: Используйте таблицы для представления

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

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

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

Одноколоночный формат типично состоит из:

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

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

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

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

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

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


  1. Для двухколоночного представления создайте три таблицы — одну для шапки, одну (двухколоночную) для контента (главной части) и одну для подвала. Поместите эти три таблицы в одну большую таблицу. Используйте такой же подход и для одноколоночного документа. Не нужно скупиться на таблицы, используйте для каждого элемента свою, так вы будете уверены, что ваше письмо будет отображаться хорошо почти во всех почтовых клиентах.
  2. Используйте атрибуты в тэгах таблицы (table) и ячеек (td), для контроля отображения. Например, border=»0″, valign=»top», align=»left», cellpadding=»0″ и так далее. Это поможет старым почтовым клиентам корректно отображать письмо.
  3. Даже если ваш дизайн не предусматривает границ вокруг таблиц, вы найдете очень полезным во время разработки установить значение border=»1″ для того, чтобы найти возможные ошибки. После того, как ошибки будут устранены, установите border=»0.»

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

Давайте посмотрим, как можно стилизировать текст в электронном письме.

Шаг 2: Добавляем стили CSS

Говорил ли я о том, что поддержка CSS стилей была очень слабой в почтовых клиентах? Да, это именно так. Тут есть несколько вещей, за которыми нужно следить. Вот методы, которыми я пользуюсь.

Во-первых, используйте inline-стили, как показано здесь:

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

Не используйте объявления стилей в теге как для веб-страниц. Вместо этого прописывайте стили ниже тега — Google Mail, в частности, сканирует документ и, если находит объявление стилей выше этого тэга, удаляет. Также не используйте элемент
для подгрузки внешних стилей: Google Mail, Hotmail и другие почтовые клиенты могут игнорировать их, удалять или модифицировать.

Для внешней таблицы, содержащей таблицы шапки, контента и подвала документа, устанавливайте ширину равную 98%. Это нужно для почтового клиента Yahoo! Mail. Вы даже можете ставить ширину таблицы 95%-90%, чтобы удостовериться, что все будет отображаться хорошо. И конечно же для таблиц в середине выставляйте значение ширины равное 100%.

Прописывайте основную информацию о стилях шрифта в теге ячейки

ближе к контенту. Это может привести к повторению стилей в других тегах . Прописывайте стили в тегах заголовков (h1, h2), p или a, когда это необходимо.

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

В то время как тэги div почти не пригодны для использования, span может использоваться почти всегда, так как является inline (строчным) элементом. В некоторых случаях span может использоваться не только для настройки цвета и размера шрифта, но и для позиционирования текста выше или ниже содержания.

Заметьте, что некоторые сервисы, которые доставляют электронные письма, могут модифицировать стили так, что, например, короткое правило style=»margin: 10px 5px 10px 0;» будет разбито на несколько меньших правил. Делается это для того, что бы письмо было понятно большинству почтовых клиентов. Тестируйте каждое письмо и смотрите, что происходит с кодом, избегайте частое использование коротких правил.

Если вы уже скачали и просмотрели некоторые шаблоны из Campaign Monitor и MailChimp, вы могли увидеть, что основная таблица описана так, как-будто это тэг body. Команда разработчиков из Campaign Monitor дает внешней таблице название “BodyImposter,” что дает представление о ней, как о главной таблице – каркасе, в середине которого размещаются все остальные элементы.

Шаг 3: Лучшие приемы e-mail верстки

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

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

Первыми инструментами для тестов служат браузеры Firefox и Internet Explorer. Если все отображается прекрасно в обоих браузерах, есть все надежды, что тестирование в Outlook, Yahoo!, Google Mail и других сервисах могут показать только незначительные ошибки. Я также рекомендую тестировать все ваши шаблоны писем в браузере Internet Explorer 6 – он сразу же покажет, как ваше письмо будет отображено в Outlook 2003.

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

Важные приемы на этом шаге:

  1. Иногда смена ширины таблицы с процентов на фиксированную ширину очень важна. Пользователи могут менять размер окна при просмотре, фиксированная ширина таблицы – единственный способ добиться правильного отображения.
  2. Если наблюдаются проблемы с пространством в колонках, нужно в первую очередь настроить значения атрибутов cellpadding и cellspacing для таблицы. Если это не приводит к желаемому результату, примените CSS-атрибуты margin и padding.
  3. Неправильное перемещение картинок может возникнуть, когда тэг

    закрывается ниже тэга . Это очень старая HTML проблема. Если поставить тэг

    сразу же после тэга (на той же строке) это может решить проблему одно-пиксельного разрыва.

  1. Избегайте использования JavaScript. В большинстве случаев они будут отключены почтовыми клиентами.
  2. Если большая картинка разрезана и закодирована в разных ячейках, тестируйте такой шаблон, используя как можно больше тестовых аккаунтов. Иногда, такой шаблон может красиво смотреться в Outlook, но будут появляться ошибки в Hotmail и других сервисах. Также подумайте об использовании этой картинки в качестве фонового изображения в таблице. Этим вы достигните такого же результата. Не забывайте о том, что Outlook 2007 не отображает фоновые изображения.
  3. Для фоновых изображений используйте атрибут background, вместо кода CSS. Это работает безотказно.
  4. Храните изображения для электронного письма на своем сервере используя специальную папку для таких целей, например, /images/email, и не удаляйте их. Некоторые ваши читатели могут просматривать письма через неделю или через месяц.
  5. Используйте атрибуты alt, height, и w >Очень важно, чтобы ваше письмо хорошо смотрелось и с выключенными изображениями. По умолчанию Thunderbird, Outlook и другие почтовые клиенты не показывают изображений. Например, если вы используете белый шрифт на темном фоне, проверьте, что бы с выключенными изображениями фон оставался темным.

В тест вашего электронного письма, включите тест проверки “на спам.” Для этого можно воспользоваться бесплатным сервисом SpamCheck.

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

  1. Правильно ли отображается отправитель письма – имя или почтовый адрес?
  2. Корректна ли тема письма?
  3. Корректна ли контактная информация, и можно ли ее увидеть сразу?
  4. Есть ли текст, вверху письма, “Вы получили это письмо, так как подписаны… Инструкции о том, как отписаться от рассылки находятся ниже.”?
  5. Есть ли у вас ссылка для добавления вашего адреса в контакты?
  6. Присутствуют ли в вашем письме ссылки на веб-версию письма?

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

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

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

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

Хорошей новостью является то, что если ваше письмо сверстано хорошо для этих трех почтовых клиентов (Google Mail, Lotus Notes и Outlook 2007), то оно будет хорошо отображаться почти во всех остальных почтовых клиентах, если не во всех.

Некоторые методы, которых необходимо придерживаться для Google Mail и старых почтовых клиентов:

  1. Прописывайте определение фонового цвета с помощью атрибута bgcolor тэга td, не использует для этих целей CSS-стили.
  2. Используйте атрибут background для тэга td, что бы применить фоновую картинку, вместо CSS-стилей.
  3. Используйте padding для контроля отступов в ячейках, margin в этом случае не работает.
  4. Если вам нужны границы вокруг ячеек, используйте дополнительный тэг div, в котором прописывайте значения границ, так как назначение границ напрямую тэгу td не будет работать в Google Mail.
  5. Выставляйте отступы по 10 пикселей вокруг контента, что бы текст не “заезжал” на границы.
  6. Тщательно проверяйте все шрифты, может случиться, что вы забудете прописать стили в нескольких местах.

А теперь перейдем к Lotus Notes. Много компаний продолжают использовать и обновлять этот почтовый клиент (в 1995 IBM объявила, что 95 миллионов людей пользуются Lotus Notes).

Главным для правильного отображения письма в этом почтовом клиенте – код должен быть как можно проще и понятней.

Если вам нужно протестировать ваше письмо в Lotus Notes, вы можете скачать бесплатную пробную версию.

Что бы Lotus Notes отображал ваше письмо в HTML формате корректно, придерживайтесь следующих рекомендаций:

  1. Как мы уже обсуждали выше, используйте таблицу-контейнер, которая будет включать все остальные элементы письма, а также отдельные таблицы для шапки, основной части и подвала.
  2. Создайте пространство вокруг главной таблицы, используйте атрибут cellpadding, установив его значение, равным как минимум 5%.
  3. Не используйте декларации стилей в тэге head, Lotus может просто их удалить.
  4. Используйте абсолютные пути для картинок, которые храните на сервере.
  5. Попробуйте не использовать атрибут colspan в таблицах, ранние версии Lotus Notes не понимают их.
  6. Прописывайте ширину ячеек в тэгах td.
  7. Центрирование письма обычно не работает в Lotus.

Использование данных методов и рекомендаций обеспечит вашим HTML письмам отличное отображение в Google Mail и Lotus Notes, а также даст гарантии, что не возникнет проблем с Outlook 2007, который использует более старый движок.

Резюме

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

Полезные ссылки по теме

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

Campaign Monitor и MailChimp — много различных шаблонов для писем в HTML формате.

SpamCheck — проверка “на спам” писем.

Litmus — сервис тестирования шаблона письма во всех популярных почтовых сервисах и почтовых клиентах.

Добавлено:

Сводная таблица поддержки html тегов и css стилей разными почтоывыми клиентами — http://www.campaignmonitor.com/css/

Подборка доступных для скачивания e-mail шаблонов — http://www.campaignmonitor.com/templates/

Купить готовый email шаблон

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


Как создать динамический HTML шаблон электронного письма

В этой статье приводится пошаговое руководство по созданию динамического шаблона электронного письма с помощью HTML и PHP .

Основные принципы

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

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

Чтобы убедиться в этом, рассмотрите пример ниже, в котором я применил атрибут border , чтобы вывести границу каждой таблицы. Обратите внимание, что символы %s являются местом, где будет размещен динамический текст и картинки:

Весь макет построен на основе HTML таблиц . Мы воспользуемся PHP библиотеками для анализа маркера %s и его заполнения динамическим текстом перед отправкой письма.

Разработка статического шаблона

Начнем программировать! Прежде чем приступить к созданию красивого шаблона HTML письма , нужно начать HTML файл с XHTML документа :

Я рекомендую определить все таблицы границей border=»1″ , поскольку так проще определять ошибки при создании HTML шаблон письма. Для начала создадим базовый макет:

Установите cellpadding и cellspacing в ноль , чтобы избежать непредусмотренного пространства в таблице. Также установите ширину в 100%, поскольку эта таблица является телом письма ( стилизация тега body полностью не поддерживается ).

Теперь мы добавим вместо текста « My first email template! » (« Мой первый шаблон электронного письма! ») другую таблицу:

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

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

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

Несколько замечаний перед тем, как сделать шаблон HTML письма :

  1. Добавьте атрибут alt там, где нужно показать текст вместо изображений на случай, если почтовый клиент не сможет правильно загрузить их;
  2. Добавьте маркер %s там, где нужно, чтобы данные появлялись динамически в зависимости от варианта письма;
  3. Процентные значения обозначаются дополнительным знаком %. Это сделано так, чтобы PHP библиотека, которая используется для динамической обработки, знала, как правильно анализировать текст.

Мы успешно разработали статический шаблон электронного письма. Теперь давайте сделаем его динамическим!

Разработка динамического шаблона

Сохраните приведенный выше код в виде файла template.html . Теперь создадим новый PHP файл .

На серверной стороне зададим метод отправки HTML шаблона письма , описанный ниже:

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

Теперь, когда все готово, можно использовать оба метода и отправить наше первое динамическое письмо! Давайте воспользуемся созданным шаблоном письма для рассылки HTML . Допустим, что новый пользователь только что подтвердил свой электронный адрес. Хотелось бы отправить пользователю письмо с текстом Your email has been successfully verified (« Ваша электронная почта успешно подтверждена »).

Предположим, что у нас есть подтвержденная почта пользователя user@user.com и почта компании company@company.com . Теперь можно отправить автоматическое письмо:

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

Данная публикация представляет собой перевод статьи « How to create a dynamic HTML Email Template » , подготовленной дружной командой проекта Интернет-технологии.ру

Написание электронных HTML писем

Электронные HTML письма — это хороший способ держать пользователей в курсе последних событий, касающихся вашего бизнеса или продукции. Однако во время создания html писем возникают трудности. В почтовых клиентах нет поддержки сторонних CSS. В результате приходится прибегать к «древним» техникам, таким как использование таблиц и встроенным таблицам стилей. Сегодня я ознакомлю вас с процессом создания простых электронных HTML писем.

Введение

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

Проблема: Почтовые клиенты

Вы думаете IE — самая большая проблема? Что же будет после того, как вы столкнетесь с Outlook 2007? Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры. В данном случае не сработают свойство float, свойство фонового изображения и даже отступов. Так что же делать программисту, привыкшему придерживаться стандартов?

Решение: Программируйте как в 1997

Да-да. Таблицы. Cellpadding, cellspacing, colspan — все эти сложные вещи, о которых вы уже, наверное, забыли. Таблицы — единственный способ получить согласованный интерфейс письма. Так что пора забыть (временно) о ваших любимых CSS стилях и вспомнить о массивных таблицах.

Шаг 1: Дизайн

Простота

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

Минимизируйте использование изображений

Не слишком фантазируйте с дизайном писем, так как Outlook не поддерживает фоновые изображения. По существу, вам хотелось бы избежать волокиты с Фотошопом и сделать дизайн практичным. Несмотря на это, использование Фотошопа остаётся в наших планах.

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

Чем Уже, тем лУчше

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

Сохраняйте пропорции

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

Наш дизайн

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

Шаг 2: План

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

Во-первых, начнем с создания таблицы со 100% шириной и серым фоном. Это наша основная таблица.

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

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

Отступы внутри и снаружи ячеек

Вместо использования CSS свойств margin и padding мы будем использовать атрибуты HTML cellpadding и cellspacing. Cellpadding — почти то же самое, что и padding в CSS — отступы от содержимого до рамки. Cellspacing — это отступы между ячейками таблицы.

Cellspacing таблицы с идентификатором #main будет равен 15 пикселям, так что у нас будет 15-пиксельный отступ вокруг всего общего контента и такой же отступ между всеми колонками. Эти cellpadding и cellspacing относятся только к главной таблице, не к дочерним. Если мы не хотим применять ни cellpadding, ни cellspacing, необходимо определить это для каждой таблицы.

Шаг 3: Написание кода


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

Создаем скелет

HTML-код письма будет очень прост: нам нужны три главных тега html, head и body. Давайте создадим базовую таблицу и три внутренние таблицы, о которых мы ранее говорили.

Есть несколько способов описания тега DOCTYPE. Однако в данном случае, мы исключим его вообще, так как его описание нам ничего не даст.

Заметьте, что у двух таблиц cellpadding=»20″. Это отделит их от основного содержимого. Отступы главной таблицы равны 15 пикселей. Это делается для того, чтобы установить упорядоченность по вертикали. В связи с тем, что каждый раздел находится в своей отдельной ячейке, то между ними будет отступ в 15 пикселей.

Заметьте также, что у всех таблиц задан атрибут align со значением «center», а ширина таблиц задана явно (600 пикселей). В электронных HTML письмах лучше не указывать ширину основной таблицы явно. Лучше устанавливать размеры каждой ячейки, но у нас есть отступы, так что можно об этом не беспокоиться.

Таблицы с заголовками

Эти таблицы очень просты: в них всего лишь описаны параграфы в ячейках, выровненных по центру.

Вторая таблица выглядит абсолютно так же.

Заголовок

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

Не забудьте указать ширину каждой ячейки, равную 570 пикселей (600 — 15 пикселей отступов с обеих сторон). Мы также выравниваем дату по правому краю. Фоновое изображение добавим позже. А пока в качестве фона будет бледно-голубой цвет.

Заметьте, мы используем атрибут bgcolor вместо style=»background: «. Это все потому что html атрибуты воспринимаются в электронных письмах лучше, нежели CSS свойства.

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

Основное содержимое — 2 колонки

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

одной для изображения,

одной для отступа между изображением и заголовками,

и одну для самих заголовков.

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

Примечание:

Мы добавили пустую строку и ячейку в таблице. Так как у ячеек есть отступы, мы можем добавлять пустые ячейки, чтобы делать отступы в 15 пикселей между элементами. По моему опыту, это работает, но для полной уверенности можете добавить сущность .

Атрибуту valign даем значение «top». Это важно, так как располагает каждую ячейку в верхней части строки. Значение по умолчанию — middle, что приводит к непредсказуемым результатам.

Используем изображения от dummyimage.com, так как все изображения, используемые в электронных письмах, должны быть выложены в сеть (подробнее бо этом позже), и намного проще использовать генерируемые изображения. Просмотрите сайт, там объясняется, как задать картинке необходимый URL.

Основное содержимое — 1 колонка

Это очень простая часть: таблица из одной колонки с одним абзацем. Не забудьте задать ширину ячейки и выровнять таблицу по центру.

Разделители

Для того чтобы добавить отступы по вертикали (помимо 15 пикселей, которые у нас уже есть), необходимо использовать изображения. Вспомним 90-ые! Можно подгрузить изображение gif, но на данный момент быстрее использовать одно из иображений от dummyimage.com. Я оставлю его серым, но в последствии можно сделать его белым.

В результате получаем что-то вроде этого:

Основное содержимое — 3 колонки

Для этой части используем таблицу из 5 ячеек: три на колонки и две в качестве разделителей между ними.

Достаточно просто. Для границ примените тот же метод, что в части из 2 колонок. Не забывайте про valign!

Повторите то же самое и для текста.

Добавьте еще один разделитель в нижней части, и на этом почти всё:

Осталось совсем немного.

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

Работа над основной частью на этом завершается.

Пару слов об изображениях

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

Шаг 4: Оформление письма

Мы не можем подключить стили CSS и не можем описать стили в теге head в письме, потому что некоторые почтовые клиенты игнорируют его или только тег style. Мы будем использовать встроенные стили, хотя это и очень громоздко. К счастью, есть некоторые сервисы, которые встраивают стиль в html код. Я пользуюсь услугой сайта Premailer, которая делает это за меня.

Мы напишем CSS стили отдельно, а затем воспользуемся premailer-ом.

Сброс основных значений по умолчанию

Мы не будем сбрасывать значения с помощью селектора *, как вы бы сделали для сайта. Использование значений по умолчанию в действительности приведет к более согласованному результату. Единственными элементами, для которых необходимо будет сбросить значения внутренних и внешних отступов (padding и margin), являются те, которым мы добавили отступы с помощью cellpadding и cellspacing, например, заголовки и абзацы.

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

Оформление текста

Текст электронного письма не требует сложного оформления. Оформление текста письма подобно оформлению текста любой веб-страницы. Не используйте сокращений (типа «font: «), так как результаты будут неоднозначными.

Смотрите, теперь письмо выглядит намного привлекательнее!

Фоновые изображения

Работа с фоновыми изображениями осуществляется практически так же, как и в случае с веб-страницами, кроме того, что иногда они не отображаются! Убедитесь в том, что у вас есть запасной цвет, который является фоном ячеек (через bgcolor). Для почтовых клиентов, не поддерживающих CSS, сработает отображение именно этого фона.

Другие стили

Необходимо задать стиль каждой ссылке, в противном случае, она примет стиль, заданный по умолчанию почтового клиента. А также добавим рамку главной таблице. Еще добавим атрибут display:block каждому изображению, это исключит дефект, возникающий в Outlook и Hotmail.

Мы закончили. Приступим к тестированию!

Шаг 5: Тестирование

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

Почтовые клиенты


Вы должны протестировать свою работу хотя бы на этих почтовых сервисах:

Как тестировать?

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

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

Тестирование с помощью Mailchimp

Мне нравится использовать Mailchimp для тестирования и отправки тестовых рекламных писем. С Mailchimp можно бесплатно отправить письма 500 раз, так что вам не придется оплачивать тестирование. В нем очень простой и легкий интерфейс. Вот краткое пошаговое описание тестирования:

Подпишитесь на бесплатный аккаунт Mailchimp и создайте список необходимых почтовых клиентов: Hotmail, Yahoo! и Gmail. Затем зайдите в свой аккаунт. Выберите пункт create a campaign (создать рассылку), а затем regular ol» campaign на главной странице. Заполните необходимую информацию о рассылке. Для тестирования достаточно ввести название.

На странице design выберите Import -> Paste in code, а затем отметьте пункт Automatic CSS Inliner.

Если вы не используете Mailchimp, убедитесь в том, что у вас встроенный CSS стиль.

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

Тестирование с помощью Litmus

Litmus — это веб-приложение, тестирующее HTML письма во всех почтовых клиентах любой версии. Полная версия сервиса платная, и если ваш заказчик отказывается оплачивать эту услугу, вы можете протестировать бесплатно старую версию Gmail и Outlook 2003, которые все еще используются.

Хорошие результаты

Некоторые тесты показали довольно-таки хорошие результаты:

Не очень хорошие результаты

Некоторые результаты не вызывают восхищения, но есть и неплохие:

Плохие результаты

Old Gmail (explorer)

Исправление ошибок

В общем, тестирование прошло успешно, так как я проводил промежуточные тесты в Gmail и Outlook по ходу работы. Проблемы, возникшие в старой версии Gmail и Hotmail, связаны со стандартными стилями этих почтовых клиентов. Специальный уникальный брэнд от Microsoft устанавливает по умолчанию свой стиль для всех заголовков, окрашивая текст в зеленый цвет, с помощью обозначения !important. Иногда я почти уверен в том, что они хотят свести меня с ума.

Чтобы это исправить, нужно добавить !important ко всем стилям заголовков:

В старой версии Gmail возникает подобная проблема в заголовке: Gmail добавляет дополнительный отступ всем заголовкам. Нам всего лишь необходимо дополнительно описать стиль для верхнего отступа заголовков:

Вот мы и решили проблему с Hotmail:

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

Если вам удасться уговорить заказчика подписаться на Litmus, это облегчит работу. Вы также можете проводить тестирования многих почтовых клиентов с помощью платной версии Mailchimp и Campaign monitor.

Устранение неполадок

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

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

Проверяйте стандартные стили: используйте что-то вроде Firebug или Webkit Inspector, чтобы проверять, не перекрывает ли почтовый клиент ваши стили. Если это происходит, добавление обозначения !important решит проблему.

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

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

Результат

Вот конечный вариант кода:

Вот как выглядит наше письмо с реальными изображениями:

Ничего особенного, но это должно дать вам представление о том, как разрабатывать электронные HTML письма. Конечно существует много способов сделать это по-другому, но самое главное, чтобы все работало корректно.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails/
Перевел: Станислав Протасевич
Урок создан: 20 Января 2011
Просмотров: 186867
Правила перепечатки

5 последних уроков рубрики «HTML и DHTML»

Лайфхак: наиполезнейшая функция var_export()

При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.

17 бесплатных шаблонов админок

Парочка бесплатных шаблонов панелей администрирования.

30 сайтов для скачки бесплатных шаблонов почтовых писем

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

Как осуществить задержку при нажатии клавиши с помощью jQuery?

К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.

15 новых сайтов для скачивания бесплатных фото

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

8 правил, как сделать красивую html-вёрстку писем для email рассылки

Любой инфобизнесмен при создании серии писем для e-mail рассылки сталкивается с вопросом: «Какие инструменты необходимо использовать для создания рассылки?». Именно в этот момент Вы сталкиваетесь с понятием «верстка писем».

Что такое верстка писем?

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

Пример того, как выглядит верстка, приведен ниже:

ВЕРСТКА ПИСЕМ ИЛИ САЙТА: ЧТО ЛЕГЧЕ

Да, собственно, практически ничем. Лишь в случае с письмами, необходима поддержка последних версий более, чем 30 почтовых служб и мобильных приложений, тогда как для сайтов 3-4. Это связано с тем, что почтовики никак не могут определить единые стандарты для всех и у каждого есть свои требования к письмам. Также сделать верстку письма более трудно. При этом качественных исполнителей очень мало. Так что если вы собираетесь делать верстку письма не самостоятельно, то внимательно изучите портфолио верстальщика и адекватность цены.

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

БАЗОВЫЕ ПРАВИЛА ВЕРСТКИ ПИСЕМ


ПРАВИЛО 1 – ИСПОЛЬЗОВАНИЕ ТАБЛИЧНОЙ ВЕРСТКИ

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

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

ПРАВИЛО 2 — ВЫБОР ШАБЛОНА

Существуют шаблоны в одну и в две колонки. Шаблон в 1 колонку выгодней всего будет смотреться для рассылок новостей, дайджестов и такие шаблоны очень хорошо выглядят на смартфонах.

Шаблон в 1 колонку состоит из:

  1. Заголовка (логотип компании, ссылки на подписную страницу)
  2. Содержания, при нажатии на каждый пункт которого идет переход на текст в письме
  3. Нижней части письма (футер, подвал) со ссылками на какие-то материалы и кнопку Отписки.

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

Эти шаблоны кодируются с помощью HTML таблиц.

Рассмотрим на примере создание двухколоночной html вестки: всего необходимо создать 3 таблицы: для заголовка, подвала и для центральной части, состоящей из основной информации. Подходит лучше всего для письма с картинками, разбитыми по разным ячейкам.

Также в шаблоне используйте универсальные атрибуты html-тегов

ПРАВИЛО 3 – ИСПОЛЬЗОВАНИЕ ОТСТУПОВ

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

Вертикальный отступ задается так:

ПРАВИЛО 4 – ТЕКСТ+ССЫЛКИ: ПРАВИЛА СОЗДАНИЯ

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

Тег span применяется при создании текста. line-height применяется для блока или родительской ячейки. Как я уже писала выше, при верстке применяйте только стандартные шрифты.

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

Чтобы не возникло сложностей с открытием страницы в этом же окне, указывайте атрибут target=”_blank”.

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

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

  1. Сделать, чтобы мобильный номер не распознавался как номер телефона
  2. Использовать мобильный телефон как ссылку

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

ПРАВИЛО 5 – ФОН И КАРТИНКИ

Картинки играют большую роль в письме. Они задают атмосферу и делают письмо более аккуратным. Но только часть почтовых агентов загружают картинки по умолчанию. Чтобы картинка загружалась корректно, применяйте атрибут alt. А также всегда задавайте значение ширины и высоты картинок.

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

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

На этом сайте http://tools.emailmatrix.ru можно сгенерировать нужную структуру.

ПРАВИЛО 6 – ИСПОЛЬЗОВАНИЕ ВИДЕО

Не все почтовые службы поддерживают видео при загрузке. Только лишь немногие, такие как iOS, Outlook, Apple mail. Вы можете использовать медиа-запросы, чтобы скрывать видео, в зависимости от типа клиента.

ПРАВИЛО 7 – АДАПТИВНАЯ ВЕРСТКА

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

На платформе IOS письма масштабируются, чтобы уместиться в один экран, поэтому их необходимо увеличивать, чтобы посмотреть текст. На андроид письма показываются в 100% масштабе и таким образом подписчик видит только часть письма, что также уменьшает шансы заинтересоваться этим письмом.

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

Существует несколько видов адаптации для мобильных:

  1. Резиновая версткa
  2. Мобильная версткa
  3. Медиа-запросы

Мобильная верстка используется только, если количество подписчиков, просматривающих письма с мобильных устройств более 75%. Мобильная верстка отличается от обычной только шириной шаблона и составляет 320рх, на мобильных устройствах смотрится идеально, но вот на компьютерах очень странно.

Резиновая верстка — в данном виде верстки используются отдельные блоки размеры всех блоков и картинок (в % соотношении). Используется очень редко в чистом виде.

Медиа-запросы — используются медиазапросы CSS и подстраиваются под отображение письма идеального формата на любом из устройств. Но адаптироваться такие письма будут только в устройствах, которые поддерживают медиазапросы – это mail, gmail и почта android. В остальных клиентах типа yahoo подписчики увидят простое (не адаптивное) письмо.

ПОЛЕЗНЫЕ РЕСУРСЫ ДЛЯ ВЕРСТКИ ПИСЕМ

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

Понравилась статья, расскажи друзьям

САЛИД © При полном или частичном копировании материала, ссылка на первоисточник обязательна.

Нашли ошибку в тексте? Выделите нужный фрагмент и нажмите ctrl+enter

Верстка html письма

Столкнулся с проблемой. Сверстал письмо для рассылки, ставлю фон через background=»long.jpg». Отображается только в gmail, но не срабатывает background-size, и в mail отображается все идеально, в рамблере и яндексе не хочет работать. Каким способом можно реализовать?

Делаю все в таблицах.

3 ответа 3

Могу сказать с уверенностью, что «почта yandex» и «yahoo mail» отображают фоновую картинку с атрибута background. Убедитесь, что указали верный путь к фоновой картинке и что тег поддерживает данный атрибут.

P.S: бывают случаи, когда почтовые клиенты не подгружают фоновую картинку вместе с другими изображениями, пока пользователь не даст разрешение на их загрузку

Свойства background=»» bgcolor=»» можно применять только для тега

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

Не стоит использовать CSS свойства для наложения фона, они будут игнорироваться некоторыми почтовыми клиентами:


background: background-image: background-position: background-size:

используйте bgcolor для фонового цвета.

По поводу «как реализовать фоновое изображение?» — старайтесь использовать не фоновые, а обычные изображения + тестирование: пробуйте и надейтесь :)

HTML верстка писем для Email рассылки

Email-маркетинг — традиционный и эффективный инструмент digital маркетинга, который позволяет подогревать аудиторию, привлекать новых пользователей и мотивировать их к покупке продукта.

Для успешного использования системы емейл маркетинга недостаточно просто грамотно составить письмо и нажать на кнопку “отправить”. Информация должна подаваться в “красивой обертке”, со всеми необходимыми ссылками, изображениями и четкой навигацией. Более того, необходимо учитывать, что около 58% email пользователей проверяют почту с мобильных устройств, а значит дизайн отправленного письма должен быть user friendly, или другими словами — адаптивным.

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

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

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

Существует несколько основных движков для обработки HTML-писем:

  • Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit;
  • Outlook 2000, 2002 and 2003 используют Internet Explorer;
  • Outlook 2007, 2010 and 2013 используют Microsoft Word;
  • Веб-клиенты используют браузерный движок (например, WebKit для Safari, Blink для Chrome).

Почтовые клиенты также добавляют собственные стили, помимо тех, которые были выбраны разработчиком. Так, например, Google еще в 2020 году перешел на встраиваемые стили и медиа-запросы для Gmail. На данный момент, Google поддерживает немалое количество CSS-свойств, что помогает упростить процесс разработки шаблонов.

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

Использование табличной верстки писем

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

Табличная верстка — залог того, что письмо не поползет и корректно отобразится в любом почтовом клиенте.

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

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

Так выглядит 1-колоночная основа с фиксированной шириной и боковыми отступами 20 рх.

Особенности верстки HTML-писем: базовые правила, кнопки, фон

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

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

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

Верстка HTML-писем

Шаблоны HTML-писем

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

  1. Универсальный, простой отзывчивый шаблон электронной почты.
  2. Litmus.com — можно найти отличные бесплатные адаптивные шаблоны под разные нужды.
  3. Отзывчивые транзакционные HTML шаблоны электронной почты.
  4. Cerberus — хорошая подборка адаптивных шаблонов.
  5. Responsiveemailpatterns.com — коллекция шаблонов и модулей для адаптивных писем.

Советую не начинать с чистого листа, а присмотреться к какому-нибудь шаблону и постепенно делать из него что-то уникально и красивое.

Базовые правила верстки HTML-писем


  1. вместо

    Пример встроенного стиля

    Просто текст какой-то

  2. Ширину всего документа в 600px. Это обезопасит ваших читателей от горизонтальной прокрутки. Вместо этого можно сделать письмо адаптивным.
  3. Задавайте таблицам атрибуты border=»0″ cellpadding=»0″ cellspacing=»0″ .
  4. Лучше всего использовать стандартные шрифты (Helvetica, Arial) имеющиеся на любом устройстве.
  5. Вы можете свободно игнорировать некоторые правила верстки в угоду удобству и красоты, но нужно понимать, что пользователь может увидеть что-то совсем отличное от того, что вы хотели предложить.

    Странные отступы

    Для организации отступов можно использовать пустые конструкции

    Для вертикального отступа:

    Для горизонтального отступа:

    Но также можно применить padding к ячейке таблицы:

    Верстка кнопок для HTML-писем

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

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

    See the Pen Кнопки 1 by Ivanov Klim on CodePen.

    Второе решение завязано на использовании Vector Markup Language (VML)— языка векторной разметки. На сайте buttons.cm можно самостоятельно сделать кнопку на этом языке.

    See the Pen Кнопка 2 by Ivanov Klim on CodePen.

    HTML-письма, фоновое изображение

    Фоновое изображение лучше всего также накладывать с помощью VML. Существует схожий с кнопками онлайн-сервис создания фонового изображения . Ниже можно посмотреть пример реализации функционала сервиса с некоторыми изменениями для придания вида письма.


    See the Pen Письмо странным людям by Ivanov Klim (@DreamerKlim) on CodePen.

    Тестирование HTML-письма

    Перед отправкой письма советую протестировать его. Для этого можно использовать сервис PutsMail или Яндекс почту.

    Чтобы вставить HTML в структуру письма в Яндекс почте, выполните следующие действия: убедитесь, что у вас включено оформление → Кликните правой кнопкой мыши по строке ввода текста → Выберите «исследовать элемент» → В открывшемся окне откройте выделенный

    Как правильно сверстать html-письмо для почтовой рассылки?

    Хочу сверстать html-письмо, насыщенное изображениями и ссылками. Какие есть web-ресурсы / сайты, где можно прочитать о современных методах вёрстки таких писем? Хотел бы узнать о современных подходах и методиках вёрстки подобных писем.

    • Вопрос задан более двух лет назад
    • 1405 просмотров

    Хотел бы узнать о современных подходах и методиках вёрстки подобных писем.

    Верстка HTML-писем

    категория
    Веб технологии
    дата 19.10.2010
    автор Hripunov
    голосов 15

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

    Все описанные ниже примеры и советы работают в следующих популярных почтовых клиентах: mail . ru ; Rambler почта; MC Office Outlook 2003, 2007, 2010; Google Mail ; Яндекс почта; Yahoo! Mail (Classic) ; Lotus Notes 8, 8.5 ; Thunderbird 2.0, 3.0 ; Hotmail ; Windows Live Mail ; Apple Mail 3, 4 ; AOL Mail ; iPad, iPhone .

    1. Блочная верстка не подойдет! Поэтому про такие свойства как clear и float можно забыть. За основу нужно брать только таблицы. Хотя уже сегодня большинство клиентов поддерживают и блочный метод, но мы же говорим об «кроссмайлерной» верстке. Не буду писать, как верстают таблицами, а лишь приведу основу для 1 и 2 колоночных шаблонов с фиксированной шириной, расположенных по центру:

    1 колоночная основа :

    body style =» margin : 0 ; padding : 0 ; «>

    table width =»100%» border =»0″ cellspacing =»0″ cellpadding =»0″>

    td align =»center» valign =»top»>

    table width =»600px» cellspacing =»0″ cellpadding =»0″ border =»0″>

    td align =»center»>

    table width =»600″ cellspacing =»0″ cellpadding =»0″ border =»0″>

    td align =»left» valign =»top»>

    table width =»600″ cellspacing =»0″ cellpadding =»0″ border =»0″>

    td align =»center»>

    2 колоночная основа :

    body style =» margin : 0 ; padding : 0 ; «>

    table width =»100%» border =»0″ cellspacing =»0″ cellpadding =»0″>

    td align =»center» valign =»top»>

    table width =»600px» cellspacing =»0″ cellpadding =»0″ border =»0″>

    td align =»center»>

    table width =»600px» cellspacing =»0″ cellpadding =»0″ border =»0″>

    td width =»400″ align =»center» valign =»top»>

    table width =»360″ cellpadding =»0″ cellspacing =»0″ border =»0″>

    td width =»200″ align =»center» >

    table width =»160″ cellpadding =»0″ cellspacing =»0″ border =»0″>

    table width =»600″ cellspacing =»0″ cellpadding =»0″ border =»0″>

    td align =»center»>

    Обратите внимание на то, что шаблоны сделаны с боковыми отступами в 20 px , т.к. margin и padding использовать не рекомендуется. Т.е., чтобы задать боковые padding -и нужно внутри ячейки сделать отцентрированную таблицу меньшего размера (как в примере выше) и разница этих таблиц и будет размер отступов.

    Для всех встречающихся в письме таблиц обязательно задавайте свойства cellspacing =»0″ , cellpadding =»0″ и border =»0″ .

    2. Множество статей, посвященные верстке HTML -писем единогласно пишут, что все стили нужно прописывать исключительно inline . Это конечно правильно, но уже в настоящий момент, все перечисленные мною выше почтовые сервера (кроме Yandex, Lotus
    Notes и Google Mail ), понимают и встроенные стили (даже MC Office Outlook всех версий ), т.е.:

    style type =»text/css»>

    font-family : Arial, sans-serif ;

    будут работать для письма остальных «почтовиков». Выбор остается за вами.

    Внешние таблицы стилей по прежнему использовать нельзя.

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

    =»Arial» size =»2″ style =» font-size : 12px;» color =»#404040″> Это тестовый текст

    Размер шрифта в style указывайте только px . Для почтовых клиентов, которые не понимают инлайновские стили прописывайте размер в атрибуте size, который должен следовать перед style.

    Не используйте теги h 1, h 2, …, h 6 . Лучше оберните заголовок в тег font > и пропишите необходимые свойства.

    Чтобы сделать текст жирным, не стоит писать « font-weight: bold; », лучше просто использовать теги b > или strong > . Соответственно вместо « font-weight: italic ; », лучше использовать тег i > или > . Это дает 100% гарантию одинакового отображения во всех почтовых клиентах.

    Для ссылок используем следующую конструкцию, которая позволит сделать не только текст, но и подчеркивание во всех почтовых клиентах одинаковым:

    font face =»Arial» size =»2″ style =» font-size : 12px ; » color =»#0077c0″> a href =»#»

    target =»_blank» style =» color : #0077c0 ; «> font face =»Arial» size =»2″ style =» font-size : 12px ; «

    color =»#0077c0″> Это тестовая ссылка font > a > font >

    Не забывайте про target =»_ blank » .

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

    style =» background : url() ; «

    Хотел бы отметить, что запись должна быть именно такой. background-repeat задать не получиться, только потеряете фон. Единственное что можно, так это указать расположение рисунка ( background-position).

    5. Если вы хотите сделать отступ между «блоками» в письме, создавайте пустую строку, внутрь которой помещайте прозрачную картинку в формате . gif, которая в свою очередь обернута в элемент div и у элементов td/img следует обязательно указывайте нужную (одинаковую) высоту.

    table width =»600px» cellspacing =»0″ cellpadding =»0″ border =»0″>

    div style =» margin : 0 ; padding : 0 ; line-height : 0 ; «>

    Цукерберг рекомендует:  Кросбраузерность - Кросбраузерность, need your help
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих