Блог

Адаптивные колонки при верстке макетов Email писем

13 августа 2024

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

Метод 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% надежное решение.

Несмотря на эти проблемы, гибкость, присущая этому методу, и то, как он позволяет переключать макеты, — одна из причин использовать именно его.

Оригинал статьи
Опубликовано 13 августа 2024 в 15:38
Обновлено 13 августа 2024 в 15:38
Категория: Блог
Теги: ,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Реклама

Связь со мной

uzabila@yandex.ru