Seo - практик

Создаем индивидуальный htm-шаблон письма для Yandex / Mail.ru

Все компании (особенно их директора) хотят выделиться на фоне остальных своим уникальным стилем. И e-mail письма не исключение. Но многие почтовые клиенты и сервисы предоставляют возможность изменить только подпись в письме. Что ж, это делают все, а как быть если необходимо сделать вот такое письмо:

При условии того, что корпоративная почта развернута на бесплатной платформе Яндекса или Mail.ru (Gmail для бизнеса не берем в расчет, т.к. она уже давно не бесплатная) задача становится достаточно трудоемкой, но она решаема!

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

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

• Yandex – почте;
• почте mail.ru;
• Gmail почте;
• Mozilla Thunderbird;
• The Bat;
• Microsfot Outlook.

С версткой письма у нас все в порядке, поэтому приступаем к магическим ритуалам.

Из всех почтовых сервисов и программ на данный момент только Mozilla Thunderbird и Microsfot Outlook поддерживают вставку письма в HTML-формате. Но все пользователи в Вашей компании «категорически доверяют» Yandex – почте (или mail.ru), да и сам директор отказывается переходить на непонятные программы, когда он уже ни один год отправляет письма с его любимой темой «Звездных войн». А Yandex не поддерживает вставку письма в HTML-формате. Как быть?

Идем на хитрость.

Устанавливаем и настраиваем Mozilla Thunderbird на учетную запись нужного нам сотрудника.

Обязательно указываем передачу данных через IMAP – протокол для входящей почты, для исходящей SMTP – протокол. Данная манипуляция позволит скачивать почту в Mozilla Thunderbird без ее удаления на серверах Yandex и автоматически обновлять отправленные письма с Mozilla Thunderbird на серверах Yandex.

Эта особенность поможет нам создать шаблон письма в Mozilla Thunderbird в HTML-формате и автоматически выгрузить его в одну из папок в почте Yandex.

Вставляем HTML-код в письмо и сохраняем его как шаблон в Thunderbird:

Через 1-2 минуты в Yandex появляется необходимая нам папка «template», где содержится сверстанное нами письмо. Данный шаблон можно поправить и сохранить уже в нужном нам виде в самой Yandex-почте:

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

Проблема: не отображаются картинки в шаблоне письма на принимающей стороне.

Да, есть такая проблема. Если Вы подгружаете изображения со стороннего сайта (например, с сайта своей компании), то картинки у адресата отображены не будут. Данную проблему можно решить двумя способами:

• Загрузить картинки, используемые в верстке письма на Yandex диск (если отправляете почту с Yandex, либо в облако Mail.ru, если отправляете почту с mail.ru). Далее указать прямые ссылки на эти изображения в сервисах. Обратите внимание, что по указанной Вами ссылке должна открываться картинка и ничего более.
• Возможно загрузить картинку в само тело письма, перекодировав его в base 64. Далее вставить код картинки в формате base 64 в теги

Лучший вариант - это перекодировка изображения в код base 64 – меньше движений мышкой, больше надежности (изображение не удалят с Yandex диска, оно уже вложено в само письмо).

Задача выполнена. Thunderbird можно удалять. Директор и сотрудники довольны – теперь их письма совсем не такие как у всех.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Послесловие

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

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

Если вы устали отвечать на один тот же вопрос снова и снова, тогда вам помогут «Готовые ответы» от Gmail.

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

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

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

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

• Служба поддержки - если вы работаете в поддержке клиентов, используйте шаблоны ответы для вопросов, которые создаются очень часто.
• Запросы на не предлагаемые продукт или услугу - как владелец малого бизнеса, вы иногда получаете запросы за пределами своего ассортимента. Отправьте Шаблонный ответ, объяснив, что вы предлагаете.
• Последнее уведомление - создайте шаблон письма для работы с последним уведомлением об оплате или доставке.
• Доступность - если кто-то хочет запланировать встречу или заскочить по пути, используйте шаблоны ответ для разъяснения рабочего времени.
• На той же ноте - последование это важная часть построения отношений. Используйте шаблон как модель для таких типов писем.

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

Как создать шаблон ответа в Gmail

Теперь, когда вы поговорили о том, когда использовать шаблоны писем, настало время объяснить как создать ваш собственный шаблон Gmail, используя «Шаблоны ответов».

Посмотрите короткий видеоролик для изучения основ по созданию шаблонного ответа в Gmail:

Или проследуйте этим детальным шагам, описанными ниже и вы получите больше информации на тему: как создать и использовать шаблоны писем в Gmail.

Шаг 1. Где находится Лаборатория Gmail и как включить «Шаблоны ответов»

«Шаблоны ответов» это функция доступна в Лаборатории Gmail, поэтому чтобы её использовать, вам надо зайти в Лабораторию Gmail

1. Доступ к Лаборатории Gmail

Для доступа к Лаборатории Gmail, начните с главного окна папки «входящие». Нажмите значок Настройки (шестирёнка) в правом верхнем углу. Из выпадающего меню, выберите вариант Настройки.

Выберите вариант Настройки .

Отобразится страница Настроек . Нажмите Лаборатория сверху в выборе доступных вариантов в Gmail. Прокрутите вниз, пока не увидите Лабораторию Gmail Шаблоны Ответов .

Прокрутите вниз до Лабораторию Gmail «Шаблоны Ответов».

2. Включите «Шаблоны ответов» от Gmail

По умолчанию Шаблоны ответов отключены. Нажмите переключатель Включить с правой стороны, чтобы включить эту функцию.

Нажмите переключатель Включить

Прокрутите вниз страницы и нажмите кнопку Сохранить изменения. Теперь «Шаблоны ответов» включены, страница перезагрузилась и вы видите свои входящие.

Шаг 2. Как создать шаблон в Gmail

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

Напишите ваше сообщение.

Наберите сообщение, из которого вы хотите сделать шаблон. Уделите внимание тому, что вы напишите в поле Тема , так как это будет заголовком вашего «Шаблонного ответа». Заполнять поле Получатели не обязательно.

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

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

Выберите вариант Создать готовый ответ .

Теперь нажмите Шаблоны ответов > Создать готовый ответ . Вас попросят дать название готового ответа (по умолчанию используется тема):

Этот готовый ответ будет назван Наши рабочие часы .

Если вы хотите изменить название вашего заготовленного ответа, сделайте это сейчас. Убедитесь на будущее, что название достаточно описывает то, что несет в себе шаблон.

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

Отметьте: Шаблоны ответов сохраняются с меткой Черновик . Если вы случайно удалите готовый ответ из Черновиков , он больше не будет работать, даже если он всё ещё будет отображаться в меню Готовых ответов .

Шаг 3. Как использовать Шаблоны Gmail для ответа

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

В этом шаге, я объясню оба варианта.

1. Использование шаблона вручную

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

Когда откроете форму Новое сообщение или Ответить , нажмите стрелку в нижнем левом углу (рядом со значком урны), чтобы увидеть «Готовые ответы».

Выберите «Шаблоны ответов» в Gmail

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

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

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

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

2. Используйте фильтр для автоматической отправки готовых ответов

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

Откройте страницу Настроек . Нажмите Фильтры и заблокированные адреса .

Нажмите ссылку Создать новый фильтр .
Укажите параметры фильтра.

Укажите параметры для тех писем, на которые вы хотите отправлять готовый ответ . Вы можете создавать фильтры на основе любых комбинаций из:

• адрес От
• строка Тема
• слова в письме
• наличие в письме прикрепленных файлов
• если это сообщение чата
• размер письма

Укажите информацию в соответствующие поля.

После указания ваших параметров, нажмите ссылку Создать фильтр в соответствии с этим запросом . Появится окошко Создать фильтр :

Выберите опцию «отправить готовый ответ».

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

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

Нажмите кнопку Создать фильтр . Увидите сообщение «Фильтр создан ».

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

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

Шаг 4. Как изменить или удалить шаблон письма в Gmail

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

1. Изменить готовый ответ

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

Выберите готовый ответ для изменения.

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

Шаблон готового ответа Gmail в сообщении.

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

Нажмите OK , чтобы перезаписать готовый ответ.

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

2. Удаление шаблона ответа

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

Нажмите стрелку вниз, справа внизу формы Новое сообщение . Выберите вариант Шаблоны ответов . Появится меню с готовыми ответами :

Выберите название готового ответа, чтобы удалить его.

Кликните по названию готового ответа, который вы хотите удалить. У вас попросят подтверждения:

Кликните OK для удаления готового ответа.

Для удаления готового ответа, нажмите кнопку OK .

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

Шаг 5. Как подключить шаблоны ответов

Если вы решили, что больше не хотите использовать шаблоны ответов в Gmail, вы можете отключить функцию «Шаблоны ответов».

Чтобы подключить шаблоны ответов, пройдите в Лабораторию Gmail через Настройки . Прокрутите до функции Шаблоны ответов . (Она будет в разделе Включенные экспериментальные функции в верхней части страницы .)

Нажмите переключатель Выключить.

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

Примечание: сообщения Шаблонных ответов, которые вы создали ранее остаются в ваших Черновиках до тех пор, пока вы их не удалите.

Вывод

Перестаньте писать повторяющиеся сообщение писем. Используйте шаблоны писем в Gmail, который вы создаете один раз и используете их при необходимости когда угодно, с экспериментальной функцией «Шаблоны ответов» Gmail. Вы сэкономите время и станете более продуктивным. Функцию «шаблоны ответов» очень просто использовать, когда вы знаете как.

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

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

Чтобы добавить новый шаблон письма, перейдите в «Настройки» - «Шаблоны документов». Создайте новую группу документов (например, «Электронная почта» или «Шаблоны писем») и убедитесь, что напротив поля «Использовать для шаблонов писем» стоит галочка.

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

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

Сохраните изменения.

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

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

Не нашли ответа на свой вопрос?. Мы ответим на вопрос и дополним справку недостающей информацией.

Электронные 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 колонка

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Разделители

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

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

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

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

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

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

Новые продукты! 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

Письмо каждый месяц

Новый Улучшенный Форум

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

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

Это шапка

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 письма. Конечно существует много способов сделать это по-другому, но самое главное, чтобы все работало корректно.