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

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

Актуальность создания html писем для почтовой рассылки

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

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

Ну и конечно же тут работает теория больших чисел. Если разослать предложение о продаже чего-то 20000 подписчиков, 1000 из них ознакомилась с предложением и хоть 10 да купит, а затрат – 0. Вы просто отправили письмо!

Но кто-то не открыл письмо, кто-то открыл и не стал читать его, потому, что там портянка текста, у кого-то не открылись картинки, а у кого-то поехала верстка. Так бывает. Из-за того, что почтовые программы не так хорошо поддерживают сss, как браузеры. А о javascript – я вообще молчу.

И существует масса проблем для верстальщиков, которые занимаются созданием html писем.

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

Проблемы при верстке html писем

Из-за того, что у почтовых сервисов нет общих правил отображения html писем, верстальщику приходится использовать правила верстки 90 годов. Некоторым к этому привыкать не нужно, но я, признаться, ни разу не прописывал стили внутри html документа, причем не просто внутри html документа при помощи , а именно inline, для каждого элемента отдельно.

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

Еще одним сюрпризом оказалось то, что не многие почтовые сервисы не поддерживаю float и отступы margin и padding. Как вам? Представляете вы сверстали классное трехколоночное html письмо на основе div (ов), а у пользователя такая белиберда пришла, что он тут-же удалил его, так и не поняв, что от него хотят.

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

Как написали на одном из сайтов:

Придется вспомнить такие страшные вещи, как: Cellpadding, cellspacing, colspan

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

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

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

Пока — всё! Если что-то еще всплывет, то опишу по ходу. А сейчас я хочу показать вам, что у меня получилось пока, без добавления стилей оформления, таких как шрифт, цвет, размер текста и т.д. Это только элементы в нужных местах. В следующей статье я опишу процесс тестирования в разных почтовых сервиса и правки, которые пришлось внести.

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

Как создать html письмо

Для начала, я создал каркас-таблицу для всего содержимого письма, шириной в 100% и голубым фоном. В нем разместил две дочерние таблицы. Одну для шапки (id=»header»), вторую для контента (id=»content»):

Как вы уже заметили, я задал cellpadding=»40" для таблицы-обертки. Это внешний отступ. Отступ в 20px задал таблице, которая отвечает за шапку. И добавил внутренний отступ таблице, в которой будет располагается контент. Также, все таблицы выровнял по центру. Идем дальше…

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

Png" alt="логотип" width="84" height="84"/>

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

Этим кодом я добавляю строку с одним столбцом, в таблицу «content» и помещаю в него картинку, с надписью «Smartlanding»:

Сейчас письмо выглядит так:

Все это делается чтобы были отступы между контентом. Html код с контентом выглядит так:

Как закрыть внешние ссылки от индексации

Теперь необходимо реализовать анонс статьи, делается это достаточно просто. 1 строка, 1 столбец и текст в нем:

Привет ребята. Сегодня речь пойдет о том, как надежно закрыть внешние ссылки на своем лендинг пейдж для того, чтобы с нее не передавался вес, а оставался на вашей странице. Как вы, наверное, знаете, теперь, даже если вы закрыли ссылку атрибутом , статический вес все равно передается, а следовательно убывает с вашей страницы. Теперь нужно создать структуру из 3 колонок. Так как мы не можем пользоваться float(ами), то придется сделать 5 колонок. 3 под контент с картинками (150px), а 2 — для того, чтобы задать отступ между ними (60px). Png" />

Точно такую же разметку делаю для текста, заголовков:

И теперь остается последний шаг, сделать footer. Я не стал создавать под него новую таблицу, а разместил в content, просто добавив новую строку и столбец:

Smartlanding | 2014

Вот такое письмо получилось. Теперь предстоит куча тестов. Я планирую протестировать верстку в следующих почтовых сервисах и программах:

• gmail
• yandex
• rambler
• mozilla thunderbird
• outlook 2007
• outlook 2013
• the bat

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

Если у вас есть опыт создания html писем, напишите пожалуйста ваш комментарий и укажите на ошибки. Буду вам очень признателен. А на сегодня — все. Пока!

(Ознакомиться с предварительными тестами 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 пикселей.

Новый дизайн сайта! На 150% Лучше и на 40% Эффективнее!

Примечание:

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

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

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

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

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

Разделители

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

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

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

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

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

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

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

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

Это шапка

CALL TO ACTION

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

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

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

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

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

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

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

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

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

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

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

#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } #header h1 {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; } #header h2 {color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 24px; } #header p {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px; } h3 {font-size: 28px; color: #444444; font-family: Arial, Helvetica, sans-serif; } h4 {font-size: 22px; color: #4A72AF; font-family: Arial, Helvetica, sans-serif; } h5 {font-size: 18px; color: #444444; font-family: Arial, Helvetica, sans-serif; } p {font-size: 12px; color: #444444; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;} h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}

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

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

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

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

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

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

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

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

Outlook 2003/2007

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

Сперва необходимо найти способ отправить 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, которые все еще используются.

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

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

Apple Mail

Thunderbird

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

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

Gmail (safari)

Outloook 2007

Outlook 2003

Yahoo! Mail

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

Есть и ошибки:

Hotmail (Зелёный???)

Old Gmail (explorer)

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

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

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

H3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; } h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; } h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

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

#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; } #header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important}

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

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

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

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

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

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

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

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

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

Результат

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

Trouble viewing this email? View in Browser Communitech Venture Services News and Events All New Site Design It"s 150% Better and 40% More Efficient! Exciting New Products! Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum A Newsletter Every Month Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. New and Improved Forum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is a heading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. CALL TO ACTION You are receiving this email because you signed up for updates Unsubscribe instantly | Forward to a friend | View in Browser

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

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

Повинуясь правилу, я не выбираю.

Правилу я следую слепо.

Людвиг Витгенштейн

Как вы уже знаете, с 1 июля 2017 года вводится в действие ГОСТ Р 7.0.97-2016 «Система стандартов по информации, библиотечному и издательскому делу. Организационно-распорядительная документация. Требования к оформлению документов» (далее - ГОСТ Р 7.0.97-2016). Эксперты обсуждают недочеты и противоречия нового стандарта. Однако в любом случае нам предстоит по нему работать… Расскажем о том, как разработать шаблон исходящего письма организации в соответствии с требованиями ГОСТ Р 7.0.97-2016 и как защитить документ от изменений.

УЧИТЫВАЕМ ТРЕБОВАНИЯ НОВОГО ГОСТА

Одна из статей предыдущего номера журнала была посвящена новациям ГОСТ 7.0.97-2016 .

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

Разметка шаблона письма. Начнем со схемы расположения реквизитов, которая была приведена в прошлом номере журнала (рис. 1).

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

Чтобы настроить параметры полей, отступов, интервалов шаблона, заходим во вкладку Разметка страницы (рис. 2).

Нововведения стандарта. При разработке шаблона письма необходимо учесть те изменения, в оформлении документов, которые вводит новый ГОСТ Р 7.0.97-2016:

■ Стандарт зафиксировал предпочтительные гарнитуры и размеры шрифтов: Times New Roman № 13, 14; Arial № 12, 13; Calibri № 14. Допускается использовать приближенные по начертанию шрифты, а также шрифты меньшего размера.

■ Номер страницы проставляется посередине верхнего поля документа на расстоянии не менее 10 мм от верхнего края листа.

■ Коды организации ОКПО, ОГРН и ИНН/КПП теперь включены в состав реквизита «Справочные данные об организации».

■ ГОСТ выделяет реквизиты «Эмблема» и «Товарный знак» (раньше был один реквизит «Эмблема организации или товарный знак (знак обслуживания)»). Они помещаются либо посередине верхнего поля шаблона над реквизитом «Наименование организации - автора документа» (на расстоянии 10 мм от верхнего края листа), либо слева на уровне реквизита «Наименование организации - автора документа».

■ Реквизит «Отметка об исполнителе» может быть размещен в нижнем колонтитуле шаблона, причем набран шрифтом меньшего размера.

СОЗДАЕМ ШАБЛОН ПИСЬМА

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

■ Шаг 1. Задаем размеры полей:

Левое поле - 20 мм;

Правое поле - 10 мм;

Верхнее поле - 20 мм;

Нижнее поле - 20 мм.

■ Шаг 2. Вносим сведения в реквизит «Справочные данные об организации» (реквизит 08) и вставляем изображение эмблемы. Используем шрифт Arial, № 12.

В реквизите указываем полное и краткое наименование организации (в соответствии с уставом), почтовый адрес организации (дополнительно можно указать местонахождение юридического лица, если оно не совпадает с почтовым адресом), номера телефона и факса, адрес электронной почты, адрес сайта организации, ОКПО, ОГРН, ИНН/КПП.

Над реквизитом «Справочные данные об организации» размещаем реквизит «Эмблема» (реквизит 02) (в нашем примере - изображение солнца).

Итак, мы заполнили реквизит «Справочные данные об организации» и вставили изображение эмблемы организации. В нашем примере это выглядит так, как показано на рис. 3.

■ Шаг 3. Защищаем реквизит «Справочные данные об организации» от редактирования. Самый простой способ запретить пользователям вносить любые изменения - вставить его в шаблон письма как рисунок.

Для этого с помощью штатного средства MS Word «Ножницы» вырежем нужную нам картинку.

Найти этот инструмент просто: кликаем по значку Windows в левом нижнем углу экрана или нажимаем клавишу Windows на клавиатуре - откроется окно, где в строке поиска пишем «ножницы» (рис. 4).

Открываем эту программу щелчком мыши и в появившемся окне нажимаем кнопку Создать (рис. 5).

Теперь вставляем рисунок в будущий шаблон согласно расположению реквизитов, указанных на схеме (рис. 1).

■ Шаг 4. Вставляем поля для заполнения реквизитов «Дата документа» (10), «Регистрационный номер документа» (11), «Ссылка на регистрационный номер документа (12) - все согласно нашей схеме (рис. 1).

Эти реквизиты располагаются ниже слева под реквизитом «Справочные данные об организации» и выглядят так, как показано на рис. 7.

Начнем с поля для реквизита «Дата документа». Сначала нужно активировать вкладку Разработчик . В MS Word 2013 для этого нужно совершить следующие действия: нажимаем Файл , далее - Параметры . В открывшемся окне выбираем опцию Настроить ленту . Настраиваем ленту Основные вкладки , а точнее, ставим галочку рядом с вкладкой Разработчик и нажимаем ОК (рис. 8).

Теперь переносим курсор на строку, где должен проставляться реквизит «Дата документа». Далее во вкладке Разработчик открываем меню Элементы управления и в блоке Инструменты из предыдущих версий нажимаем кнопку Поле (элементы управления формами) (рис. 9).

Добавленное поле будет выглядеть так:

Аналогичным образом добавляем поля для других реквизитов шаблона: «Регистрационный номер документа», «Ссылка на регистрационный номер документа», «Адресат», «Заголовок к тексту», «Текст», «Отметка об исполнителе» и т.д.

■ Шаг 5. Задаем параметры текстовых полей. Если дважды кликнуть по любому из добавленных полей, откроется диалоговое окно Параметры текстового поля . В нем задаем нужные параметры для текстов реквизитов (рис. 10).

Для большей части полей в нашем шаблоне смело указываем тип данных «Обычный текст» (рис. 10). Можно заполнить строку «Текст по умолчанию» - размещенный здесь текст будет автоматически подставляться в поле при подготовке письма в этом шаблоне. Также при желании задаем формат текста (прописные буквы, строчные буквы и т.д.). Также мы можем ограничить длину размещаемого в поле текста.

Параметры текстового поля для реквизита «Дата документа». Для этого реквизита необходимо указать тип данных «Дата» (рис. 11).

Задаем другие параметры для поля реквизита «Дата»: если нужно, заполняем строку «Дата по умолчанию» - указанная дата будет автоматически подставляться в поле. Также выбираем формат даты (традиционный - dd.MM.уууу).

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

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

■ Шаг 7. Добавляем всплывающие подсказки. Для удобства работы с шаблоном письма можно сделать всплывающие подсказки к полям. Чтобы создать подсказку, выделяем поле, к которому хотим ее привязать, и открываем вкладку Вставка . Далее в разделе Ссылки выбираем Закладка (рис. 13).

В открывшемся диалоговом окне в поле Имя закладки вводим название закладки (без пробелов) и нажимаем Добавить (рис. 14).

Закладка добавлена. Теперь нам нужно «связать» ее с подсказкой. Для этого нажимаем сочетание клавиш CTRL+K . Откроется новое диалоговое окно Вставка гиперссылки , в котором в разделе Связать с: выбираем Место в документе и указываем нашу закладку. Далее в этом же окне жмем на кнопку Подсказка (рис. 15).

Откроется диалоговое окно Подсказка для гиперссылки . Вводим текст подсказки. В нашем случае это фраза «Введите дату документа». Нажимаем ОК (рис. 16).

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

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

ОГРАНИЧИВАЕМ РЕДАКТИРОВАНИЕ ШАБЛОНА

Что касается мер защиты, то здесь они также необходимы, но есть, как всегда, нюансы.

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

Чтобы ограничить редактирование, во вкладке Рецензирование выбираем команду Ограничить редактирование . Справа откроется одноименная панель (рис. 18).

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

Ставим галочку в поле Ограничения на редактирование и разрешаем только ввод данных в поля форм (рис. 19).

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

Здравствуйте, уважаемые читатели!
В этом посте хочу рассказать вам о том, как создать шаблона письма в почте Яндекс . Аналогично почтовому сервису Gmail, Яндекс-почта тоже имеет такую возможность. Почему затронул эту тему? Появилась необходимость отправлять, по сути, идентичные письма клиентам. Ну, разве только поменять имя и какие-то цифры, а так весь текст одинаков.

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

Настраиваем шаблон письма в почте Яндекс.

Всё моё руководство можно уложить в три шага:

1. Создаём подпись
2. Добавляем портрет
3. Создаём шаблон письма

Разберём по пунктам.
Открываем свой или корпоративный почтовый ящик. Первым делом заходим в настройки и выбираем там раздел — «Личные данные, подпись, портрет»

Создаём подпись

В верхнем поле вписываем имя и фамилию, чуть ниже нажимаем кнопку «Создать подпись». Используя текстовый редактор, создаём саму подпись, которая будет автоматически вставляться в самый низ тела письма. Вы можете красиво оформить текст, сделать гиперссылки, добавить картинку.

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

Добавляем портрет

Если у вас нет ещё портрета, то добавить его можно через раздел «паспорт». Справа после входа в «паспорт» увидите текстовую ссылку «Изменить портрет пользователя». Нажимаете, и появляется возможность загрузить фотографию или логотип компании.

Создаём шаблон письма

Вот и дошли до самого главного. Красивая и информативная подпись у нас есть, портрет тоже, приступаем к созданию шаблона письма. Для этого просто нажмите «написать письмо», и в строке «тема» с правой стороны появится текстовая надпись «Шаблон». Кликните на неё, и потом «создать шаблон».

Вписываем тему письма, в моём случае «Расчет рассрочки на автомобиль». Затем в тело письма, куда уже вставлена наша созданная ранее подпись, добавляем основной текст. Последним шагом будет нажатие кнопки «сохранить шаблон». Тема будет являться названием шаблона.

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

Послесловие

Мне, как представителю , необходимо работать с клиентами. Причём по разным программам, и наличие таких шаблонов значительно упрощает мою работу. Одному нужно расчёт платежей по выслать, другой «

Здравствуйте дорогие читатели – сайт!

Сегодня я покажу, как сделать красивый для E-mail рассылки.

Уже давно ни для кого не секрет, что весь бизнес в Интернете построен на E-mail маркетинге.

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

Но, что бы на такое предложение обратили внимание, а не сразу отправили в папку «спам», нужно привлечь к нему внимание.

Для этого будет уместным сделать красиво оформленный HTML шаблон письма.

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

Что и как мы будем делать?

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

Создание каркаса и таблицы-контейнера

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

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

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

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

Создание шапки

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

Верхняя строка

Начиная с этого момента, я буду исключать ранее написанный код (рамки таблицы).

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

Возникли проблемы при просмотре этого письма? Щелкните здесь для просмотра.

А за её внешний вид отвечает CSS стиль:

/* Fonts and Typography */ .footer { font-family: Arial,Helvetica,sans-serif; font-size: 11px; color: #fff; padding-right: 20px; }

Логотип и иконки социальных сетей

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

За их вывод отвечает вот такой код:

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

/* Backgrounds */ .email_background { width: 640px; background: url("email_images/email_bg.jpg") repeat-y; } /* Images */ img { display: block; border: none; }

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

Добавление содержания

Сначала мы начнём с добавления первого изображения, которое в данном дизайне имеет размер 560px на 210px . Вы также можете увидеть милую деформированную тень под изображением, которая была сделана отдельно, что позволяет быстро менять изображения, не теряя тень. Давайте перейдем к коду:

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

Добавление заголовка и содержания

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

This is your featured story

Существует мнение, что Паттайя стала популярным курортом благодаря тому, что тут часто отдыхали американские моряки, которых впрочем, тут и сейчас большое количество и они всегда в окружении нескольких таек. Естественно среди наших соотечественников он менее популярен, чем Египет и Турция. Но родную речь тут слышно повсеместно)) и в торговых комплексах во время шоппинга и во множестве здешних баров)). Паттайя в основном знаменита своей ночной жизнью, морем и текстилем. Конечно, кроме всего прочего тут можно найти множество других интересностей. Здесь можно брать в прокат любой транспорт, в том числе и джипы и скутеры. Для любителей мототехники тут вообще райский уголок. Чтобы взять в аренду мотобайк права могут даже и не потребовать, всего за 100-500 бат (плюс залог в размере 2 000 бат) можно арендовать приличный скутер и погонять в свое удовольствие!

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

H1 { color: #e95f03; font-family: Futura, Verdana, Sans-Serif; padding: 0; margin: 0; font-size: 24px; font-weight: normal; } .content { padding: 0; margin: 0; } p { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; }

Дополнительное содержимое

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

This is a secondary headline	This is a secondary headline
Несмотря на погубленную репутацию Паттаи, здесь можно узнать, что пресловутый тайский массаж - не только прикрытие для борделей. В Таиланде действительно делают неплохой массаж, а лучшими специалистами в этом искусстве считаются слепые мастера. Их секрет заключается в повышенной чувствительности пальцев.	Центральная улица и сердце Паттайи, которая никого не оставляет равнодушным. Местный Арбат, Таймс-Сквер и Содом с Гоморрой в одном стакане, «Уокинг Стрит» – настоящий источник любви и ненависти как для местных жителей, так и для приезжих. Говорим «Паттайя», подразумеваем Walking Street.

Здесь нам ещё потребуется добавить дополнительный стиль. Вот он:

H2 { color: #e95f03; font-family: Futura, Verdana, Sans-Serif; padding: 0; margin: 0; font-size: 18px; font-weight: normal; }

Закрытие HTML шаблона письма

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

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

Здесь Вам необходим такой код:

Рассылка от: Иванов Иван
Автор блога: Ivan.ru

Хотите отказаться от подписки? Нажмите здесь

Заключение

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

Тестовый HTML шаблон письма был дан, как пособие, которое Вы можете в любой момент переверстать на свой вкус и цвет.

На сегодня это всё. Надеюсь, что Вам понравилось.

До новых статей…

С уважением, Денис Черников!