Как сделать красивый HTML шаблон письма для E-mail рассылки? Как закрыть внешние ссылки от индексации. Доступ к Лаборатории Gmail
Gmail изначально отличалась несколько своеобразным интерфейсом, что положительно выделяло ее среди «коллег по цеху».
Например, идеологию формировать цепочки писем на основе темы , в которую я буквально влюбился практически сразу, со временем скопировали очень многие почтовые системы — начиная от Яндекса, заканчивая Mozilla Thunderbird и Lotus Notes.
Но, как известно, пользователи довольно тяжело воспринимают разного рода нововведения и со временем, Google пошел на встречу тому, думаю, не самому большому проценту пользователей, и добавил в настройки возможность выключить цепочки в Gmail .
Однако, не смотря на инновационность подхода ко многим задачам, периодически в Gmail обнаруживается видимое отсутствие определенного функционала, который де-факто давно уже считается стандартом для электронной почты. Насколько я могу судить, именно для исправления этой ситуации, Google и добавил к Gmail поддержку Google Labs — т.н. «лаборатории Google» , в которой тестируются и обкатываются те функциональные решения, которые по некоторым причинам не были добавлены в public, но доступны пользователям по отдельному запросу .
Сегодняшняя статья является небольшим лайфхаком по использованию Google Labs в Gmail , который позволит вам ускорить работу с электронной почтой и минимизировать временные затраты на рутинные операции .
Как включить поддержку Google Labs для Gmail
Для этого нужно в правом верхнем углу нажать на иконку колбы, или нажать «Настройки» и выбрать в верхнем меню пункт «Экспериментальные функции» .
К одной из не-public-функций относится и система построения шаблонов писем для Gmail . Некоторое время назад я столкнулся с необходимостью отправлять несколько писем практически одинакового содержания (исключая пару строк) — разным получателям. Изначально понятно, что каждый раз открывать письмо из отправленных, копировать весь текст, сохраняя форматирование — это не выход.
Соответственно, я начал искать стандартную функцию для любого почтового клиента, а именно — шаблоны писем . Как выяснилось, в public такая функция действительно отсутствовала, но зато была в наличии в Google Labs для Gmail . Называется она «Шаблоны ответов» .
Итак, для включения «Шаблоны ответов» в Gmail , мы идем в Google Labs и активируем соответствующую опцию, выбрав «Включить» и после этого сохраняем изменения с помощью кнопки в нижней части страницы.
Теперь, когда мы включили функцию, нужно разобраться с тем — как создать шаблон письма в Gmail . Делается это следующим образом:
1. Создаем новое письмо и сохраняем его как шаблон
- Пишем новое письмо.
- Выбираем пункт «Готовые ответы».
- Выбираем пункт «Создать готовый ответ...»
- Создаем новое письмо в Gmail.
- Выбираем «Вставить» и название шаблона (на предыдущем шаге я назвал его «Шаблон готового письма»).
- Наслаждаемся полученным результатом.
Таким образом, воспользовавшись функциями Google Labs, мы получили в Gmail полноценную систему шаблонов писем , управляемых непосредственно из окна создания и редактирования письма. Обратите внимание, что по нажатию на «Готовые ответы» , вы можете не только создавать и вставлять шаблоны, но также и удалять их случае необходимости.
Как создать расширенный автоответчик в Gmail
Я уверен, что Google бы никогда не стал многомиллиардной корпорацией, если бы не предусматривал использование некоторых функций в общей связке — причем зачастую очень нестандартной.
Обычный автоответчик в любой почтовой программе предусматривает абсолютно одинаковый ответ всем пользователям . В принципе, это не так уж и удивительно — чаще всего, автоответчик используют для информирования получателей о том, что у владельца ящика нет полноценного доступа к почте, об отпуске и подобных довольно обыденных вещах. Одна причина — одинаковое письмо.
Но что делать, если нужно автоматически отправлять разные письма — разным получателям? Или отправлять автоматические письма только определенным получателям ? В качестве примера, могу привести довольно обычную просьбу от многих отправителей: «пожалуйста, подтвердите получение письма» .
Согласитесь, безумно неудобно каждый раз создавать ответ на письмо, добавлять текст типа «Спасибо, все получил» и отправлять его. Да, рассмотренная выше функция «Шаблоны ответов» может упростить задачу вдвое, но почему бы не автоматизировать эту схему на все 100% ?
Однако, как вы уже поняли, обойтись стандартным автоответчиком мы не можем — ведь не все отправители настаивают на подтверждении о получении и засорять чужой почтовый ящик своими бессмысленными письмами — это моветон.
Для того, чтобы не портить себе карму, но и избавить себя от ненужной работы, мы воспользуемся связкой двух функций Gmail — «Шаблоны ответов» и «Фильтры» .
- Добавляем адрес того отправителя, которому должны доставляться наши ответы.
- Нажимаем кнопку «Пробный поиск» для проверки.
3. Настраиваем условия фильтра
- Отмечаем пункт «Отправить готовый ответ».
- Выбираем нужный шаблон ответа.
- Сохраняем фильтр.
Теперь, на все письма, которые будут приходить по указанному в настройке адресу, будет отправляться ответное письмо с тем текстом, который вы укажете. Например, приветствие, текст «Спасибо, письмо получено» и подпись.
Обратите внимание, в поле «От кого» можно вписывать не только конкретный адрес получателя, но и только доменное имя.
Например, вместо «[email protected]» , можно ввести только «@your-company-name.com» и тогда на все письма от пользователей этого почтового домена , будет отправляться сообщение автоответчика.
А каким образом использовали бы эти возможности вы?
Всем привет. На днях решил разобраться с тем, как верстаются 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" /> |
|
Точно такую же разметку делаю для текста, заголовков:
| Как сделать UTM метки и для чего они нужны | Обновления на блоге и мини-отчет об оптимизации | Скрипт для АБ тестирования |
И теперь остается последний шаг, сделать footer. Я не стал создавать под него новую таблицу, а разместил в content, просто добавив новую строку и столбец:
Smartlanding | 2014
Вот такое письмо получилось. Теперь предстоит куча тестов. Я планирую протестировать верстку в следующих почтовых сервисах и программах:
- gmail
- yandex
- rambler
- mozilla thunderbird
- outlook 2007
- outlook 2013
- the bat
В процессе тестирования я буду добавлять стили заголовкам и текстам, обнулять свойства и вносить прочие коррективы. А после, напишу еще один развернутый пост на эту тематику. Возможно что-то поменяется к следующей статье, так что подписывайтесь на обновления, если вам интересна данная тема и вы не хотите пропустить новый материал.
Если у вас есть опыт создания html писем, напишите пожалуйста ваш комментарий и укажите на ошибки. Буду вам очень признателен. А на сегодня — все. Пока!
(Ознакомиться с предварительными тестами html письма в разных поисковых системах )
Здравствуйте дорогие читатели – сайт!
Сегодня я покажу, как сделать красивый для 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
Хотите отказаться от подписки? Нажмите здесь