Pull to refresh

По-настоящему адаптивные письма. Часть первая

CSS *HTML *Email layout *
Написание данного поста навеяно недавней поистине шикарной работой, 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. Предыдущий абзац как раз и объясняет откуда взялось это значение.

Если вдруг вы хотите протестировать рабочее разрешение своего мобильного почтового клиента, можете отправить себе на почту вот такой тест:
Заголовок спойлера
<style>
	body { margin:0; }
	@media only screen and (max-width: 600px) {
		img[class="image"] { width:50% !important; height: auto !important; }
	}
</style>
<img src="1450830405849711624888" width="300" height="150"><br>
<img src="1450830405849711624888" 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 топика. Стэй тюнд, как говорится. На любые вопросы по теме отвечу в комментариях или обращайтесь лично.
Tags:
Hubs:
Total votes 14: ↑11 and ↓3 +8
Views 20K
Comments Comments 8