Использование медиазапросов для адаптивного дизайна электронной почты (обновлено)

1. Начните с жидкостного метода
2. Наше секретное оружие: Использование выравнивания текста: центр и отображение: встроенный блок
3. Магия!
4. Что такое адаптивный дизайн электронной почты?
5. Какие почтовые клиенты поддерживают медиазапросы?
6. Заворачивать

Первоначально опубликовано в июле 2014 года, обновлено в марте 2019 года

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

Получение отзывчивых электронных писем, чтобы хорошо выглядеть в приложении Gmail, является бесконечной проблемой из-за ее печально известного отсутствие поддержки для медиа-запросов. Ранее я писал в блогах и писал о том, как сделать так, чтобы электронное письмо выглядело великолепно в приложении, но это стоит денег на дизайн; Вы должны держать один столбец достаточно узким, чтобы другой столбец был шире, чем мобильный видовой экран, и, таким образом, при просмотре на экране мобильного устройства занимать 100% экрана.

Но то, что все хотят, это столбцы одинаковой ширины, которые складываются. Зачастую это достигается с помощью атрибута выравнивания, чтобы «плавать» одну таблицу влево и одну вправо, но при просмотре в приложении Gmail (особенно на больших мобильных устройствах) эти выровненные таблицы сохраняют свои позиции, что приводит к нежелательным результатам. :

Решение, которое мы обнаружили, заключается в использовании display: inline-block в сочетании с text-align: center, чтобы заставить ваши элементы вести себя так, как будто они плавающие, но центрированные. Для того, чтобы все заработало, нужно всего лишь немного поработать с вашим общим шаблоном.

Начните с жидкостного метода

Вам необходимо создать таблицу шириной 100% с максимальной шириной желаемого размера на рабочем столе.

<table class = "container" width = "100%" cellpadding = "0" cellspacing = "0" style = "max-width: 600px;"> <tr> <td> </ td> </ tr> </ стол>

Затем, чтобы успокоить Apple Mail, который не учитывает максимальную ширину, создайте медиазапрос, чтобы ограничить размер этой таблицы на рабочем столе:

экран @media и (минимальная ширина: 601 пикселей) {.container {ширина: 600 пикселей! важный; }}

И оберните всю таблицу в некоторый условный код, чтобы успокоить Outlook, Lotus Notes и клиентов, которые работают с IE:

<! - [if (gte mso 9) | (IE)]> <ширина таблицы = "600" align = "center" cellpadding = "0" cellspacing = "0" border = "0"> <tr> <td > <! [endif] -> (ваша таблица здесь) <! - [if (gte mso 9) | (IE)]> </ td> </ tr> </ table> <! [endif] - >

Наше секретное оружие:
Использование выравнивания текста: центр и отображение: встроенный блок

Добавьте следующие стили в TD таблицы «container»:

<td style = "text-align: center; vertical-align: top; font-size: 0;">

Text-align: center просто для того, чтобы получить содержимое ячейки для центрирования (наш желаемый эффект), а свойство вертикального выравнивания - это ваш выбор значения. Размер шрифта: 0 должен исправить пробел где пространство может иногда появляться между элементами inline-block, которые мы будем размещать внутри.

Теперь нам нужно запустить еще одну таблицу для Outlook / IE внутри этой ячейки. Мы добавим еще одну условную таблицу, такую ​​же, как наша первая:

<! - [if (gte mso 9) | (IE)]> <ширина таблицы = "100%" align = "center" cellpadding = "0" cellspacing = "0" border = "0"> <tr> < td> <! [endif] ->

Теперь внутри нашей ячейки (и нашей условной ячейки) мы собираемся поместить некоторые элементы div со свойством display: inline-block. Как элементы inline-block, они будут подчиняться свойству text-align в содержащей ячейке (text-align влияет на все элементы inline или inline-block в контейнере).

<div style = "width: 300px; отображение: встроенный блок; вертикальное выравнивание: верх;"> </ div>

Наиболее важными являются установка ширины (не более половины ширины контейнера) и настройка отображения на встроенный блок. Выравнивание по вертикали зависит от вашего макета.

Затем внутри этого div вы можете поместить свой контент в таблицу.

<table width = "100%"> <tr> <td style = "font-size: 12px;"> Здравствуйте! </ td> </ tr> </ table>

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

Между каждым из этих div'ов мы будем делать вид, что Outlook закрывает ячейку нашей условной таблицы и открывает новую:

<! - [if (gte mso 9) | (IE)]> </ td> <td> <! [endif] ->

Затем повторите ваш div, чтобы создать еще один столбец. В нашем случае мы создаем два, поэтому добавим еще один.

Наконец, мы закроем нашу условную таблицу

<! - [if (gte mso 9) | (IE)]> </ td> </ tr> </ table> <! [endif] ->

Теперь у вас есть несколько блоков внутри ячейки, которые будут перекрашиваться, чтобы соответствовать области просмотра. Вы можете добавить столько делителей inline-block, сколько захотите, но если вы добавите стоимость нескольких строк, вам нужно будет начать новую условную строку для нашей таблицы Outlook, вставив этот код:

<! - [if (gte mso 9) | (IE)]> </ td> </ tr> <tr> <td> <! [endif] ->

Магия!

Пример ниже показывает, как визуализировать наш условный дизайн:

Теперь у вас есть центрированные блоки в приложении Gmail, а также в других приложениях, не поддерживающих медиазапросы, таких как приложение Outlook.com и Yahoo! почтовое приложение. Затем вы можете добавить медиазапросы (для тех клиентов, которые их поддерживают), чтобы div составлял 100% ширины области просмотра.

Что такое адаптивный дизайн электронной почты?

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

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

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

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

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

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

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

Какие почтовые клиенты поддерживают медиазапросы?

Полезно знать, как создавать центрированные адаптивные дизайны для ваших электронных писем без медиазапросов. Но также полезно знать, какие платформы поддерживают эти запросы, на всякий случай. Они включают в себя: iOS, собственный клиент Android 4.x, собственный клиент Kindle Fire, приложение Android Outlook.com, Windows Phone 7.5 и Blackberry OS6, OS7 и Z10.

Источник: Монитор кампании

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

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

Заворачивать

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

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

• Не все платформы поддерживают запросы
• Центрированный дизайн возможен с небольшим знанием кодирования
• Адаптивный дизайн больше способствует вовлечению

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

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

Научиться ремеслу электронные письма экспертов, которые приносят участие - в форме покупки или подписки.

Похожие

Комментарии