Comments 16
> Grunt & SCSS — крайне сильная форма извращения
> Я не использую CSS инлайнеров, SCSS и грунтовку. Только чистый инлайновый код сразу. Кто-то скажет, что такой код сложно поддерживать, а я скажу — нифига. Find & Replace — мой лучший друг
Не могу согласиться, просто не представляю, как можно вручную поддерживать такую колбасу стилей, когда можно html верстать с применением обычных классов, css держать отдельно, как и в любых других не emal-проектах, а рутину оставить роботам.
> Я не использую CSS инлайнеров, SCSS и грунтовку. Только чистый инлайновый код сразу. Кто-то скажет, что такой код сложно поддерживать, а я скажу — нифига. Find & Replace — мой лучший друг
Не могу согласиться, просто не представляю, как можно вручную поддерживать такую колбасу стилей, когда можно html верстать с применением обычных классов, css держать отдельно, как и в любых других не emal-проектах, а рутину оставить роботам.
Вот была классная статья на тему www.smashingmagazine.com/2014/08/04/improve-your-email-workflow-with-modular-design/
В том то и дело, что эти умники своими перделками типа инлайнеров городят ту самую колбасу нечитаемого кода. Вот пример рабочего письма. Все читаемо. Никакой колбасы. Для изменения чего либо достаточно поправить несколько символов либо выполнить необходимый find & replace.
Скрытый текст
<meta charset="utf-8">
<style>
body { margin:0; }
@media only screen and (min-width: 600px) {
/* Wrapper Fix */
.wrapper { width:600px !important; }
}
@media only screen and (max-width: 600px) {
.wrapper { width:100% !important; }
.shadow { box-shadow:none !important; }
}
a { color:#395ebf }
</style>
<!--[if gte mso 9]>
<style>
.wrapper { width:600px !important; }
.flex-item { width:100% !important; }
div { line-height:normal !important; }
</style>
<![endif]-->
<!--[if lte mso 9]>
<style type="text/css">
.wrapper { width:600px !important; }
</style>
<![endif]-->
<!-- background starts -->
<table bgcolor="#395ebf" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<!-- wrapper starts -->
<table width="600" class="wrapper" align="center" cellpadding="20" cellspacing="0" style="border-collapse:collapse; margin:auto; width:auto; max-width:600px;">
<tr>
<td>
<div style="font-family:arial; font-size:13px; color:#ffffff;">Новые способы оплаты</div>
</td>
</tr>
</table>
<!-- wrapper ends -->
</td>
</tr>
</table>
<table bgcolor="#f4f4f4" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<!-- wrapper starts -->
<table width="600" class="wrapper" align="center" cellpadding="20" cellspacing="0" style="border-collapse:collapse; margin:auto; width:auto; max-width:600px;">
<tr>
<td style="padding:10px;">
<table width="100%" cellpadding="10" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td width="78">
<a href="http://www.sima-land.ru" target="_blank"><img src="images/logo.png" width="78" height="78" border="0"></a>
</td>
<td>
<div style="font-family:arial; font-size:24px; color:#395ebf; line-height:1.4em;">Сима Ленд</div>
<div style="font-family:arial; font-size:13px; color:#395ebf; line-height:1.4em;">
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Новинки</span></a>
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Скидки</span></a>
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Хиты продаж</span></a>
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Эксклюзив</span></a>
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Все по 10, 20, 30 рублей</span></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="shadow" bgcolor="#ffffff" style="box-shadow:#cccccc 1px 1px 3px;">
<div style="font-family:arial; font-size:24px; color:#666666; line-height:1.2em;">
Теперь оплачивать заказы стало еще проще
</div>
<br>
<div style="font-family:arial; font-size:14px; color:#666666; line-height:1.4em;">
У нас появилась дополнительная
форма оплаты банковской картой Visa, MasterCard. С подробной инструкцией
этого типа оплаты можно ознакомиться по этой <a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">ссылке</span></a>.
</div>
<br>
<div align="center">
<a href="#" target="_blank" style="text-decoration:none;">
<img border="0" src="images/cards.png">
</a>
</div>
</td>
</tr>
<tr>
<td style="padding:10px;">
<table class="flex-item" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td style="border:#f4f4f4 10px solid;">
<a href="#" target="_blank" style="text-decoration:none;">
<img width="270" style="display:block;" border="0" src="http://habrastorage.org/files/06d/ad8/db0/06dad8db0dbd4f29a6df2e60047c1523.jpg">
</a>
</td>
</tr>
</table>
<table class="flex-item" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td style="border:#f4f4f4 10px solid;">
<a href="#" target="_blank" style="text-decoration:none;">
<img width="270" style="display:block;" border="0" src="http://habrastorage.org/files/b63/f22/ce2/b63f22ce2a1f498bbd81509a22c5c5a8.jpg">
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="shadow" bgcolor="#ffffff" style="box-shadow:#cccccc 1px 1px 3px;">
<div style="font-family:arial; font-size:24px; color:#666666; line-height:1em;">
Все новинки вы можете <a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">посмотреть</span></a> у нас на сайте
</div>
<table width="160" class="flex-item" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td style="border-left:#ffffff 10px solid; border-right:#ffffff 15px solid;">
<a href="#" target="_blank" style="text-decoration:none;">
<img width="160" height="160" border="0" src="http://habrastorage.org/files/94c/549/e33/94c549e3301440a4b85c5fa06acebc4d.jpg">
</a>
</td>
</tr>
<tr>
<td>
<div align="center" style="font-family:arial; font-size:14px; color:#666666; line-height:1.4em;">
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Сумки и аксессуары</span></a>
</div>
</td>
</tr>
</table>
<table width="160" class="flex-item" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td style="border-left:#ffffff 15px solid; border-right:#ffffff 15px solid;">
<a href="#" target="_blank" style="text-decoration:none;">
<img width="160" height="160" border="0" src="http://habrastorage.org/files/bd1/652/52f/bd165252f7ba49ca97321bdc2b92a34d.jpg">
</a>
</td>
</tr>
<tr>
<td>
<div align="center" style="font-family:arial; font-size:14px; color:#666666; line-height:1.4em;">
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Банные пренадлежности</span></a>
</div>
</td>
</tr>
</table>
<table width="160" class="flex-item" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td style="border-left:#ffffff 15px solid; border-right:#ffffff 10px solid;">
<a href="#" target="_blank" style="text-decoration:none;">
<img width="160" height="160" border="0" src="http://habrastorage.org/files/0dd/20e/d41/0dd20ed4126541a696e0f2d9b6d93cdc.jpg">
</a>
</td>
</tr>
<tr>
<td>
<div align="center" style="font-family:arial; font-size:14px; color:#666666; line-height:1.4em;">
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Сувениры</span></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" style="padding:0;">
</td>
</tr>
<tr>
<td class="shadow" bgcolor="#ffffff" style="box-shadow:#cccccc 1px 1px 3px;">
<div style="font-family:arial; font-size:24px; color:#666666; line-height:1.2em;">
Для того чтобы воспользоваться этим типом оплаты, Вам необходимо:
</div>
<br>
<div style="font-family:arial; font-size:14px; color:#666666; line-height:1.4em;">
1. После отправки заказа, на странице выбора типа оплаты, Вам необходимо
выбрать пункт: «Оплатить банковской картой Visa или MasterCard»;<br><br>
2. Необходимо обратить внимание, что при данном типе оплаты, сумма счета за
заказ увеличивается на 3% (банковская комиссия);<br><br>
3. После проверки заказа оператором и менеджером (обычно от 15 минут до 12
часов в рабочие дни), в личном кабинете, рядом с заказом появится ссылка на
банковский шлюз;<br><br>
4. После перехода на шлюз, вам необходимо ввести корректные данные своей
банковской карты и нажать кнопку «Оплатить». Необходимо обратить внимание,
что оплата заказа должна поступить от лица, с которым заключен договор. В
противном случае, средства будут возвращены обратно на карту, либо вам
придется заключить договор на плательщика и отгрузка будет произведена на
него;<br><br>
5. С вашего счета будет списана сумма по счету за заказ. Максимум через 30
минут, менеджер получит информацию об успешной транзакции и сможет
отправить ваш заказ «на сборку»;<br><br>
6. После «сборки» заказа, если сумма «собранного» товара оказалась меньше
суммы оплаты по счету, остаток будет возвращен на карту плательщика.
Плюсы этого типа оплаты: время между оплатой и отправкой «на сборку» вашего
заказа составляет порядка 30 минут. Отсутствие переплат за счет возврата
средств по несобранным
</div>
</td>
</tr>
<tr>
<td style="padding:20px;">
<table width="280" class="flex-item" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td width="60" valign="top" style="border-right:#f4f4f4 10px solid;">
<img src="images/manager.jpg" width="60" height="80">
</td>
<td valign="top">
<div style="font-family:arial; font-size:18px; color:#666666; line-height:1.4em;">
<a href="#" target="_blank" style="color:#395ebf !important; font-size:18px;"><span style="color:#395ebf;">Зайцева Надежда</span></a>
</div>
<div style="font-family:arial; font-size:13px; color:#666666; line-height:1.6em;">
Менеджер по продажам<br>
г. Санкт-Петербург<br>
<a href="mailto:zaytseva@sima-land.ru" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">zaytseva@sima-land.ru</span></a><br>
+7 812 123 4567
</div>
<br>
</td>
</tr>
</table>
<table width="280" class="flex-item" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<div style="font-family:arial; font-size:18px; color:#666666; line-height:1.4em;">
Центральный офис:
</div>
<div style="font-family:arial; font-size:13px; color:#666666; line-height:1.6em;">
г. Екатеринбург, <br>
ул. Черняховского, 86, корпус 8,<br>
Тел.: 8 800 1000 260, 8 (343) 278-67-00
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding-top:0;">
<a href="#" target="_blank"><img width="32" height="32" border="0" src="images/ok.png"></a>
<a href="#" target="_blank"><img width="32" height="32" border="0" src="images/vk.png"></a>
<a href="#" target="_blank"><img width="32" height="32" border="0" src="images/tw.png"></a>
<a href="#" target="_blank"><img width="32" height="32" border="0" src="images/fb.png"></a>
<a href="#" target="_blank"><img width="32" height="32" border="0" src="images/lj.png"></a>
<a href="#" target="_blank"><img width="32" height="32" border="0" src="images/youtube.png"></a>
<br><br>
<div align="center" style="font-family:arial; font-size:14px; color:#666666; line-height:1.4em;">
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Условия работы</span></a>
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Доставка</span></a>
<a href="#" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">Отзывы о нас</span></a>
</div>
<br><br>
<div align="left" style="font-family:arial; font-size:14px; color:#666666; line-height:1.4em;">
Вы получаете эту рассылку, так как зарегистрированы на сайте <a href="http://www.sima-land.ru" target="_blank" style="color:#395ebf !important;"><span style="color:#395ebf;">www.sima-land.ru</span></a><br>
Чтобы отписаться от рассылки, перейдите по ссылке.<br>
Если у вас не открывается письмо, посмотрите его web-версию.
</div>
</td>
</tr>
</table>
<!-- wrapper ends -->
<br><br>
</td>
</tr>
</table>
<!-- background ends -->
Ну так код после инлайнера не надо читать. А find&replace он не всегда работает, если одинаковые стили в разных местах, а заменить нужно лишь в одном.
Если нужно заменить в одном, то берешь и меняешь ручками в одном, в чем проблема? Код после инлайнера надо не просто читать, а понимать, что там вообще происходит. Причем досконально. Иначе никогда не пофиксишь обнаруженный баг.
мне показалось, что основная тема поста, что новые технологии в разработке писем — это плохо, потому раз там таблицы, то и надо делать по старинке, все руками.
А между тем есть прекрасные инструменты типа: www.npmjs.org/package/generator-htmlemail
Если можно согласиться, что scss в принципе ни к чему, то писать стили инлайн, это плохо так как, если два элемента на странице повторяются, то это как минимум в два раза больше страницы, и в целом поддерживать и править письмо затратно.
Зачем отказываться от grunta тоже не совсем ясно, когда через него можно инлайнить, отправлять тестовые письма на нужные ящики и много другого еще навесить на него.
И хотелось бы аргументированный ответ на вопрос чем Litmus лучше EmailonAcid для вас?
А между тем есть прекрасные инструменты типа: www.npmjs.org/package/generator-htmlemail
Если можно согласиться, что scss в принципе ни к чему, то писать стили инлайн, это плохо так как, если два элемента на странице повторяются, то это как минимум в два раза больше страницы, и в целом поддерживать и править письмо затратно.
Зачем отказываться от grunta тоже не совсем ясно, когда через него можно инлайнить, отправлять тестовые письма на нужные ящики и много другого еще навесить на него.
И хотелось бы аргументированный ответ на вопрос чем Litmus лучше EmailonAcid для вас?
Основная тема поста в том, чтобы показать реально работающие вещи. Последние два года я занимаюсь только письмами. Это аргумент в пользу того, что я знаю о чем говорю и каждый день делаю не один макет рассылки. Инлайновый код пишется просто и быстро. Поддерживается тоже очень просто. Проверено сотнями шаблонов.
Литмус ничем не лучше асида в принципе. Лично я использую литмус по большому счету для проверки аултука. Особенно капризная 2007 версия, для которой используется ряд хаков, которые надо постоянно тестить.
Литмус ничем не лучше асида в принципе. Лично я использую литмус по большому счету для проверки аултука. Особенно капризная 2007 версия, для которой используется ряд хаков, которые надо постоянно тестить.
Я от оформительской деятельности далёк, я скорее потребитель этих рассылок, но вот скажите мне, пожалуйста, никакое руководство не говорит, что письма неплохо бы отправлять согласно RFC822? Ну хорошо, RFC2822. Хотя бы опционально.
Просто меня ужасно огорчает, когда мне насильно, без возможности выбора, начинают слать письма в html. Я всё равно читаю их GNUS'ом. И рендерятся они через elinks --dump. В черно-белый текст. И отображаются моноширинным шрифтом.
Ну вот правда, мне абсолютно плевать на все ухищрения дизайна, тонкости html, цвета, шрифты, css, картинки.
Я просто хочу прочитать своё письмо. Ну пожалуйста.
Надоело сохранять письмо в отдельный файл и открывать браузером.
Просто меня ужасно огорчает, когда мне насильно, без возможности выбора, начинают слать письма в html. Я всё равно читаю их GNUS'ом. И рендерятся они через elinks --dump. В черно-белый текст. И отображаются моноширинным шрифтом.
Ну вот правда, мне абсолютно плевать на все ухищрения дизайна, тонкости html, цвета, шрифты, css, картинки.
Я просто хочу прочитать своё письмо. Ну пожалуйста.
Надоело сохранять письмо в отдельный файл и открывать браузером.
— Ноутбук с Windows
— MacBook Pro
— iPod пятого поколения (retina)
— iPad mini (retina)
— Sony XPeria Z
— Nokia X
Супер!
Покажу вашу статью начальству со словами — и это только чтобы письмо нормально сверстать! А ещё мне нужно…
Поделитесь секретами верстки под Mailbox, с ним не все так гладко, вроде бы современное приложение, а вылезают какие-то непонятные глюки в адаптивных письмах.
У mailbox и sparrow под iOS есть неприятная мелочь. У всех писем есть 10px белый отступ слева, который никак не убрать. В остальным я не вижу никаких проблем. К тому же десктопный mailbox сейчас в состоянии активной разработки и в нем может много чего меняться с обновлениями. Приведите примеры непонятных глюков, посмотрим что с ним не так.
Sign up to leave a comment.
Workspace для разработки писем