ГлавнаяCSS, JQuery, JavaScript › Как сделать красивый HTML шаблон письма для E-mail рассылки?


Как сделать красивый HTML шаблон письма для E-mail рассылки?


 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('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 шаблон письма был дан, как пособие, которое Вы можете в любой момент переверстать на свой вкус и цвет.

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

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

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




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




77 комментариевА что думаете Вы?

  1. Людмила

    Мне понравилось!Как ни странно, но люблю с html повозиться :) , так радостно когда «задачка» решается!

    [Ответить]

    Денис Черников ответил:

    Я рад, Людмила! Мне вот тоже по душе головоломки.

    [Ответить]

  2. Юрий

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

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Юрий! Вы правы, на самом деле всё не так страшно, как кажется на первый взгляд.

    [Ответить]

  3. Сергей Москвитин

    Спасибо Денис. Разложил все по полочкам. Бери и делай. Вот за что мне нравится твой блог. За твой стиль подачи материала. Беру с тебя пример и стараюсь тоже все расписывать по шагам. Ты расписал так как конструктор. Я смотрю можно взять этот шаблон и сделать с него страницу захвата, а может еще что нибудь придумать. Вообщем спасибо за твой труд.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Сергей! С самого начала создания блога я ставил цель быть ближе к людям, объяснять подробно то, что самому давалось с трудом. А то знаете как бывает — заходишь на какой-нибудь сайт, а там столько интересного понаписано, но ничего не понятно. Куда какой код вставлять, где какие папки искать. Жуть.

    [Ответить]

  4. Владимир

    Здравствуй Денис.

    Спасибо за по шаговую инструкцию

    «Как сделать красивый HTML шаблон письма для E-mail рассылки»

    Я как раз занялся созданием рассылки .

    Особенно ценно ,что делишся исходным кодом.

    Есть от чего оттолкнутся.

    С уважением,Владимир

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Владимир! Когда уже есть готовый каркас, то всё гораздо проще! Думаю, у Вас всё получится.

    [Ответить]

  5. Андрей

    Меня всегда привлекали такие красочные письма и возникал вопрос: «Да как же это они сделали?» Теперь все секреты раскрыты! Спасибо, Денис, за пошаговый алгоритм.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Андрей! Всё на самом деле просто, нужно лишь сесть и немного подумать.

    [Ответить]

  6. Александр Красильный

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

    [Ответить]

    Денис Черников ответил:

    Привет, Александр! Рад, что тебе понравилось! Можешь доработать всё на свой вкус.

    [Ответить]

  7. Anna

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

    [Ответить]

    Денис Черников ответил:

    Всегда, пожалуйста!Сделайте своё письмо, а потом обязательно пришлите посмотреть.

    [Ответить]

    Anna ответил:

    Обязательно, только закончу разбираться с одним делом, и пришлю на зрительский суд :D

    [Ответить]

    Денис Черников ответил:

    Будем ждать с нетерпением!)

    [Ответить]

  8. Лидия

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

    Чем и пользуюсь, вот образец: https: //e.mail.ru/cgi-bin/msglist?ffsputnik=1#readmsg?id=13614568480000000611&folder=500002

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. Дмитрий

    Давно искал в сети что то подобное, а то стандартные шаблоны Смартреспондера приелись...Спасибо

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Дмитрий! Пользуйтесь.

    [Ответить]

  10. Владимир

    Здравствуй Денис.

    По твоему шаблону я написал заключительну страницу моей

    подписной страницы

    http: //deda.kz/h/

    Заключительная страница

    http: //deda.kz/email/

    С уважением,Владимир.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Владимир1

    Что-то ни одна ссылка не работает! Вы их не правильно указали!

    [Ответить]

  11. Виктор

    Здравствуй, Денис! Про HTML — это конечно круто, но на данный момент я на него смотрю, как папуас на вертолет. Но постичь язык интернет-кодов страстно хочу! Не буду много словословить, скажу только, что компьютер и инет — единственно возможный вариант для меня заработать на хлеб насущный (и не спрашивай почему!) Я всему у тебя учусь, и за это премного тебе благодарен. Люблю также и самообразование,но все равно по очень сложным вопросам (на какой то начальный период времени) не стыжусь обращаться за советами к уже знающим мастерам. Много читаю, пробую и настырно добиваюсь результата. Рад быть твоим подписчиком, а к учебе я предрасположен с детства и науки мне давались всегда легко (но в молодости мешали и лень, и моя юная неусидчивость). Спасибо тебе за все, ты хороший друг для очень многих людей.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Виктор! Огромное спасибо за такой откровенный и положительный отзыв. Вы напомнили мне себя некоторое время назад. Могу посоветовать Вам одно — «НЕ СДАВАТЬСЯ». Победа никогда не даётся легко, но что мы тогда будем из себя представлять если не будем стремиться быть победителем. Только терпение и труд делает из людей тех, к кому прислушиваются миллионы. Никогда ни один человек не будет признан, как величайшая личность если он не показал людям на что они способны. Именно с этой целью я начал вести блог. Даже если не будет того результата на который я был нацелен, всё было не зря. Удачи Вам!

    [Ответить]

  12. Ильдар Тимербаев

    Денис, Благодарю!

    Классная инструкция. Убрал в закладки. Завтра же займусь :)

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Ильдар!

    Занимайтесь.

    [Ответить]

  13. Татьяна

    Здравствуйте, Денис. А как отправить такое письмо?

    [Ответить]

    Денис Черников ответил:

    Я это делаю с помощью разных программ! В ближайшее время я напишу статью про это.Подождите немножко.

    [Ответить]

  14. Дёмкин Владислав

    Спасибо большое,я давно искал нечто подобное,только возникла одна проблема) Подскажите,пожалуйста,где,в какой программе это делать?

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Владислав! Это делается не в программе, а в обычном HTML-редакторе. Я использую Notepad++. Но без минимального знания html и css Вы не справитесь.

    [Ответить]

    Дёмкин Владислав ответил:

    Я вставил код,но у меня не отображаются картинки,я все голову ломаю,так и не понял почему)) Помогите,пожалуйста.

    [Ответить]

    Денис Черников ответил:

    Картинки сначала нужно разместить где-нибудь, а потом в шаблоне прописать к ним путь!

    [Ответить]

  15. Арслан Валитов

    Я правильно понимаю что код css в html нужно вставлять с помощью тегов

    h1 {

    ...

    }

    [Ответить]

    Арслан Валитов ответил:

    Перед этим

    style type="text/css

    почему то тег не появляется

    [Ответить]

    Денис Черников ответил:

    Арслан, Вы код в комментариях не вставите, спрашивайте на словах!

    [Ответить]

    Денис Черников ответил:

    Арслан, делайте так, как написано в посте! Там всё очень подробно поясняется.

    [Ответить]

  16. Арслан Валитов

    Я очень внимательно читаю,но не могу понять.Коды css я вставил,только у меня все равно все синее.Я их записываю по среди кода,вот так:

    table>

    style type="text/css"

    .footer {.

    font-family: Arial,Helvetica,sans-serif;

    font-size: 11px;

    color: #fff;

    padding-right: 20px;.

    }

    ./style

    Извините,если я вас отвлекаю)

    [Ответить]

    Денис Черников ответил:

    Не отвлекаете!))

    Вы установите себе фаербаг (дополнение к мозиле) и посмотрите с его помощью. Там сразу всё будет видно!

    [Ответить]

  17. Владислав

    А у вас есть статья,которая подробнее раскрывает ссылку:

    «Возникли проблемы при просмотре этого письма? Щелкните здесь для просмотра»?

    [Ответить]

    Денис Черников ответил:

    Нет, нету!

    [Ответить]

  18. Александр

    Помогите сделать шаблон для письма как с Вами связаться ?

    [Ответить]

    Денис Черников ответил:

    А как я Вам помогу? Я выдал всю информацию по созданию писем!

    [Ответить]

  19. Степан

    Спасибо.

    [Ответить]

  20. Степан

    Спасибо. Есть ВОПРОС, я так смотрю, под всеми статьям d комментариях изображение людей как вытягивается в круги — я та понимаю сам эти изображения вставляешь?

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Степан! Круги делает CSS, а изображения вставляет сервис Gravatar.

    [Ответить]

  21. dex

    Статья замечательная!!! При верстке столкнулся с такой траблой, может вы мне поможете? Вставляю, сверстанный по вашему примеру, шаблон в аутлук 2007, отправляю письмо, в итоге все едет, из за того что ааутлук добавляет ко всему содержимому ячейки. Ваш шаблон он, кстати, тоже портит. Как обойти эту не приятность?

    [Ответить]

    Денис Черников ответил:

    У меня есть пост о том, как отправлять HTML письма, попробуйте через описанную программу!

    [Ответить]

    dex ответил:

    а можно ссылку на пост?

    [Ответить]

    Денис Черников ответил:

    Поиск по сайту Вам в помощь!

    [Ответить]

  22. Виктор

    Спасибо Денис! Для тех у кого даже минимальные

    навыки работы с кодом, думаю разберутся. Все очень подробно показано.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Виктор!

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

    [Ответить]

  23. gkozhushnyi

    Эх я думал статейка о другом, научи пожалуйста делать форму подписки на статьи как у тебя!

    [Ответить]

    Денис Черников ответил:

    Какая именно подписка? В углу или в сайдбаре?

    [Ответить]

    gkozhushnyi ответил:

    Подписка для фидбернера)

    [Ответить]

    Денис Черников ответил:

    Возможно я напишу такой пост, но позже!

    [Ответить]

  24. gkozhushnyi

    Буду ждать) а то стандартная форма печальная)

    [Ответить]

    Денис Черников ответил:

    Хорошо! Только не знаю когда получится!

    [Ответить]

  25. Наталья

    А какой адрес у веб-версии письма?

    [Ответить]

    Денис Черников ответил:

    Там в самой почте нужно настраивать!

    [Ответить]

    Наталья ответил:

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

    [Ответить]

    Денис Черников ответил:

    Я не многословный из-за того, что не помню, как я на момент публикации поста делал ссылку на Веб-версию письма. А чтобы вспомнить мне так же как и Вам придётся воспользоваться поиском.

    [Ответить]

    Наталья ответил:

    Да я уже пользовалась, не нашла решения... может, не там искала. Буду признательна, если Вы найдете или вспомните. Или это не так важно и можно забить на это?)

    Денис Черников ответил:

    Если честно, то можно не пользоваться html-версией. Сейчас всё так продвинуто, что всё и так отлично загружается и просматривается. Я вон смотрю люди даже ссылку на отписку от рассылки перестали ставить, чтобы человек не смог от них уйти. Эти все ссылки по большей части считаются хорошим тоном и не более + для мобильных версий, где не всегда можно посмотреть объёмное письмо. А в остальном можете не заморачиваться!

  26. Наталья

    Спасибо, Денис, за такой развернутый ответ!) согласна с Вами. Я это и хотела сделать ради хорошего тона. Но больше не буду заморачиваться, Вы меня уговорили))

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Наталья! Если что пишите!

    [Ответить]

  27. Александр

    Денис, здравствуйте! Давно прочитал вашу статью, долгое время разбирался. Причина: буквально на днях окончил наконец куры по изучению кодов-html и CSS-стилей от Евгения Попова и все сразу стало понятно. Благодарю вас за урок. Эту же идею можно реализовать не прибегая к использованию таблиц. Проще это сделать используя в html блоки / Но это только мое мнение. Здесь есть проблема как вставить в письмо картинки если они в шаблоне письма не отражаются, нужна обязательно полная ссылка на картинку закачанную в интернет. Нашел один сервис, но он добавляет лишнее, может посоветуете что-то. Сбросьте ссылку, заранее спасибо.

    Александр.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Александр!

    Реализовать можно по-разному. Тут кому и как удобней! На счёт сервиса то вот хороший — http: //pixs.ru

    Загружайте любые фотки и отсылайте адресату!

    [Ответить]

  28. Лариса

    Денис, добрый день! Ваш сайт прекрасен, но к сожалению, все это делаю в первые, и на один вопрос найти ответ не смогла! При отправлении письма, каждая почта отображает его по разному, но более того, программа the bat отображает полную абракадабру. Текст-сплошные значки! При этом другие html-письма приходят и выглядят нормально! В чем проблема может быть, подскажите пожалуйста!

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Лариса!

    Проблема в кодировке HTML документа! Она должна быть UTF-8!

    [Ответить]

  29. Валентин

    а можно исходный код увидеть? я хотел к своему сайту сделать макет , если не трудно посмотрите http: //valentin.abc-4.com и посоветуйте как и что делать

    [Ответить]

    Денис Черников ответил:

    Исходный код чего?

    [Ответить]

  30. Александра Шпилькина

    Денис, спасибо за доходчивой урок. Но я так и не разобралась, как сделать так, что бы рассылка шла с и-мэйл адреса (например с mail.ru) так? что бы отображался не сам код, а его результат.И возможно ли это сделать? Или для этого нужен какой-то особый отдельный сервис?

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Александр! Для этого нужно использовать программу почтового клиента о котором я написал в посте!

    [Ответить]

  31. Эльдар

    Здравствуйте, Денис

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

    С Ув., Эльдар

    ПИ.ЕС. может по скайпу? если согласны, мой скайп elrusghost.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Эльдар! Извините, но я смогу этого сделать и дело даже не в деньгах!

    [Ответить]

  32. Полина

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

    [Ответить]

  33. Михаил

    Видимо это не моё! Что то страшное получилось... :(

    [Ответить]

Оставить комментарий!

Вверх