Вёрстка адаптивных email. Адаптивные email-письма без боли и страданий

Суть адаптивной верстки заключается в том, что электронное письмо само подстраивается под ширину различных устройств.

Очевидно, что ширина монитора компьютера и смартфона разная. Письмо может отлично выглядеть на мониторе, но если оно фиксировано по ширине, то это же письмо на айфоне придется увеличивать, чтобы прочитать мелкий текст. Также на смартфоне кнопки будут очень мелкими. Их будет неудобно нажимать. А это — снижение конверсии и потеря клиентов.

Сравните. Эффективная ширина письма на компьютере 600-650px. На айфоне 320px. На HTC 480px.

На скриншотах ниже - яркий пример того, как мы с помощью адаптивной верстки облегчили жизнь подписчиков:

Теперь подписчикам не нужно двигать пальцами по экрану, чтобы увеличить письмо.

Как это делается?

Делается это с помощью правила @media, которое позволяет указывать тип устройства, для которого будут применяться указанные стили. Для мобильных устройств указывается правило следующего типа:

width: 320px !important; } … }

Это правило прописывается внутри тега , и распространяется только на устройства, ширина которых не превышает 480px.
Внутри этого правила в первую очередь указывается ширина основного блока, или ширина таблицы и ее ячейки.В нашем случае мы задали ширину в 320px, что соответствует ширине Айфона. На устройствах с большим разрешением, которое не превышает 480px, отображается все точно так же. К примеру, на скриншоте с HTC, разрешение экрана которого равно 480px, видно, письмо выглядит так же, как и на iPhone.
После того, как мы указали ширину основного блока, мы можем приступить к указанию стилей для других элементов: для текста, картинок, для некоторых блоков и ячеек.

Пример использования стилей:

@media only screen and (max-device-width: 480px) {
table, td {
width: 320px !important; }
td {
font-size:18px !important;
line-height:22px !important; }
img {
width:130px !important;
height:56px !important; }
td {
display:none !important; } }

Посмотреть все стили, которые поддерживаются системами Apple iPhone и Android 2.3, можно в таблице по ссылке: http://www.campaignmonitor.com/css/

Ограничения

Сложности в реализации адаптивной верстки могут возникнуть в двух случаях:

Случай 1

Если блок c текстом (или изображениями) фиксированного размера и не может тянуться по высоте. Яркий пример - блок, ограниченный размерами фона.
Если мы захотим уменьшить такой блок до ширины в 320px, то вместе с шириной уменьшится и высота, и содержимое блока просто не поместится в границы письма.

Случай 2

Если в письме не будет свободного пространства, куда могли бы тянуться текст и изображения. При отрисовке письма необходимо понимать, что в адаптивном дизайне ширина будет уменьшаться, а содержимое письма наоборот — увеличиваться. В связи с этим, содержимое письма может просто не уместиться на странице, или же уменьшится до такой степени, что ничего нельзя будет разглядеть на телефоне.

С каждым годом доля писем, просмотренных на смартфонах растет и уже достигает трети. Адаптивная верстка — простой способ ответить на этот вызов и первым завоевать мобильную аудиторию.

Расскажем об особенностях верстки email шаблонов - в чем основные проблемы верстки, как работать с мультимедиа, шрифтами и адаптивностью. И все это с примерами кода.

Самые популярные почтовые платформы

Разнообразие почтовых клиентов и движков рендеринга приводит к необходимости использования универсальных подходов. В частности, это значит, что вместо использования