HTML шаблон письма

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

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

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

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

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

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

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

Итак.

 

HTML шаблон письма

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

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

 

HTML шаблон письма

ДЕМО СКАЧАТЬ

 

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

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

 


<html>
    <head>
        <title>HTML шаблон письма</title>
    </head>
    <body>
    </body>
</html>

 

Далее мы создаём таблицу-контейнер. Она будет имитировать сплошной цвет фона:

 


<html>
    <head>
        <title>HTML шаблон письма</title>
    </head>
    <body>
    <!-- Container Table -->
    <table  cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#0f6da1">
        <tr>
            <td align="center"></td>
        </tr>
    </table>
    <!-- End Container Table -->
    </body>
</html>

 

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

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

 


<html>
    <head>
        <title>HTML шаблон письма</title>
    </head>
    <body>
    <!-- Container Table -->
    <table cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#0f6da1">
        <tr>
            <td align="center">

    <!-- Email Wrapper Table -->
    <table cellpadding="0" cellspacing="0" border="0" width="640">
        <tr>
            <td></td>
        </tr>
    </table>
    <!-- End Email Wrapper Table -->

            </td>
        </tr>
    </table>
    <!-- End Container Table -->
    </body>
</html>

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

 

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

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

 

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

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

 

27.02

 

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

За отображение такой ссылки отвечает следующий кусок кода:

 

<table cellpadding="0" cellspacing="0" border="0" width="640">
    <tr>
        <td valign="bottom" height="30" align="right" class="footer">
            Возникли проблемы при просмотре этого письма? Щелкните здесь для просмотра.
        </td>
    </tr>
    <tr>
        <td>
            <img src="email_images/top_fade.jpg" width="640" height="20" border="0" />
        </td>
    </tr>
</table>

 

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

 

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

 

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

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

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

 

<tr>
    <td align="center" class="email_background">
<!-- Email Header -->
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td><img src="email_images/logo.jpg" width="246" height="41" border="0" style="padding-left:20px; padding-top: 20px;" /></td>
    <td><img src="email_images/facebook.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
    <td><img src="email_images/twitter.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
    <td><img src="email_images/linkedin.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
    <td><img src="email_images/youtube.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td>
</tr>
</table>
    </td>
</tr>

 

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

 

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

 

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

 

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

Далее мы переходим к содержанию. Оно должно быть коротким, красивым и познавательным.

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

 

<tr>
    <td colspan="5"><img src="email_images/featured_image.jpg" width="560" height="250" style="padding-left: 20px; padding-right: 20px;" /></td>
</tr>
<tr>
    <td colspan="5"><img src="email_images/featured_shadow.jpg" width="560" height="18" style="padding-left: 20px; padding-right: 20px;" /></td>
</tr>

 

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

 

html шаблон письма

 

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

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

 

<tr>
    <td colspan="5" style="padding-left:20px; padding-right: 20px; padding-bottom: 10px;">
        <h1>This is your featured story</h1>
    </td>
</tr>
<tr>
    <td colspan="5" style="padding-left: 20px; padding-right: 20px; padding-bottom: 20px;">
        <p class="content">Существует мнение, что Паттайя стала популярным курортом благодаря тому, что тут часто отдыхали американские моряки, которых впрочем, тут и сейчас большое количество и они всегда в окружении нескольких таек. Естественно среди наших соотечественников он менее популярен, чем Египет и Турция. Но родную речь тут слышно повсеместно )) и в торговых комплексах во время шоппинга и во множестве здешних баров )). Паттайя в основном знаменита своей ночной жизнью, морем и текстилем. Конечно, кроме всего прочего тут можно найти множество других интересностей.

Здесь можно брать в прокат любой транспорт, в том числе и джипы и скутеры. Для любителей мототехники тут вообще райский уголок. Чтобы взять в аренду мотобайк права могут даже и не потребовать, всего за 100-500 бат (плюс залог в размере 2 000 бат) можно арендовать приличный скутер и погонять в свое удовольствие!
<br /><br />
<img src="email_images/readmore.jpg" border="0" align="right" width="114" height="27" />
</p>
    </td>
</tr>
</table>
</td>

 

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

 

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;
}

Шаблон письма

 

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

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

 

<tr>
    <td align="center" class="email_background">
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td>
        <img src="email_images/secondary1.jpg" width="271" height="150" border="0" style="padding-left: 20px;" />
    </td>
    <td>
        <img src="email_images/secondary2.jpg" width="271" height="150" border="0" style="padding-left: 10px;" />
    </td>
</tr>
<tr>
    <td>
        <img src="email_images/secondary_shadow.jpg" width="271" height="15" border="0" style="padding-left: 20px;" />
    </td>
    <td>
        <img src="email_images/secondary_shadow.jpg" width="271" height="15" border="0" style="padding-left: 10px;" />
    </td>
</tr>
<tr>
    <td style="padding-left: 20px;">
        <h2>This is a secondary headline</h2>
    </td>
    <td style="padding-left: 10px;">
        <h2>This is a secondary headline</h2>
    </td>
</tr>
<tr>
    <td style="padding-left: 20px;">
        <p>Несмотря на погубленную репутацию Паттаи, здесь можно узнать, что пресловутый тайский массаж - не только прикрытие для борделей. В Таиланде действительно делают неплохой массаж, а лучшими специалистами в этом искусстве считаются слепые мастера. Их секрет заключается в повышенной чувствительности пальцев.
        <br /><br />
        <img src="email_images/readmore.jpg" style="padding-right:10px;" border="0" align="right" width="114" height="27" />
        </p>
    </td>
    <td style="padding-left: 10px; padding-right: 10px;">
        <p>Центральная улица и сердце Паттайи, которая никого не оставляет равнодушным. Местный Арбат, Таймс-Сквер и Содом с Гоморрой в одном стакане, «Уокинг Стрит» – настоящий источник любви и ненависти как для местных жителей, так и для приезжих. Говорим «Паттайя», подразумеваем Walking Street.
        <br /><br />
        <img src="email_images/readmore.jpg" style="padding-right:10px;" border="0" align="right" width="114" height="27" />
        </p>
    </td>
</tr>
</table>
            </td>
        </tr>

 

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

 

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

Шаблон письма

 

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

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

 

<tr>
    <td>
        <img src="email_images/bottom_fade.jpg" width="640" border="0" height="28" />
    </td>
</tr>

 

Добавление подвала

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

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

 

<tr>
                        <td valign="top" height="80" align="right" class="footer">
                                Рассылка от: Иванов Иван<br />
                                Автор блога: Ivan.ru<br />

                                <br />
                                Хотите отказаться от подписки? Нажмите здесь
                        </td>
        </table>
        <!-- End Actual Email Content -->
                        </td>
                </tr>
        </table>
        <!-- End Email Wrapper Table -->
                </td>
            </tr>
        </table>
        <!-- End Container Table -->
        </body>
</html>

HTML шаблон письма

Заключение

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

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

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

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

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