Задать вопрос
@patsooo
верстка-писем

Почему письмо плохо отображается в десктопном клиенте?

Есть вот такой код для email:

<body bgcolor="#fff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
    style="width:600px; font-family:arial; background: #fff; margin:0 auto; color:#3a3d46;">
    <table bgcolor="#fff" border="0" width="600" align="center" cellpadding="0" cellspacing="0"
        style="border-collapse: collapse; table-layout: fixed; width: 600px;">
        <tr>
            <td align="center" colspan="3" style="text-align:center;">
                <img src="http://img/100x100.png"
                    alt="Download image" width="80"><br><br>
                <span style="color:#525355; font-size:14px;">Competition start date</span>
                <img src="http://img/180x35.png"
                    alt="text" width="180">
                <span style="color: #09b36d; font-size: 24px;"><b>05.07.2020</b></span>
            </td>
            <td align="center" colspan="4" style="text-align:center;">
                <img src="http://img/100x100.png"
                    alt="Download image" width="80"><br><br>
                <span style="color:#525355; font-size:14px;">Competition end date</span>
                <img src="http://img/240x35.png"
                    alt="text" width="240">
                <span style="color: #09b36d; font-size: 24px;"><b>31.07.2020</b></span>
            </td>
            <td align="center" colspan="3" style="text-align:center;">
                <img src="http://img/100x100.png"
                    alt="Download image" width="80"><br><br>
                <span style="color:#525355; font-size:14px;">Winners announcement date</span>
                <img src="http://img/180x35.png"
                    alt="text" width="180">
                <span style="color: #09b36d; font-size: 24px;"><b>10.08.2020</b></span>
            </td>
        </tr>
    </table>
</body>


На веб-сайтах и мобильных приложениях всех почтовых сервисов все прекрасно отображается:

5eff770882bd8596694394.png

А вот на десктопном приложении почтового сервиса (любого) все разъезжается:
5eff76d07c0fd430651794.png

В чём проблема?
  • Вопрос задан
  • 114 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
AntonLitvinenko
@AntonLitvinenko
HTML coder
Верстка писем это как отдельный вид мазохизма, между клиентами для писем столько отличий, что вручную очень сложно предсказать все возможные косяки. Я бы порекомендовал для верстки использовать фреймворк, сам остановился на MJML и в целом доволен. Освоить легко, через пару дней уже делал весьма приличные письма с адаптивкой

5eff78a89d80f643999637.png
Ответ написан
2 комментария
2 комментария
saboteur_kiev
@saboteur_kiev
software engineer
Почтовые клиенты не соблюдают весь современный html/css и не будут соблюдать.
Поэтому верстать письма, чтобы они всегда одинаково выглядели во всех почтовых клиентах - нереально.

Для большинства подойдет простейшая табличная верстка, и то, некоторые клиенты могут по своему усмотрению "сокращать" лишние куски элементов.
Ответ написан
Комментировать
Комментировать
@themax205
как то так
<table width="600" border="0" cellspacing="0" cellpadding="0" style="padding:0; margin:0; border-spacing:0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 600px">
<tr>
<td align="center" style="padding: 0; margin: 0;">
<table width="200" border="0" cellspacing="0" cellpadding="0" style="padding:0; margin:0; border-spacing:0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 200px">
<tr>
<td align="center" style="padding: 0; margin: 0;">
<img src="newlogo-med360.png" alt="Медицина360" width="142" height="42"  style="border-width:0; display: block; width: 142px; height: 42px;">
</td>
</tr>
<!--padding bottom--><tr><td><div height="20" style="height: 20px; line-height: 20px; font-size: 16px">&nbsp;</div></td></tr><!--/padding bottom-->
<tr>
<td align="center" style="padding:0; margin:0; text-align:center; font-family: ‘Trebuchet MS’, Helvetica, sans-serif; font-size: 12px; line-height: 23px; color: #ababab;">
text
</td>
</tr>
<!--padding bottom--><tr><td><div height="20" style="height: 20px; line-height: 20px; font-size: 16px">&nbsp;</div></td></tr><!--/padding bottom-->
</table>
</td>
<td align="center" style="padding: 0; margin: 0;">
<table width="200" border="0" cellspacing="0" cellpadding="0" style="padding:0; margin:0; border-spacing:0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 200px">
<tr>
<td align="center" style="padding: 0; margin: 0;">
<img src="newlogo-med360.png" alt="Медицина360" width="142" height="42"  style="border-width:0; display: block; width: 142px; height: 42px;">
</td>
</tr>
<!--padding bottom--><tr><td><div height="20" style="height: 20px; line-height: 20px; font-size: 16px">&nbsp;</div></td></tr><!--/padding bottom-->
<tr>
<td align="center" style="padding:0; margin:0; text-align:center; font-family: ‘Trebuchet MS’, Helvetica, sans-serif; font-size: 12px; line-height: 23px; color: #ababab;">
text
</td>
</tr>
<!--padding bottom--><tr><td><div height="20" style="height: 20px; line-height: 20px; font-size: 16px">&nbsp;</div></td></tr><!--/padding bottom-->
</table>
</td>
<td align="center" style="padding: 0; margin: 0;">
<table width="200" border="0" cellspacing="0" cellpadding="0" style="padding:0; margin:0; border-spacing:0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 200px">
<tr>
<td align="center" style="padding: 0; margin: 0;">
<img src="newlogo-med360.png" alt="Медицина360" width="142" height="42"  style="border-width:0; display: block; width: 142px; height: 42px;">
</td>
</tr>
<!--padding bottom--><tr><td><div height="20" style="height: 20px; line-height: 20px; font-size: 16px">&nbsp;</div></td></tr><!--/padding bottom-->
<tr>
<td align="center" style="padding:0; margin:0; text-align:center; font-family: ‘Trebuchet MS’, Helvetica, sans-serif; font-size: 12px; line-height: 23px; color: #ababab;">
text
</td>
</tr>
<!--padding bottom--><tr><td><div height="20" style="height: 20px; line-height: 20px; font-size: 16px">&nbsp;</div></td></tr><!--/padding bottom-->
</table>
</td>
</tr>
</table>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Senior Frontend Developer / Старший разработчик Vue.js
Webbankir
До 350 000 ₽
Frontend Developer (Nuxt)
ИП Раковский
До 150 000 ₽
Преподаватель курсов программирования
CODDY • Москва
от 25 000 до 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать проект Площадки для дизайнеров интерьеров
22 нояб. 2024, в 10:19
10000 руб./за проект
Сделать верстку двух страниц из фигмы
22 нояб. 2024, в 09:58
5000 руб./за проект
Доделать проект
22 нояб. 2024, в 09:57
3000 руб./за проект
Ещё заказы