Создание Адаптивных Писем Будущего Без Медиа-Запросов

внешний , то мы заменим заполнитель [content здесь] тегом изображение , поэтому наша таблица будет выглядеть так:

<table class="outer" align="center"> <tr> <td class="full-width-image"> <img src="images/header.jpg" alt="" /> </td> </tr> </table>

Вы заметите, что я не заморачивался с атрибутами ширина или высота для изображения.

Я собираюсь решить эту проблему с помощью CSS, который мы добавим, и это будет выглядеть так:

.

full-width-image img { width: 100%; height: auto; }

Это подводит нас к одному очень важному нюансу в этом методе, который касается изображений.

Следовательно, нам почти всегда нужно, чтобы ширина наших изображений была равна 100% ширины их контейнеров.

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

Это связано с тем, что Outlook 2007, 2010 и 2013 не будет масштабировать (вверх или вниз) изображения относительно их физического размера, если вы явно не зададите для них ширину в пикселях.

Если вы поместите изображение шириной 1200 пикселей в ячейку шириной 600 пикселей и установите его ширину на 100%, Outlook отобразит его шириной 1200 пикселей.

Следовательно, если у вас есть ячейка шириной 600 пикселей (на рабочем столе), вам нужно использовать изображение шириной 600 пикселей.

Чтобы решить проблему с изображениями, размер которых меньше поддерживаемой ширины экрана, можно явно задать для них ширину в пикселях (например, 100 пикселей) и использовать изображения с высоким разрешением, поскольку в приложениях без медиа-запроса их ширина всегда будет равна 100 пикселей.

, который отлично смотрится в любой мобильной области просмотра.

Однако если у вас есть столбец шириной 350 пикселей, вы не сможете присвоить изображению ширину 350 пикселей, потому что если бы вам пришлось отображать это изображение в приложении Gmail в области просмотра шириной 320 пикселей, это было бы слишком широкий.

Часто необходимо убедиться, что ширина всех изображений установлена на 100 %, даже если они уже, чем самая маленькая мобильная область просмотра, поскольку это дает вам больше гибкости при добавлении прогрессивного улучшения в форме медиа-запроса.

Мое практическое правило заключается в том, что каждое изображение должно отображаться с соответствующим физическим размером в пикселях, если только это не значок шириной менее 100 пикселей.

Итак, принимая все это во внимание, мы сохранили изображение с именем header.jpg, шириной ровно 600 пикселей, и поместили его в наш каталог изображений.

Одолжите его или сохраните свой, и теперь вы можете просмотреть HTML-файл и увидеть, как изображение гибко меняет размер в зависимости от размера области просмотра.

внешний используя следующую разметку:

<tr> <td class="one-column"> <table width="100%"> <tr> <td class="inner contents"> <p class="h1">Lorem ipsum dolor sit amet</p> <p>Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p> </td> </tr> </table> </td> </tr>

И добавьте в style.css следующие стили:

.

inner { padding: 10px; } p { Margin: 0; } a { color: #ee6a56; text-decoration: underline; } .

h1 { font-size: 21px; font-weight: bold; Margin-bottom: 18px; } .

h2 { font-size: 18px; font-weight: bold; Margin-bottom: 12px; } /* One column layout */ .

one-column .

contents { text-align: left; } .

one-column p { font-size: 14px; Margin-bottom: 10px; }

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

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

Сначала добавьте новую строку в таблицу .

внешний .

Он содержит ячейку с классом .

две колонки , а внутри него условная таблица для Outlook с двумя столбцами шириной 50%:

<tr> <td class="two-column"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="50%" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="50%" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr>

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

Поскольку Outlook также не поддерживает Максимальная ширина , эти столбцы помогают удерживать каждый столбец ( ок.

переулок имеется в виду дочерний контент) в необходимом размере.

Визуализация того, как будет выглядеть наша двухколоночная структура.

Теперь замените каждый заполнитель [столбец сюда] следующим:

<div class="column"> <table width="100%"> <tr> <td class="inner"> [content goes here] </td> </tr> </table> </div>

Чтобы сделать два столбца плавающими (параллельными) рядом на настольном компьютере, но располагающимися вертикально в центре на мобильных устройствах, мы хотим использовать комбинацию выравнивание текста: по центру И дисплей: встроенный блок .

Все встроенные и строчные блочные элементы подчиняются свойству text-align. Поэтому, если мы обернем наши таблицы в элементы div с набором inline-block, мы сможем довольно просто установить их выравнивание, когда они расположены друг над другом, установив свойство text-align в их контейнере.

Вы можете выбрать выравнивание по левому, центральному или правому краю, и ваши встроенные блоки div будут подчиняться.

И вы действительно можете накрыть сам стол дисплей: встроенный блок , но только если вы не собираетесь размещать внутри него другие таблицы.

Ситуация становится странной, если вы вкладываете таблицы в таблицы встроенных блоков, поэтому, если вам нужно что-то вложить, убедитесь, что контейнер встроенных блоков является элементом div. Давайте добавим стиль нашей ячейке-контейнеру.

.

две колонки с выбранным нами выравниванием.

Мы также собираемся добавить размер шрифта: 0 чтобы избавиться от пустых мест между нашими столбцами внутри этой ячейки.

/*Two column layout*/ .

two-column { text-align: center; font-size: 0; }

Теперь мы создадим стиль для нашего встроенного блока div, который будет вести себя как столбец:

.

two-column .

column { width: 100%; max-width: 300px; display: inline-block; vertical-align: top; }

Мы используем ширину 100% с максимальной шириной до 300 пикселей, поэтому этот конкретный столбец в области просмотра шириной менее 300 пикселей будет иметь ширину 100%.

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

[ примечание переводчика: Здесь явно ошибка, не так ли? вертикальное выравнивание есть недвижимость центр ?] Значение вершина Для вертикальное выравнивание устанавливает поведение, в котором каждый столбец ведет себя аналогично ячейке таблицы со свойством HTML valign="верх" , соответственно середина дает аналогичный эффект valign="средний" .

Обратите внимание, что вы можете иметь несколько строк этих элементов управления внутри одной ячейки, и вертикальное выравнивание всегда будет следовать принципу «строка за строкой».

Это потрясающе! Также убедитесь, что выбранный вами здесь вариант соответствует значимый , который вы установили для условной таблицы Outlook, поскольку Outlook не поддерживает вертикальное выравнивание .

Если ваше выравнивание в Outlook не соответствует ожиданиям, распространенной причиной может быть отсутствие значения.

значимый для условной таблицы.

Далее мы добавим таблицу с двумя строками в каждом столбце.

Это отвечает за изображения и соответствующий им текст внизу, когда на мобильных устройствах все выстроено в столбик.

Итак, давайте заменим два заполнителя [content are here] на следующие:

<table class="contents"> <tr> <td> <img src="images/two-column-01.jpg" alt="" /> </td> </tr> <tr> <td class="text"> Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td> </tr> </table>

Здесь ширина наших изображений составляет 280 пикселей.

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

Каждый столбец имеет ширину 300 пикселей с отступами по 10 пикселей с каждой стороны, оставляя 280 пикселей для изображения.

Далее мы стилизуем класс .

содержание , установив его ширину на 100%:

.

contents { width: 100%; }

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

.

two-column .

contents { font-size: 14px; text-align: left; } .

two-column img { width: 100%; height: auto; } .

two-column .

text { padding-top: 10px; }

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

Мы собираемся использовать выравнивание текста: по центру чтобы наши столбцы располагались по центру, но вы также можете применить выравнивание по левому или правому краю.

Вот пример того, как элементы складываются при центрировании и выравнивании по левому краю:



пример того, как 3 столбца будут расположены друг над другом при настройке text-align: center для контейнера



пример того, как будут располагаться 3 столбца при настройке выравнивания текста контейнера: по левому краю Итак, мы повторим процесс с двумя столбцами, добавив еще один.

Добавьте эту новую строку в таблицу .

внешний .

(Обычно я предпочитаю использовать процентную ширину ячеек в условных таблицах Outlook, но в этом случае будет проще установить ширину 200 для каждой).

<tr> <td class="three-column"> <!--[if (gte mso 9)|(IE)]> <table width="100%"> <tr> <td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td><td width="200" valign="top"> <![endif]--> [column to go here] <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]--> </td> </tr>

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

Он также будет стилизовать наши элементы div столбцов, которые мы вскоре добавим, которые в данном случае будут иметь ширину 200 пикселей.

/*Three column layout*/ .

three-column { text-align: center; font-size: 0; padding-top: 10px; padding-bottom: 10px; } .

three-column .

column { width: 100%; max-width: 200px; display: inline-block; vertical-align: top; } .

three-column .

contents { font-size: 14px; text-align: center; } .

three-column img { width: 100%; height: auto; } .

three-column .

text { padding-top: 10px; }

Давайте вставим наши столбцы, заменив каждый из заполнителей [column to go here] на таблицу:

<table class="column"> <tr> <td class="inner"> <table class="contents"> <tr> <td> <img src="images/three-column-01.jpg" alt="" /> </td> </tr> <tr> <td class="text"> Scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat. </td> </tr> </table> </td> </tr> </table>

И вот оно! Теперь у вас должен быть макет с тремя столбцами, расположенными в узких окнах просмотра.

Учитывая тот факт, что этот макет имеет нечетное количество столбцов, иногда вы можете обнаружить, что у вас есть два столбца в верхней строке и только один в нижней.

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

Часто лучший способ решить эту проблему — либо выровнять по левому краю; или использование нескольких строк с тремя столбцами, чтобы при вертикальном расположении контента при среднем разрешении каждая строка по-прежнему содержала четное количество столбцов.