Скачайте бесплатно шаблон html письма для рассылки!

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

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

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

Так, что давайте начнем …

Как создать адаптивный и простой шаблон html письма самому?

Если Вас это интересует, то Вы попали по адресу! И мы с вами сейчас создадим очень простой, адаптивный и красивый шаблон html письма.

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

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

Вот здесь Вы можете скачать уже готовый бесплатный шаблон html письма:

ШАБЛОН HTML ПИСЬМА СКАЧАТЬ БЕСПЛАТНО!

Теперь начинаем создавать адаптивный шаблон html письма самостоятельно.

Для начала создадим простой пустой шаблон:

<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
        <title>Адаптивный шаблон HTML письма</title>
        <style type="text/css">
        body {margin: 0; padding: 0; min-width: 100%!important;}
        .content {width: 100%; max-width: 600px;} 
        </style>
    </head>
    <body yahoo bgcolor="#f6f8f1">
        <table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                Приветствую Вас!
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

Что мы с вами сейчас сделали? Все просто это шаблон html письма, где мы с вами написали заголовок нашего письма “Адаптивный шаблон HTML письма” и контент со словами “Приветствую Вас!”. Которые Вы в последствии будете заменять на свои собственные.

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

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

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

<body yahoo>

И кроме этого еще нужно назначить особые стили нашему тэгу, используя селектор атрибутов:

body[yahoo] .class {}

Теперь нам надо, чтобы наше письмо правильно отображалось в Outlook и Lotus Notes 8/8.5, нам нужно сделать вот так:

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <![endif]-->
            <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        Приветствую Вас!
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

А чтобы наше письмо правильно отображалось в Apple Mail, нам нужно сделать вот это:

<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style>

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

<td class="header" bgcolor="#c7d8a7">
Приветствую Вас!
</td>

И также задаем свои стили для заголовка:

.header {padding: 40px 30px 20px 30px;}

Теперь давайте сделаем наш шаблон html письма адаптивным для всех устройств в том числе и мобильных добавлением вот этих вот нескольких блоков кода:

Это левая колонка:

<table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="70" style="padding: 0 20px 20px 0;">
            <img src="images/icon.gif" width="70" height="70" border="0" alt="Бесплатный шаблон html письма скачать" / >
        </td>
    </tr>
</table>

Это правая колонка:

<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
        <![endif]-->
            <table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">style="width: 100%; max-width: 425px;">
                 <tr>
                    <td height="70">
                    </td>
                </tr>
            </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->

Добавим класс в медиа-запрос, созданный для Apple Mail:

.col425 {width: 425px!important;}

Теперь внутри ячейки добавим наш заголовок:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td class="subhead" style="padding: 0 0 0 3px;">
            ЗАГОЛОВОК
        </td>
    </tr>
    <tr>
        <td class="h1" style="padding: 5px 0 0 0;">
            Адаптивный шаблон HTML письма
        </td>
    </tr>
</table>

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

.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}

Все, теперь наш заголовок закончен и выглядит симпатично. Пример смотрите вот здесь: ДЕМО

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

<tr>
    <td class="innerpadding borderbottom">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td class="h2">
                    Приветствую Вас ! Или что-то в этом роде ...
                </td>
            </tr>
            <tr>
                <td class="bodycopy">
                    И дальше содержание вашего письма, которое Вы хотите донести до своего читателя. Этот шаблон html письма для рассылки адаптивный и очень простой в редактировании. Так, что уважаемые друзья вам будет очень легко все исправить под себя. Скачайте бесплатно этот простой адаптивный HTML шаблон письма для своей электронной рассылки и пользуйтесь на здоровье!
                </td>
            </tr>
        </table>
    </td>
</tr>

И давайте добавим еще стили для текста:

.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}

И стили для кнопки:

.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}

Еще установим ширину для нового класса ‘col380’, и добавим наши размеры в стили, чтобы позаботиться о Apple Mail. И теперь стили выглядят так:

@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}

Создадим одну колонку для изображения нашего шаблона HTML письма:

<tr>
    <td class="innerpadding borderbottom">
        <img src="images/wide.png" width="100%" border="0" alt="Бесплатный шаблон html письма скачать" />
    </td>
</tr>

Для наших стилей CSS:

img {height: auto;}

И теперь мы добавим строку текста без рамки внизу:

<tr>
    <td class="innerpadding borderbottom">
    И дальше содержание вашего письма, которое Вы хотите донести до своего читателя. Этот шаблон html письма для рассылки адаптивный и очень простой в редактировании. Так, что уважаемые друзья вам будет очень легко все исправить под себя. Скачайте бесплатно этот простой адаптивный HTML шаблон письма для своей электронной рассылки и пользуйтесь на здоровье!
    </td>
</tr>

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

<tr>
    <td class="footer" bgcolor="#44525f">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td align="center" class="footercopy">
                    &reg; Someone, somewhere 2013<br/>
                    <a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly
                </td>
            </tr>
            <tr>
                <td align="center" style="padding: 20px 0 0 0;">
                    <table border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="37" style="text-align: center; padding: 0 10px 0 10px;">
                                <a href="https://www.facebook.com/">
                                    <img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" />
                                </a>
                            </td>
                            <td width="37" style="text-align: center; padding: 0 10px 0 10px;">
                                <a href="https://www.twitter.com/">
                                    <img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" />
                                </a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

Еще нужно добавить требуемые стили для подвала в CSS:

.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;}

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

Если вам понравился материал пожалуйста сделайте следующее…