Как верстать email письма. Часть 2

Как верстать email письма. Часть 1
Фреймворк или готовое решение для интернет-магазина?

Примерно половина писем в мире открывается с мобильных устройств. Если смотреть почтовые клиенты по популярности, то первое место занимает iPhone, доля которого составляет 31%, на iPad приходится 11%, а Android 4%. Суммарно, почти половина. А ведь есть еще и другие ОС.

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

Существует два типа адаптивных писем - в одну колонку и в несколько. Первые верстать проще всего. Достаточно обеспечить изменение ширины макета в зависимости от размеров экрана устройства, на котором его открыли.

Разметка такого письма будет примерно такой

<table cellspacing="0" cellpadding="0" border="0" width="600"><!-- тут текст письма --></table>

В последние годы появилась возможность отказаться от использования таблиц в таких простых письмах

<div style="max-width:600px;margin:auto;padding:20px;"><!-- тут текст письма --></div>

С более сложными макетами проблем больше. Если на десктопе нам под подходит отображение в несколько колонок, то на мобильном устройстве, колонки должны отображаться друг под другом. Добиваться придется этого с помощью таблиц, а помогать будет свойство align=”left”

С изменением размеров экрана, нам нужно менять размеры колонок. Примерные стили будут следующими:

table[class="body_table"] {
	width: 600px;
}
table[class="column_table"] {
	width: 180px;
}
table[class="spacer_table"] {
	width: 30px;
	height:30px;
}
@media only screen and (max-width: 480px) {
	table[class="body_table"] {
		width: 420px!important;
	}
table[class="column_table"] {
		width: 100%!important;
	}
}

Есть и второй способ работы с многоколоночными макетами. Можно воспользоваться свойством display. Но, есть ограничения - не все почтовые клиенты поддерживают медиа запросы.

Резиновая верстка

Для ее создания используют дополнительные теги блоков, которым прописывают свойство max-width, как в примере выше. С адаптивными изображениями можно поступать так же.

Контакты студии

Не стесняйтесь задавать вопросы. Мы ответим на ваше сообщение как можно быстрее.

Беларусь, г. Гомель, ул. Сосновая 20

+375 44 707-61-24

info@reimax.ru

обновить