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 письма - это хороший способ держать пользователей в курсе последних событий, касающихся вашего бизнеса или продукции. Однако во время создания 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 |
Письмо каждый месяц |
Новый Улучшенный Форум |
Добавьте еще один разделитель в нижней части, и на этом почти всё:
Осталось совсем немного...
|
Это шапка |
Работа над основной частью на этом завершается.
Пару слов об изображениях
В отличие от веб-страниц, вы не можете просто поместить все изображения в папку и прописать к ним относительные ссылки. Все ссылки должны быть абсолютными. Когда я разрабатываю электронное письмо, я загружаю изображения на какой-то хостинг или 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 не помог, покопайтесь в блогах популярных сервисов рассылки писем. Ведь некоторые люди зарабатывают этим деньги, так что они свою работу знают!
Не сдавайтесь : если вы не можете понять, где допустили ошибку, вернитесь в самое начало разработки и проверьте весь код, пока не найдете ошибку.
Результат
Вот конечный вариант кода:
| |||||||||||||||||||||||||||||||||||||
Вот как выглядит наше письмо с реальными изображениями:
Ничего особенного, но это должно дать вам представление о том, как разрабатывать электронные 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
Хотите отказаться от подписки? Нажмите здесь