Первый пост был написан скорей на эмоциях. Метод Николь мне показался местами несостоятельным и громоздким, но стоит признать, что он во многом превосходит мои наработки и отныне я с удовольствием перенимаю ее приемы. Тем не менее Николь сделала легкие огрехи, которые я исправил. Также я убираю лишний мусор и экспериментирую с универсальными решениями для типичных задач при верстке.
К чему мы приходим:
— Использование внешних стилей и последующий прогон кода через инлайнер. Из-за усложнения кода это стало целесообразным
— Улучшение семантики через именование классов и сокращение участков кода
— Частичная поддержка the Bat! Хотя Николь на него забила.
— Полная поддержка всех мобильных почтовых клиентов
— Использование ранее опасных конструкций. Благодаря усердному тестированию проблемы решены.
Давайте обрисуем новую обертку письма(Github):
<meta charset="utf-8"> <style> body { margin:0; } /* здесь будут общие стили нашего письма */ .content { background-color:#ffffff; } .newsletter { margin: 0 auto; max-width: 600px; } .wrapper { width: 100%; background-color:#f4f4f4; table-layout: fixed; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } @media only screen and (max-width: 400px) { /* причесываем верстку на малых мобильных экранах */ } @media screen and (min-width: 401px) and (max-width: 600px) { /* причесываем верстку на средних мобильных экранах */ } @media screen and (min-width: 600px) { .newsletter { width:600px !important; } } </style> <!--[if (gte mso 9)|(IE)]> <style> /* здесь будут располагаться хаки для аутлука */ </style> <![endif]--> <div align="center" class="wrapper"> <!--[if (gte mso 9)|(IE)]> <table align="center" width="600" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"><tr><td> <![endif]--> <table class="newsletter" align="center" width="100%" cellpadding="30" cellspacing="0"> <tr> <td class="content" style="width:600px !important;"> контент письма </td> </tr> </table> <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> </div> А теперь я расскажу что в ней и как:
— В первую очередь чтоит отметить, что нам не нужны doctype, head и body. Без доктайпа поведение писем аналогично везде и не приносит сюрпризов. Head просто бесполезен. Ну а body все равно будет вырезан большинством почтовых вебморд. Именно по этой причине мы не задаем общий фон письма через body.
— Блок .wrapper является обшей оберткой с указанием цвета фона, посему задаем ему фон и несколько css свойств для избежания непредсказуемого поведения.
— Таблица .newsletter — непосредственно отцентрированное письмо. Для его родителя .wrapper мы указали значение center для атрибута align, чтобы в yahoo mail наша таблица была отцентрирована. Стоит понимать, что в будушем для выравнивания любых таблиц необходимо оборачивать их дивами с указанным выравниванием. При этом не забываем указывать выравнивание для самой таблицы. Для .newsletter мы указали ширину в 100% через инлайн для верности, при этом указали max-width:600px для получения адаптивности. Но это свойство не работает в аутлуке и в the bat! Для решения проблемы с аутлуком мы нарисовали дополнительную таблицу, которая является родителем нашего .newsletter.
— Ячейка .content уже является частью письма. Для нее мы указали background-color:#ffffff в сss для задания белого фона письма в отличие от серого фона подложки. Мы явно указали width:600px !important; для решения проблемы the bat!, который не поддерживает max-width, получив 600px ширину письма в бате.
ссылка на оригинал статьи http://habrahabr.ru/post/262427/
Добавить комментарий