Читать многоколоночные письма на маленьком экране бывает непросто: приходится прокручивать их по горизонтали. Чтение на маленьких дисплеях, как правило, лучше работает, если оно происходит линейно, сверху вниз. С помощью медиазапросов мы можем изменить многоколоночный макет на одноколоночный, что облегчит чтение письма. Здесь будут рассмотрены два метода создания адаптивных колонок, каждый из которых имеет свои плюсы и минусы.
Метод 1 — Элементы <td> на уровне блоков
В первом методе используется та же структура колонок, которую обычно используют в большинстве случаев:
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
<h1>Left Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
</tr>
</table>Стилизация по умолчанию для колонок здесь не очень важна, поэтому перейдем сразу к стилям медиа-запроса:
<style type="text/css">
@media only screen and (max-width: 480px){
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
}
</style>В начале таблицы стилей медиазапросов мы задаем ширину таблицы templateColumns равной 100%, чтобы она адаптировалась к различным размерам или ориентации экрана. Далее происходит важный момент в переключении макета: задав каждому templateColumnContainer <td> элементы уровня блока и подкрепив это объявлением ширины 100%, правая колонка оказывается под левой, и мы получаем одноколоночный вид. После этого изображение получает плавную стилизацию, а текст — увеличение размера.
Как мы уже говорили, у каждого метода есть свои плюсы и минусы. Этот метод наиболее стабилен; благодаря использованию стандартных, проверенных соглашений о коде, колонки работают в каждом клиенте в режиме просмотра на компьютере. Однако есть и пара минусов. Во-первых, установка <td> в качестве элемента уровня блока противоречит тому, как они должны использоваться на самом деле. Во-вторых, вы не сможете поменять порядок колонок или сделать другие изменения в макете, не прибегая к CSS float или position — свойствам, которые не пользуются широкой и последовательной поддержкой во всех почтовых клиентах.
Так что, если для вас главное — стабильность, а не гибкость, вам этот вариант подойдет.
Метод 2 — Выровненные элементы <table>
Метод 2 противоположен первому: его сильная сторона — гибкость, но он не очень стабилен. Колонки кодируются немного по-другому:
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
<tr>
<td class="leftColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="leftColumnContent">
<h1>Left Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="10" cellspacing="0" width="300" class="templateColumnContainer">
<tr>
<td class="rightColumnContent">
<img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
</td>
</tr>
<tr>
<td valign="top" class="rightColumnContent">
<h1>Right Column</h1>
Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</td>
</tr>
</table>Каждая колонка <table> на этот раз находится внутри одной <td>, и каждая из них имеет фиксированную ширину 300px. Самым важным отличием является наличие атрибута align у каждой таблицы; этот атрибут имитирует функциональность CSS float, но на самом деле он хорошо поддерживается почтовыми клиентами с момента появления HTML-спецификации.
В HTML мы перенесли имя класса templateColumnContainer из элементов <td>, показанных в первом примере, в оба выровненных элемента <table>, которые составляют левую и правую колонки. Поскольку каждый элемент <table> по сути является плавающим, они автоматически заворачиваются при срабатывании медиа-запроса. В стиле медиазапроса для templateColumnContainer требуется только одно изменение: теперь мы нацеливаемся на элемент <table>, а не на элемент <td>:
<style type="text/css">
@media only screen and (max-width: 480px){
.templateColumnContainer{
display:block !important;
width:100% !important;
}
}
</style>Установив ширину каждого столбца на 100%, вы сможете заполнить все доступное пространство экрана, как в первом примере. Итак, что же плохого в этом методе? Нестабильность. Поскольку столбцы по сути являются плавающими, они имеют тенденцию заворачиваться друг под друга, если есть какие-либо отклонения в макете.
Скорее всего, вы столкнетесь с этой проблемой, если элементы столбцов <table> «соприкасаются» друг с другом, например, если разместить два столбца шириной 300px рядом друг с другом в пространстве 600px. Все зависит от того, как почтовый клиент отображает таблицы или рассчитывает ширину. Иногда можно сделать столбцы немного уже, чем общая ширина пространства, в котором они находятся, но это не 100% надежное решение.
Несмотря на эти проблемы, гибкость, присущая этому методу, и то, как он позволяет переключать макеты, — одна из причин использовать именно его.
