Написание данного поста навеяно недавней поистине шикарной работой, Niсole Merlin. Во многом ее методика верстки схожа с моей и мне радостно от того, что это направление развивается теперь и на западе. Чем же этот способ так хорош? Все очень просто. Не нужно объяснять как важно адаптировать под мобильные платформы сверстанные письма для того, чтобы они были прочтены. Читать простыни на телефоне мало кто будет. Что же все это время делал западный разработчик? Он верстал табличной версткой с элементами блочности, затем причесывал этот код медиазапросами для поддержки мобильников. Чем этот подход ущербен? А тем, что ни на андроиде, ни на яблоке медиазапросы не поддерживаются следующими почтовыми клиентами: Gmail, Yandex, Mail.ru. По большому счету западные коллеги могли бы и наплевать на яндекс с мейлом, но вот Gmail как ни крути первый среди почтовиков.
Для Nicole Merlin это стало очевидно и она разработала свою методику, которая основывается на резиновой верстке с минимальным использованием медиазапросов(progressive enhancement) и это работает! Но немного не так как хотелось бы нам в России. Вся резиновость автора держится на inline-block элементах и оперированием max-width. Но вот беда-то, наши ребята из яндекса и мейла max-width не поддерживают. Сначала я расскажу об отличиях моего подхода от приемов Nicole, а затем плавно перейду к своим мыслям и примерам кода, которые стоит использовать при подготовке писем.
А теперь давайте рассмотрим изображение выше. В первом случае мы видим расстановку блоков, которую мы получим, применив на практике советы Nicole. На втором скрине — мой вариант для почтовых клиентов, которые не поддерживают медиазапросы. Третий — для всех остальных нормальных почтовых клиентов.
С первого взгляда можно подумать, что мой вариант немного проигрывает, но я поддерживаю отечественные почтовики. А это весомый плюс.
Теперь поговорим непосредственно о верстке. Nicole использует классический метод верстки, к которому привыкло большинство верстальщиков. Т.е. он стоит DOM с именованием классами и пишет стили во внешнем файле, после чего прогоняет написанное через CSS инлайнер. Плюс такого подхода заключается в том, что такой код писать проще для тех, кто привык верстать обычные сайты. Минус же очень весомый — DOM усложняется лишними элементами. А делается все это во имя упрощения разработки. Но простота эта заметна только после полного понимания методики. Осваивать ее крайне тяжело.
В моем случае все гораздо проще. Я сразу пишу инлайн код. Это может быть немного непривычно поначалу, но к этому быстро привыкаешь. Весь код у тебя всегда перед глазами и ты четко понимаешь, что будет происходить. Благодаря этому не нужно усложнять дерево тегов. Пускай глаз немного и засоряется стилями, зато дерево наглядно и понятно.
В моем случае верстка не всегда резиновая. Иногда она имеет фиксированные элементы. В этом случае надо понимать с какими размерами экранов придется иметь дело. Прежде всего стоит понимать, что если у пятого айфона ширина дисплея равна 640px, это еще не значит, что в почтовом клиенте она будет соответствовать этому значению. Мобильные почтовики используют свои значения для вычисления ширины и высоты. Самой распространенной шириной экрана в мобильниых почтовиках является значение 320px(портретная ориентация). Но она имеет свойство варьироваться от 300px(яндекс почта android) до 600px(любой планшет или некоторые лопатные телефоны). Если говорить о ландшафтной ориентации, то обэтом беспокоиться особого смысла нет. Тут речь идет о цифрах от 480 до более чем 600px. Так вот, если в ландшафте мы имеем менее 600px, то поверьте, на таком экране(в этой ориентации) читать письмо будет просто неудобно(крайне низкая вертикаль), поэтому тут будет работать обычная 300px адаптация. А если у нас в ландшафте 600 и более, то мы показываем обычную фиксированную 600px версию письма.
К чему я все это рассказываю. Для двухколоночных элементов в верстке будут использоваться фиксированные значения в 300px. Предыдущий абзац как раз и объясняет откуда взялось это значение.
Если вдруг вы хотите протестировать рабочее разрешение своего мобильного почтового клиента, можете отправить себе на почту вот такой тест:
Первое изображение укажет на ширину рабочей области почтового клиента. Второе на поддержку клиентом медиазапросов.
Примите к сведению:
— Для заголовков можно использовать теги h1-h6, если вас не беспокоят их верхние отступы. Мне, например не нравится поведение заголовка в блоке, для которого задан верхний padding.
— Для абзацев можно использовать div вместо p, но в таком случае отбивайте их друг от друга через br. Мне больше нравится абзацная отбивка.
— line-height работает ТОЛЬКО для блочных элементов. Используйте его для заголовков, абзацев и div блоков. В принципе можно использовать для ячеек таблицы, но я предпочитаю не засорять ее форматированием.
— Насчет списка. Поведение UL я еще до конца не изучил. Оно крайне непредсказуемо. Лучше использовать абзацы. Маркеры можно выполнить юникодом. Единственное, что вам может не понравиться: вторая строчка элемента списка будет падать под знак маркера, а не справа от него. На мой взгляд решение с абзацами самое оптимальное. Если хотите супер-пиксель-перфект список, рисуйе сложную таблицу. Но это правда не стоит того.
— Для выравнивания текста или одного элемента используйте атрибут align тега div
— Для выравнивания таблицы указывайте align для самой таблицы
— Для выравнивания потока элементов указывайте align для ячейки таблицы, в которой они находятся
Информация которую вы прочли вполне позволит вам сделать адаптивное информационное письмо без изысков в виде мультиколоночности, оптимизации ретины и прочих свистоперделок. В следующих топиках я планирую рассказать о картинках, ссылках, кнопках, многоколоночной верстке, и реальных примерах с их нюансами. Поэтому джите еще 2-3 топика. Стэй тюнд, как говорится. На любые вопросы по теме отвечу в комментариях или обращайтесь лично.
Для Nicole Merlin это стало очевидно и она разработала свою методику, которая основывается на резиновой верстке с минимальным использованием медиазапросов(progressive enhancement) и это работает! Но немного не так как хотелось бы нам в России. Вся резиновость автора держится на inline-block элементах и оперированием max-width. Но вот беда-то, наши ребята из яндекса и мейла max-width не поддерживают. Сначала я расскажу об отличиях моего подхода от приемов Nicole, а затем плавно перейду к своим мыслям и примерам кода, которые стоит использовать при подготовке писем.
А теперь давайте рассмотрим изображение выше. В первом случае мы видим расстановку блоков, которую мы получим, применив на практике советы Nicole. На втором скрине — мой вариант для почтовых клиентов, которые не поддерживают медиазапросы. Третий — для всех остальных нормальных почтовых клиентов.
С первого взгляда можно подумать, что мой вариант немного проигрывает, но я поддерживаю отечественные почтовики. А это весомый плюс.
Теперь поговорим непосредственно о верстке. Nicole использует классический метод верстки, к которому привыкло большинство верстальщиков. Т.е. он стоит DOM с именованием классами и пишет стили во внешнем файле, после чего прогоняет написанное через CSS инлайнер. Плюс такого подхода заключается в том, что такой код писать проще для тех, кто привык верстать обычные сайты. Минус же очень весомый — DOM усложняется лишними элементами. А делается все это во имя упрощения разработки. Но простота эта заметна только после полного понимания методики. Осваивать ее крайне тяжело.
В моем случае все гораздо проще. Я сразу пишу инлайн код. Это может быть немного непривычно поначалу, но к этому быстро привыкаешь. Весь код у тебя всегда перед глазами и ты четко понимаешь, что будет происходить. Благодаря этому не нужно усложнять дерево тегов. Пускай глаз немного и засоряется стилями, зато дерево наглядно и понятно.
Об экранах смартфонов
В моем случае верстка не всегда резиновая. Иногда она имеет фиксированные элементы. В этом случае надо понимать с какими размерами экранов придется иметь дело. Прежде всего стоит понимать, что если у пятого айфона ширина дисплея равна 640px, это еще не значит, что в почтовом клиенте она будет соответствовать этому значению. Мобильные почтовики используют свои значения для вычисления ширины и высоты. Самой распространенной шириной экрана в мобильниых почтовиках является значение 320px(портретная ориентация). Но она имеет свойство варьироваться от 300px(яндекс почта android) до 600px(любой планшет или некоторые лопатные телефоны). Если говорить о ландшафтной ориентации, то обэтом беспокоиться особого смысла нет. Тут речь идет о цифрах от 480 до более чем 600px. Так вот, если в ландшафте мы имеем менее 600px, то поверьте, на таком экране(в этой ориентации) читать письмо будет просто неудобно(крайне низкая вертикаль), поэтому тут будет работать обычная 300px адаптация. А если у нас в ландшафте 600 и более, то мы показываем обычную фиксированную 600px версию письма.
К чему я все это рассказываю. Для двухколоночных элементов в верстке будут использоваться фиксированные значения в 300px. Предыдущий абзац как раз и объясняет откуда взялось это значение.
Если вдруг вы хотите протестировать рабочее разрешение своего мобильного почтового клиента, можете отправить себе на почту вот такой тест:
Заголовок спойлера
<style>
body { margin:0; }
@media only screen and (max-width: 600px) {
img[class="image"] { width:50% !important; height: auto !important; }
}
</style>
<img src="http://placehold.it/300x150" width="300" height="150"><br>
<img src="http://placehold.it/300x150" width="300" height="150" class="image">Первое изображение укажет на ширину рабочей области почтового клиента. Второе на поддержку клиентом медиазапросов.
Wrapper. Он же — обертка письма
<meta charset="utf-8">
<style>
body { margin:0; }
@media only screen and (min-width: 600px) {
/* На всякий случай зададим ширину обертки для экранов более, чем 600px. Для клиентов, которые поддерживают медиазапросы. */
.wrapper { width:600px !important; }
}
@media only screen and (max-width: 600px) {
/* Сюда пишем медиазапросы для экранов менее 600px по ширине */
}
</style>
<!--[if gte mso 9]>
<style>
.wrapper { width:600px !important; } /* Задаем ширину обертки для Аутлука */
.flex-item { width:100% !important; } /* Хак для для двухколоночной верстки в Аутлуке */
</style>
<![endif]-->
<!--[if lte mso 9]>
<style type="text/css">
.wrapper { width:600px !important; } /* Задаем ширину обертки для другого Аутлука, в котором нет проблемы с двухколоночной версткой */
</style>
<![endif]-->
<!-- Прежде всего объявим таблицу, для которой можно указать общий фон письма -->
<table bgcolor="#eeeeee" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<!-- Непосредственно обертка. Атоматическая ширина для мобильников. Максимальная для десктопов. Всегда коллапсируем таблицы для Аутлука. -->
<table width="600" class="wrapper" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" style="border-collapse:collapse; margin:auto; width:auto; max-width:600px;">
<tr>
<td>
Newsletter content here...
</td>
</tr>
</table>
</td>
</tr>
</table>Типографика
<div style="font-family:arial; font-size:24px; color:#000000; line-height:1.2em;">
<b>Заголовок первого уровня</b>
</div>
<div style="font-family:arial; font-size:18px; color:#000000; line-height:1.2em;">
<b>Заголовок второго уровня</b>
</div>
<div style="font-family:arial; font-size:16px; color:#000000; line-height:1.2em;">
<b>Заголовок третьего уровня</b>
</div>
<p style="font-family:arial; font-size:14px; color:#000000; line-height:1.4em;">
Текстовый абзац, в котором присутствует <b>жирный текст</b>, <i>курсив</i> и даже <s>перечеркнутый текст</s>. А еще можно сделать его <span style="color:#ff0000">красным</span> или <span style="font-size:16px;">другого размера</span>.
</p>
<p style="font-family:arial; font-size:13px; color:#000000; line-height:1.4em;">
<span style="color:#ff0000;">– </span> Да-да, все верно
</p>
<p style="font-family:arial; font-size:13px; color:#000000; line-height:1.4em;">
<span style="color:#ff0000;">– </span> Это маркированный список
</p>
<p style="font-family:arial; font-size:13px; color:#000000; line-height:1.4em;">
<span style="color:#ff0000;">– </span> И лучше всего его делать именно таким образом
</p>
Примите к сведению:
— Для заголовков можно использовать теги h1-h6, если вас не беспокоят их верхние отступы. Мне, например не нравится поведение заголовка в блоке, для которого задан верхний padding.
— Для абзацев можно использовать div вместо p, но в таком случае отбивайте их друг от друга через br. Мне больше нравится абзацная отбивка.
— line-height работает ТОЛЬКО для блочных элементов. Используйте его для заголовков, абзацев и div блоков. В принципе можно использовать для ячеек таблицы, но я предпочитаю не засорять ее форматированием.
— Насчет списка. Поведение UL я еще до конца не изучил. Оно крайне непредсказуемо. Лучше использовать абзацы. Маркеры можно выполнить юникодом. Единственное, что вам может не понравиться: вторая строчка элемента списка будет падать под знак маркера, а не справа от него. На мой взгляд решение с абзацами самое оптимальное. Если хотите супер-пиксель-перфект список, рисуйе сложную таблицу. Но это правда не стоит того.
— Для выравнивания текста или одного элемента используйте атрибут align тега div
— Для выравнивания таблицы указывайте align для самой таблицы
— Для выравнивания потока элементов указывайте align для ячейки таблицы, в которой они находятся
Продолжение следует
Информация которую вы прочли вполне позволит вам сделать адаптивное информационное письмо без изысков в виде мультиколоночности, оптимизации ретины и прочих свистоперделок. В следующих топиках я планирую рассказать о картинках, ссылках, кнопках, многоколоночной верстке, и реальных примерах с их нюансами. Поэтому джите еще 2-3 топика. Стэй тюнд, как говорится. На любые вопросы по теме отвечу в комментариях или обращайтесь лично.
Комментарии (8)
ave
30.06.2015 19:29Симпатичная девушка по имени Nicole Merlin (через «с», а не «k») — вовсе не «он», а очень даже «она».
BupycNet
Боже. Почему, когда я начал заниматься push-уведомлениями, всех потянуло на письма? Весь хабр и спарк завалены почтовыми рассылками, видео в почте, адаптации для почты, оптимизация почтовых рассылок и т.д. Такое чувство, что я попал в 2005 год. Не ну почта конечно хорошая вещь, но это уже больше похоже на то, как будто почтовые спамеры эволюционируют в бизнес-сферу и предлагают завуалированный спам для компаний и их клиентов.
Самая большая проблема тут, что когда таких компаний штук 10-20, эти все письма будут просто удаляться из ящика пользователя даже без какого либо прочтения.
Мне на почту каждый день в папку промоакций сыпется около 10 писем — все удаляю. Бесполезные и ненужные.
Самое полезные письма — личные сообщения и ответы на комментарии и посты. Остальное не читаю и думаю многие тоже. На телефоне вообще чаще всего почта читается не так уж и много, лишь полезные письма, читать такие вещи как рассылки со скидками врядли кто будет.
dudeonthehorse Автор
Меня потянуло на письма уже 5 лет как. И я по мере появления новых нюансов пишу об этом здесь. Печкин пиарит свой сервис, поставив на поток перевод западных статей. Своего родного контента он не производит. Ну а больше никто рассылками особенно и не озабочен. Есть лишь редкие переводы и авторские топики других людей.
В 2005 году кроме говноспама и посредственных авторских рассылок ничего не было.
Количество ровным счетом ничего не меняет. Заинтересованный получатель читает ровно то, что ему нужно и интересно. Хомяк схавает все. Средний человек будет удалять большинство писем без прочтения. Авторы рассылок будут получать прибыль. Все счастливы. Проблемы нет.
А мне 50. И че?
Ваша лодка подана, капитан. Но я предпочитаю оформленные триггерные сообщения, нежели голый текст. Например уведомления о пополнении счета в ЯД. Я привык к их оформленному письму, я вижу их логотип и глаз сразу падает куда надо для нахождения нужной мне информации(сумма пополнения/баланс). То, что кажется визуальным шумом с первого взгляда на деле является удобным интерфейсом благодаря которому мне даже весь текст письма вычитывать не приходится.
Это если судить объективно. Но есть такая категория людей, которые в повседневной жизни тупо мало пользуются компьютером/ноутбуком. Но у них всегда при себе айфончик. Они могут ехать с ним в метро, сидеть в очереди, ждать девушку в кафе, убивать время в парке и много еще чего. И вот в том момент когда мотать ленту вконтактика уже надоело наступает момент расчистки почты. И так как надо убить время можно ее еще и почитать, а не только поудалять. Так и хавается маркетинговый буллшит. Пример с женскими купоновыми сервисами, думаю, разжевывать не нужно.
А че боже-то? Похоронили письма как маркетинговый инструмент? А компании продолжают этим заниматься, вот дурашки-то. Видать в убыток работают. Ну а аргумент в духе «вы фсе спамиры, ко-ко-ко, только плейн текст, аштыэмел должын умиреть» — это уже старо и даже перестало быть забавным.
Такой момент присутствует, но не везде. А меня это мало заботит. Мне нравится делать максимально качественную верстку писем. Это спортивный интерес. Куда интереснее верстать под over 30 почтовиков, чем под 5 браузеров. А если даже представить, что я верстаю рассылку для говноспамера, или мои топики прочтет говноспамер, то от этого хуже не станет уж точно. Как минимум говноспам будет сверстан хорошо, а не будет вызывать рвотные порывы.
BupycNet
Вот тут я с вами полностью согласен. Вы видимо на спарке не сидели, там 50% постов о рассылках. Т.е. куча стартапов появилось по рассылкам. И статьи такие как будто Email это самое оптимальное что может быть, и что это нужно всем и всегда работает. Ни одной статьи вроде «Почему Email рассылки иногда не работают» не было.
Как раз это я и имею в виду как полезные письма.
Просто на самом деле, все полезно в меру. сейчас столько статей, что я уже предвижу, что после того, как где то укажу почту, мне будет литься куча писем, отписаться от которых можно будет только убрав 10-20 галочек.
Лично к вам я ничего негативного не имею, и статья по верстке достаточно полезна. Даже учитывая моё предыдущее сообщение. пусть эти письма хоть хорошо выглядят, раз уж мне их будут присылать.
dudeonthehorse Автор
Спарк действительно прошел мимо меня. Спасибо, изучу. Раздел или хаб(тег?) по письмам не подскажете, дабы долго не искать? Или прямо можно смело всю ленту смотреть, не промахнусь?
Про 20 галочек правда уже похоже на детскую страшилку. Да такое было, но в последний раз я это встречал года 2 назад, да и то не часто.
BupycNet
Да проще весь спарк смотреть. Каждый день новый пост про рассылки по почте :)
dudeonthehorse Автор
Изучил. Слабенько. Большинство контента либо устарело, либо просто кросспостинг уже давно прочитанных статей. А жаль. Я искал новый авторский контент. Но все равно спасибо.