Jump to content

Как тестировать верстку html письма?


Recommended Posts

Добрый день. Сразу извиняюсь за тупой вопрос

Первый раз сталкиваюсь с версткой html-писем. Как их верстать я не спрашиваю в сети достаточно много информации по этому поводу. Вопрос в другом как их тестировать? (Не беря во внимание разные платные сервисы) Из прочитанного я так и не поняла как это все таки-делается. Единственное что мне сказали это отправлять html-файл приложением но это не сработало в яндекс почте просто в теле письма код в google открывается в отдельном окне. Подскажите пожалуйста как это делать

Link to post
Share on other sites

Если я правильно понял, то можно ведь тупо указать свой адрес и отправить на него.

так я так и делаю, но суть то не в этом, суть в том что почтовик не воспринимает это как верстку он воспринимает ее как простой текст

Link to post
Share on other sites

chiffenok,

Десктопные почтовые клиенты позволяют отправлять письма ввиде html. Их и нужно использовать.

И тестировать в них также нужно.

Link to post
Share on other sites

Почтовики капризные.

Попробуйте вставить вот этот шаблон


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Ruseller Email Newsletter</title>

<style type="text/css">

a {color: #4A72AF;}

body, #header h1, #header h2, p {margin: 0; padding: 0;}

#main {border: 1px solid #cfcece;}

img {display: block;}

#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }

#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important; padding-bottom: 0; }

#header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px; }

h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}

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

p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}

</style>

</head>



<body>



<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>



<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">

<tr>

<td align="center">

<p>Trouble viewing this email? <a href="#">View in Browser</a></p>

</td>

</tr>

</table><!-- top message -->



<table id="main" width="600" align="center" cellpadding="0" cellspacing="15" bgcolor="ffffff">

<tr>

<td>

<table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="8fb3e9">

<tr>

<td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>

</tr>

<tr>

<td width="570" bgcolor="8fb3e9" style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg);"><h2 style="color:#ffffff!important">News and Events</h2></td>

</tr>

<tr>

<td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>

</tr>

</table><!-- header -->

</td>

</tr><!-- header -->



<tr>

<td></td>

</tr>

<tr>

<td>

<table id="content-1" cellpadding="0" cellspacing="0" align="center">

<tr>

<td width="170" valign="top">

<table cellpadding="5" cellspacing="0">

<tr><td bgcolor="d0d0d0"><img src="http://tessat.s3.amazonaws.com/coins_small.jpg" width="170" /></td></tr></table>

</td>

<td width="15"></td>

<td width="375" valign="top" colspan="3">

<h3>All New Site Design</h3>

<h4>It's 150% Better and 40% More Efficient!</h4>

</td>

</tr>

</table><!-- content 1 -->

</td>

</tr><!-- content 1 -->

<tr>

<td>

<table id="content-2" cellpadding="0" cellspacing="0" align="center">

<tr>

<td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>

</tr>

</table><!-- content-2 -->

</td>

</tr><!-- content-2 -->

<tr>

<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>

</tr>

<tr>

<td>

<table id="content-3" cellpadding="0" cellspacing="0" align="center">

<tr>

<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">

<img src="http://tessat.s3.amazonaws.com/crayons.jpg" width="170" />

</td>

<td width="15"></td>

<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">

<img src="http://tessat.s3.amazonaws.com/handshake.jpg" />

</td>

<td width="15"></td>

<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">

<img src="http://tessat.s3.amazonaws.com/moo02.jpg" />

</td>

</tr>

</table><!-- content-3 -->

</td>

</tr><!-- content-3 -->

<tr>

<td>

<table id="content-4" cellpadding="0" cellspacing="0" align="center">

<tr>

<td width="180" valign="top">

<h5>Exciting New Products!</h5>

<p> 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</p>

</td>

<td width="15"></td>

<td width="180" valign="top">

<h5>A Newsletter Every Month</h5>

<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

deserunt mollit anim id est laborum.</p>

</td>

<td width="15"></td>

<td width="180" valign="top">

<h5>New and Improved Forum</h5>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

</td>

</tr>

</table><!-- content-4 -->

</td>

</tr><!-- content-4 -->

<tr>

<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>

</tr>

<tr>

<td>

<table id="content-5" cellpadding="0" cellspacing="0" align="center">

<tr>

<td width="267" valign="top">

<table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>

<img src="http://tessat.s3.amazonaws.com/card18.jpg" />

</td></tr></table>

</td>

<td width="15"></td>

<td width="278" valign="top">

<h4>This is a heading</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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 dolore eu fugiat nulla pariatur.</p>

</td>

</tr>

</table><!-- content-5 -->

</td>

</tr><!-- content-5 -->

<tr>

<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>

</tr>

<tr>

<td>

<table id="content-6" cellpadding="0" cellspacing="0" align="center">

<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

<p align="center"><a href="#">CALL TO ACTION</a></p>

</table>

</td>

</tr>



</table><!-- main -->

<table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">

<tr>

<td align="center">

<p>You are receiving this email because you signed up for updates</p>

<p><a href="#">Unsubscribe instantly</a> | <a href="#">Forward to a friend</a> | <a href="#">View in Browser</a></p>

</td>

</tr>

</table><!-- top message -->

</td></tr></table><!-- wrapper -->



</body>

</html>

И пара полезных ссылок

Линк 1

Линк 2

Edited by Modestes
Link to post
Share on other sites

chiffenok,

Десктопные почтовые клиенты позволяют отправлять письма ввиде html. Их и нужно использовать.

И тестировать в них также нужно.

блин аж досада берет я столько времени потратила на настройку the bat и результат такой же отправляет простым текстом

я создавала щаблон , указывала формат html и все равно

притом я щяс посмотрела отправленое письмо только the bat получает в формате html а яндекс почта и gmail обычным текстом

Edited by chiffenok
Link to post
Share on other sites

Простой и тупой способ отправить страничку в том виде как вы её видите в браузере:

Нажимаете Ctrl+A в окне браузера с вашим свёрстаным шаблном и вставляете в содержимое письма, например, я пробовал в google почте.

Не знаю насколько это верный способ, но он существует :)

А если честно, то самого интересуют методы проверки шаблонов писем, потому как сталкиваюсь с этим довольно часто.

Edited by Seemann
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    47,171
    Total Members
    1,451
    Most Online
    LilyK
    Newest Member
    LilyK
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Свежие Темы

  • Последние сообщения

    • Есть бесплатные образовательные сайты для обучения программированию. Вот, например, список одних из - https://thetrickycoders.com/post/kak-nauchitsya-programmirovat. 
    • А давайте все возьмем MS Edge на базе Chromium и начнем делать нормальные PWA, которые устанавливаются в систему. FF сознательно сломал всю свою экосистему переписав CSS на Rust. Это говно не только глючить начало, но и тормозить. У нас есть общепринятый Webkit, который работает на Chromium и Safari. Что еще нужно? Не смотрите вообще на FireFox. Те кто гикает на Linux - нормальными не считаются. Linux - серверам, Windows - десктопам. Люди покупают чаще ПК или ноутбук с предустановленной Windows, а там стоит нормальный себе Edge, который уже не нуждается ни в каких извращениях. Зачем понимать Java и изучать отдельные извращенства на React, Vue или Angular, если можно сделать то же Progressive Web Application просто на том же jQuery или чистом JS? Выбор очевиден. Не имеет смысла даже рассказывать что все разработчики всех браузеров работают по одной программе. Я вот забил бы на вашем месте выяснять почему так с FireFox - я бы просто по башке Mozilla настучал и выгнал их исправлять ошибки. Никто ведь про их браузер из нормальных людей ни чего даже не знает. Его никто не устанавливает так как первым делом русские лезут на Яндекс или Mail и скачивают тот же хромиум в стрингах. А еще раньше они берут в руки свой Android, а там просто Chrome на любом устройстве. Не воскрешайте труп пожалуйста.
    • Скорее всего, особенности работы движка. Firefox принимает естественную, а не действительную ширину изображения. Из-за этого и распирает обертку. Тут ведь цикличная зависимость получается: высота изображения зависит от контейнера → изображение вычисляет ширину с учетом соотношения сторон → контейнер должен получить теперь эту ширину. WebKit или какие там сейчас движки, по-видимому, пересчитывают эту ширину (последний этап), FF – нет. Как исправить? Зависит от задачи. Для чего вам эта обертка нужна. Используется ли как-то? Как вариант, позиционировать само изображение... Повторю, зависит от контекста задачи.
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...