По-настоящему адаптивные письма. Часть первая
Написание данного поста навеяно недавней поистине шикарной работой, Niсole Merlin. Во многом его методика верстки схожа с моей и мне радостно от того, что это направление развивается теперь и на западе. Чем же этот способ так хорош? Все очень просто. Не нужно объяснять как важно адаптировать под мобильные платформы сверстанные письма для того, чтобы они были прочтены. Читать простыни на телефоне мало кто будет. Что же все это время делал западный разработчик? Он верстал табличной версткой с элементами блочности, затем причесывал этот код медиазапросами для поддержки мобильников. Чем этот подход ущербен? А тем, что ни на андроиде, ни на яблоке медиазапросы не поддерживаются следующими почтовыми клиентами: Gmail, Yandex, Mail.ru. По большому счету западные коллеги могли бы и наплевать на яндекс с мейлом, но вот Gmail как ни крути первый среди почтовиков.
Для Nicole Merlin это стало очевидно и она разработала свою методику, которая основывается на резиновой верстке с минимальным использованием медиазапросов (progressive enhancement) и это работает! Но немного не так как хотелось бы нам в России. Вся резиновость автора держится на inline-block элементах и оперированием max-width. Но вот беда-то, наши ребята из яндекса и мейла max-width не поддерживают. Сначала я расскажу об отличиях моего подхода от приемов Nicole, а затем плавно перейду к своим мыслям и примерам кода, которые стоит использовать при подготовке писем.
А теперь давайте рассмотрим изображение выше. В первом случае мы видим расстановку блоков, которую мы получим, применив на практике советы Nicole. На втором скрине — мой вариант для почтовых клиентов, которые не поддерживают медиазапросы. Третий — для всех остальных нормальных почтовых клиентов.
С первого взгляда можно подумать, что мой вариант немного проигрывает, но я поддерживаю отечественные почтовики. А это весомый плюс.
Теперь поговорим непосредственно о верстке. Nicole использует классический метод верстки, к которому привыкло большинство верстальщиков. Т.е. он стоит DOM с именованием классами и пишет стили во внешнем файле, после чего прогоняет написанное через CSS инлайнер. Плюс такого подхода заключается в том, что такой код писать проще для тех, кто привык верстать обычные сайты. Минус же очень весомый — DOM усложняется лишними элементами. А делается все это во имя упрощения разработки. Но простота эта заметна только после полного понимания методики. Осваивать ее крайне тяжело.
В моем случае все гораздо проще. Я сразу пишу инлайн код. Это может быть немного непривычно поначалу, но к этому быстро привыкаешь. Весь код у тебя всегда перед глазами и ты четко понимаешь, что будет происходить. Благодаря этому не нужно усложнять дерево тегов. Пускай глаз немного и засоряется стилями, зато дерево наглядно и понятно.
Об экранах смартфонов
В моем случае верстка не всегда резиновая. Иногда она имеет фиксированные элементы. В этом случае надо понимать с какими размерами экранов придется иметь дело. Прежде всего стоит понимать, что если у пятого айфона ширина дисплея равна 640 px, это еще не значит, что в почтовом клиенте она будет соответствовать этому значению. Мобильные почтовики используют свои значения для вычисления ширины и высоты. Самой распространенной шириной экрана в мобильниых почтовиках является значение 320 px (портретная ориентация). Но она имеет свойство варьироваться от 300 px (яндекс почта android) до 600 px (любой планшет или некоторые лопатные телефоны). Если говорить о ландшафтной ориентации, то обэтом беспокоиться особого смысла нет. Тут речь идет о цифрах от 480 до более чем 600 px. Так вот, если в ландшафте мы имеем менее 600 px, то поверьте, на таком экране (в этой ориентации) читать письмо будет просто неудобно (крайне низкая вертикаль), поэтому тут будет работать обычная 300 px адаптация. А если у нас в ландшафте 600 и более, то мы показываем обычную фиксированную 600 px версию письма.
К чему я все это рассказываю. Для двухколоночных элементов в верстке будут использоваться фиксированные значения в 300 px. Предыдущий абзац как раз и объясняет откуда взялось это значение.
Если вдруг вы хотите протестировать рабочее разрешение своего мобильного почтового клиента, можете отправить себе на почту вот такой тест:
Первое изображение укажет на ширину рабочей области почтового клиента. Второе на поддержку клиентом медиазапросов.
Wrapper. Он же — обертка письма
Newsletter content here...
Типографика
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Текстовый абзац, в котором присутствует жирный текст, курсив и даже перечеркнутый текст. А еще можно сделать его красным или другого размера.
– Да-да, все верно
– Это маркированный список
– И лучше всего его делать именно таким образом
Примите к сведению:
— Для заголовков можно использовать теги h1-h6, если вас не беспокоят их верхние отступы. Мне, например не нравится поведение заголовка в блоке, для которого задан верхний padding.
— Для абзацев можно использовать div вместо p, но в таком случае отбивайте их друг от друга через br. Мне больше нравится абзацная отбивка.
— line-height работает ТОЛЬКО для блочных элементов. Используйте его для заголовков, абзацев и div блоков. В принципе можно использовать для ячеек таблицы, но я предпочитаю не засорять ее форматированием.
— Насчет списка. Поведение UL я еще до конца не изучил. Оно крайне непредсказуемо. Лучше использовать абзацы. Маркеры можно выполнить юникодом. Единственное, что вам может не понравиться: вторая строчка элемента списка будет падать под знак маркера, а не справа от него. На мой взгляд решение с абзацами самое оптимальное. Если хотите супер-пиксель-перфект список, рисуйе сложную таблицу. Но это правда не стоит того.
— Для выравнивания текста или одного элемента используйте атрибут align тега div
— Для выравнивания таблицы указывайте align для самой таблицы
— Для выравнивания потока элементов указывайте align для ячейки таблицы, в которой они находятся
Продолжение следует
Информация которую вы прочли вполне позволит вам сделать адаптивное информационное письмо без изысков в виде мультиколоночности, оптимизации ретины и прочих свистоперделок. В следующих топиках я планирую рассказать о картинках, ссылках, кнопках, многоколоночной верстке, и реальных примерах с их нюансами. Поэтому джите еще 2–3 топика. Стэй тюнд, как говорится. На любые вопросы по теме отвечу в комментариях или обращайтесь лично.
