Оформление писем html

Рубрики Процессы

Оглавление:

Оформление писем html

Для верстки писем используется табличная верстка. Используем только Inline-стили, то есть применять непосредственно к тегам. Писать CSS в тегах head и body запрещено, так как некоторые клиенты будут удалять все, что находится в этих тегах.

Такие конструкции не будут работать в head и body:

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

2. Обязательные свойства для HTML-тегов

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

border=«0» — толщина рамки в пикселах;
cellpadding=«0» — отступ от рамки до содержимого ячейки;
cellspacing=«0» — расстояние между ячейками;
style=«margin:0; padding:0» — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:

color: #333333; font: 10px Arial, sans-serif — всегда используем эти свойства для всех ссылок и спанов, иначе почтовые клиенты будут добавлять к этим свойствам свои значения;
line-height: 30px — тоже используем для всех ссылок и спанов, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;
-webkit-text-size-adjust:none — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;
display: block — делает строчный элемент блочным:

alt=»» — обязательное свойство, должно всегда использоваться, можно оставлять пустым;
border=«0» — толщина рамки в пикселях (px);
width=«100» — ширина картинки, если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту height=«100». Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства width=«30» и она будет пропорционально менять и высоту и ширину;
display:block; — хак для Outlook, если не ставить display:block то Outlook добавить к картинке отступы.

3. HTML теги которые мы можем использовать в верстке

4. Наложения фона

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

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

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

Для отступов можно использовать пустые ячейки таблицы с прописанной высотой или шириной, но этот метод уже устарел, так как влечет за собой нагроможденность кода. Отступы можно делать с помощью CSS свойства padding. Это свойство можно использовать для всех тегов, но имейте введу, что если его применять к тегу span, то десктопный Outlook 2007/10/13 + не будет применять отступы.

Свойство margin тоже работает но полностью не поддерживается в веб версии почтового сервера Outlook.com.

Советую применять padding к ячейке таблицы:

Или использовать для отступов пустые ячейки таблицы.

7. Доктайп (DOCTYPE)

Для любого HTML документа необходимо использовать DOCTYPE. Он показывает браузеру, каким образом интерпретировать HTML-разметку. Есть разные версии языка HTML и XHTML, которые имеют разный синтаксис.

Для писем наиболее подходящим доктайпом является:

8. Работа с текстом

Чтобы сделать акцент в тексте на фразе или слове, мы можем визуально выделить данный участок текста. Для этого мы можем использовать стили font-weight: bold; font-style: italic; или теги:

Жирный текст, аналог стиля font-weight: bold;

Наклонный текст курсив, аналог font-style: italic;

Все цвета в письмах задаются в виде трех пар шестнадцатеричных цифр (HEX) #dddddd. Также мы знаем, что в верстке сайтов применяют сокращенную запись. Например, #ffffff можно сократить #fff. Но в верстке писем этого делать не нужно, некоторые почтовые клиенты не понимают такой записи. Также не нужно писать шестнадцатеричный код цвета всеми большими буквами. Не все почтовые клиенты это оценят. Например, #D4D4D4 нужно записать в таком виде: #d4d4d4.

RGB запись цвета тоже не воспринимается должным образом. Например, такая запись цвета rgb (240,248,250) не будет работать.

10. Картинки

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

11. Решение проблем

В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Рассмотрим самые распространенные:

1. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом:

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

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

2. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить width=«100%» и для td прописать height=«100%». Пример:

Не нужно задавать таблице height=«100%», возникают проблемы с выравниванием ячеек по вертикали внутри главной таблицы.

3. В веб версии почтового клиента Outlook не желательно использовать строчные элементы, так как по умолчанию почтовый клиент добавляет собственное значение line-height.

display: block;» — решает проблему отображение свойства line-height в почтовом клиенте Outlook. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: 141%;.

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

Таким образом, эти шрифты можно использовать в рассылках без страха и риска. Если вы все же хотите использовать совсем нестандартные шрифты через правило @font-face, то будьте внимательными, это правило работает только в IOS, Google mail и Android 4 (Gmail).

13. Адаптивная верстка

На данный момент существует огромное количество методов верстки адаптивных писем, но мы остановимся на одном из них.

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

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

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

Общая структура разметки будет выглядеть следующим образом:

Можно использовать правило (a)media для адаптивной верстки, но от этого способа мы пока отказались из-за малой поддержки почтовых клиентов этого свойства.

Следующая статья будет посвящена использованию CSS 3 свойств в верстке писем. Также расскажу об CSS анимации в рассылках.

Красивые письма и Email-рассылки на 1С-Битрикс. Верстка почтовых шаблонов

Почему мы занимаемся темой красивых рассылок?

Мы не просто «веб-разработчики на Битриксе». Наша ключевая компетенция – умение интегрировать различные веб-системы и программные продукты между собой.

ИНТЕРВОЛГА – компетентный веб-интегратор . Мы можем решить все задачи интеграции собственными силами. Мы приносим пользу бизнесу клиента за счет осмысленного применения веб-технологий.

Яркий пример «интеграционной» задачи – красивые стилизованные письма, которые решают бизнес-задачи вне зависимости от того, как именно читает письма ваш клиент и на каком устройстве.

Мы решили эту задачу для себя и можем помочь вам.

Итак, в предыдущих статьях про Email-рассылки мой коллега Александр Давыдов рассказал о том, зачем рассылки нужны и как их сделать “на скорую руку”.

Я перехвачу у него эстафету и расскажу что можно сделать круче и какой крови это будет стоить.
Описанные Александром способы Email-рассылок ( через модуль «Рассылки» , через MailChimp ), как я уже говорил, работают, но не лишены недостатков. Например, к модулю рассылок 1С-Битрикс вы не сможете автоматически применять красивое оформление. А MailChimp бесплатен только если у вас менее 2000 подписчиков (потом начинает стоить немалых денег).

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

Покажи мне как выглядят письма с твоего сайта и я скажу насколько ты крут

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

Как создавать и отправлять HTML-письма в Gmail с помощью Stripo?

Согласно данным сайта Statista, в 2018, количество пользователей электронной почты достигло 3,8 миллиарда. В то время как Gmail использует 1,4 миллиарда людей. Если посчитать, то получается, что 36,8% всех пользователей предпочитают данный почтовый клиент.

Многие из нас пробовали создать HTML письмо в Gmail, но все попытки провалились. Почему? Потому что данный почтовый клиент не имеет необходимых для этого встроенных инструментов. Да и откровенно говоря, в них нет необходимости.

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

Хотите сделать то же самое всего за несколько минут?

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

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

1. Создаем шаблон сообщения в Stripo

Прежде чем экспортировать сообщение в аккаунт Gmail, его необходимо создать.

Для этого есть несколько способов:

Первый способ это создание нового сообщения на базе наших HTML шаблонов сообщений .

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

Второй способ – создание HTML шаблона с нуля.

Для этого вам нужно будет войти в ваш аккаунт, перейти в раздел «Шаблоны», после — выбрать раздел «Базовые шаблоны». Там вы найдете наш «Мастер шаблон». Создайте один шаблон на все случаи жизни. И просто комбинируйте блоки в соответствии с целями вашем маркетинговой кампании.

Третий способ – экспортировать/вставить HTML код.

В этом случае вам нужно будет в вашем личном кабинете выбрать вкладку «шаблоны» и выбрать мой HTML.

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

Так как же вам кастомизировать наши шаблоны?

Мы опубликовали множество статей на тему «Как работать в нашем конструкторе сообщений». Но все же я бы хотела вкратце напомнить.

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

Шаг 1. Как установить прехедер в Stripo. И как будет выглядеть ваше сообщение

Широко известный факт, первым в сообщении получатели видят именно прехедер. И давайте быть откровенными: именно по вашему имени, теме и прехедер они судят, стоит ли открывать сообщение.

Именно поэтому мы настоятельно рекомендуем никогда не пренебрегать данной опцией.

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

(Шрифт Arial, превью сообщения)

Шаг 2. Как добавить хедер и логотип в шаблон в Stripo. И как будет выглядеть ваше сообщение

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

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

Шаг 3. Как добавить баннер в Stripo. И как будет выглядеть ваше сообщение

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

Кстати, использование больших фотографий людей, а не рисованных изображений, является трендом 2018 года. Я с гордостью говорю о том, что на данный момент мы единственный редактор, который позволяет применять особые фильтры к баннеру. После чего вы можете разместить текст поверх баннера и красиво «упаковать» его в кастомный/декоративный шрифт.

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

Шаг 4. Как добавить структуры в Stripo. И как будет выглядеть ваше сообщение

Изображение и текст, 2 фото и 2 текстовых блока в ряд? Это решать только вам. Это достаточно распространенная опция. Многие редакторы позволяют размещать 2 или 3 блока в ряд. Но только мы позволяем использовать целых 4 блока в одной структуре. Сюда вы можете вставлять изображения, текст, кнопки, видео и т.д.

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

Три блока в структуре:

На примере видно, что в блоках под картинками также можно размещать описание товара и даже кнопки.

4 блока в структуре:

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

Шаг 5. Как вставить иконки социальных сетей. И как будет выглядеть ваше сообщение

Располагайте их там, где душа пожелает. Что же особенного в наших иконках социальных сетей? Мы предлагаем более 45, не ограничиваемся стандартными Facebook, Youtube и Instagram. Для вашего удобства, мы собрали их все воедино. И в качестве бонуса, вы можете выбирать их цвет и задавать желаемую форму.

Сделать это очень просто: вам нужно перетащить блок «Социальные сети» в требуемую структуру, выбрать форму иконок, цвет, и вставить ссылки в соответствующее поле.

Шаг 6. Библиотека блоков, и как она поможет вам в создании писем для Gmail

Естественно, вы высоко цените свое время. В связи с чем вы не желаете создавать однотипные сообщения изо дня в день. Мы тоже. Именно по этой причине мы создали «Библиотеку блоков». Работать с ней достаточно легко. После создания шаблона просто сохраните его блоки в библиотеку, давая название каждому из них. Когда вы будете создавать следующую кампанию, вам нужно будет просто перетащить необходимый блок в шаблон сообщения.

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

2. Экспорт HTML сообщения в Gmail

Это мой любимый шаг.

Однако, перед экспортом созданного сообщения, вам нужно воспользоваться опцией «Предпросмотр». Как? Просто кликните на кнопку «Предпросмотр», она расположена прямо над вашим шаблоном и имеет форму глаза:

Здесь вы увидите и десктопную, и мобильную версии письма. После можно переходить к экспорту. Кликните на кнопку «Экспорт».

У вас появится вот такое вот поп-ап окошко:

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

Конечно, из перечня вам нужно выбрать «Gmail». В случае, если у вас всего один аккаунт в Gmail и вы в него залогинены, то ваше сообщение будет сразу же экспортировано. Если же у вас, как и у меня, 2 активных аккаунта, то наша система предложит выбрать, в который из них отправлять письмо.

Примечание: при экспорте ваше сообщение попадает в папку «Черновики».

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

Примечание: сообщение по-прежнему можно редактировать.

3 и 4. Технические ограничения Gmail, и как Stripo справляется с ними

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

Гипотеза 1. Изображениям требуются ссылки

Знатоки Gmail утверждают в сети , что любое изображение без ссылки в сообщении формата HTML, можно скачать.

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

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

Конечно же, она никуда не приведет покупателей, но это убережет ваших подписчиков от надоедливой кнопки «Скачать».

Гипотеза 2. Изображения без alt атрибута попадают в Спам

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

Я намеренно отправила множество сообщений с не заданным alt атрибутом, но все они были успешно доставлены в папку «Входящие». Хочу заметить, что сегодня я тестировала только один почтовый клиент — Gmail.

Посему, не могу утверждать, что ситуация сложится аналогично с почтовиками Outlook и Apple Mail. Следовательно, если вы планируете делать отправлять сообщения не только пользователям Gmail, то вам потребуется прописывать alt текст, чтоб успешно пройти спам фильтры.

Но если вы забудете добавить таковой, то наша система автоматически скопирует имя изображения, какое бы оно ни было. Однако, даже если вы случайно, или намеренно, как я, удалите имя изображения и alt атрибут, то при экспорте сообщения наша система подставит его обратно. Если же вы не указывали никакого имени и alt текста, то Stripo автоматически подставит атрибут alt=“”.

Примечание: для чистоты эксперимента мы отключали данную функцию, чтоб проверить, смогут ли сообщения без alt атрибута пройти спам фильтры почтовика Gmail.

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

Гипотеза 3. Gmail обрезает сообщения

Да, это правда. Gmail “обрезает, все сообщения, которые весят более 102 kB. Внизу сообщения Gmail покажет кнопку “посмотреть сообщение полностью”. На данный момент нет технической возможности избежать этого. Но с нашей помощью вы можете взвесить сообщение:
➢ кликните на кнопку “экспорт”;
➢ выберите “HTML”;
➢ загрузите HTML;

➢ и потом просто правой клавишеей мыши проверьте “Свойства”.

Свойства файла показали, что вес шаблона составляет 65 kB. Я проверила данную информацию через другие приложения, и они подтвердили вес письма.

Все очень просто!

Гипотеза 4. Gmail не поддерживает класс

Неверно. Gmail передает и корректно отображает данные атрибуты. Проверено.

Гипотеза 5. Кнопка “Undo” не срабатывает при отправке массовой рассылки

Абсолютно неверно, если вы используете рассылку через Gmail, а не через Mail Merge. Все, что вам для этого нужно — войти в настройки, выбрать пункт “Отмена отправки” и выбрать время 5, 10, 20 или 30 секунд. Я применила данную опцию при массовой отправке сообщений в тестируемом почтовике, и все сработало верно. Никто мое сообщение не получил.

Гипотеза 6. Текстовые блоки, содержащие более 8500 знаков, удаляются

Как копирайтер или же просто как женщина, я люблю длинные предложения, подробные описания. Поэтому я решила вставить одну из статей в текстовый блок письма. В статье более 10000 знаков, не считая пробелы. Я отправила это сообщение своему другу. Оно было доставлено полностью, включая мою “поэму”. А это значит, что гипотеза не подтверждена. Что, на самом деле, прекрасно. Хоть я и очень сомневаюсь, что кто-либо станет рассылать столь длинные сообщения своим покупателям.

Гипотеза 7. Cсылки в Gmail-сообщениях

Я слышала, что Gmail самостоятельно подставляет ссылки к электронным адресам и телефонам в сообщениях. Другими словами, он делает их кликабельными. Я протестила массу писем с мобильными номерами и email адресами. И знаете что? Ни один из номеров не стал кликабельным. Мне по-прежнему нужно было выделять и копировать их для осуществления звонков.

Но! Ситуация с мобильными адресами немного смешная. Они либо становились серого цвета при отправке, но при этом были кликабельными. Либо же они становились голубого цвета, но при этом не активными.

5. Тестирование

Всегда перед экспортом и отправкой HTML сообщения в Gmail его нужно протестировать. Делайте это с Litmus или любым другим инструментом, который вам по душе.

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

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

Написание электронных 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
Просмотров: 180168
Правила перепечатки

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 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.