Адаптивный дизайн электронного письма: как создать адаптивное электронное письмо
Posted: Sat Dec 07, 2024 4:01 am
В другой статье мы объяснили, как работают правила CSS, позволяющие адаптировать наш дизайн . Это медиа-запросы , элемент, который взят из CSS3 и работу которого мы можем очень хорошо понять на веб-сайте http://mediaqueri.es/ , где мы находим множество примеров того, как веб-сайт может меняться в зависимости от ширины устройства. ., в котором это показано. Несмотря на то, что существует большое количество информации об адаптивном веб-дизайне , поскольку это тенденция уже несколько лет, на конкретном веб-сайте мы не находим много информации об адаптивном дизайне электронной почты . Однако, сохраняя дистанцию, легко экстраполировать способ работы в сети на электронную почту. Основные препятствия, с которыми мы сталкиваемся, связаны с тем, что разные почтовые клиенты по-разному интерпретируют стили. Таким образом, если в веб-дизайне делать кроссбраузерные тесты и проверять, чтобы оно отображалось одинаково во всех браузерах, — это головная боль, то в электронной почте добавляется головная боль от разных платформ и уровней совместимости .
В любом случае, учитывая новые и растущие данные о показателях открытия мобильных устройств , следует ожидать, что отсутствие адаптации к новейшим технологиям в почтовых клиентах скоро будет решено. Другая проблема, с которой мы сталкиваемся, заключается в том, что электронные письма оформляются иначе, чем в Интернете: таблицы, встроенные стили... И это заставляет нас задаться вопросом... куда мы помещаем медиа-запросы ? Нам обязательно придется нарушить правило встроенных стилей, поскольку интегрировать эти правила таким образом невозможно. Решение состоит в том, чтобы поместить правила CSS в заголовок электронного письма между тегами <style></style>. При этом мы должны понимать, что Gmail не будет соблюдать эти правила . Мы можем подумать, что тогда лучше всего поместить все правила CSS для электронного письма внутри кода и оставить только медиа-запросы внутри тега <style></style>, но давайте не будем забывать, что правила CSS работают каскадно и это означает, что последние правила, заявленные в документе, будут иметь преимущественную силу над предыдущими. Таким образом, любой встроенный стиль перезапишет то, что было объявлено в заголовке электронного письма. Поэтому, если мы хотим, чтобы наше электронное письмо было отзывчивым, мы можем объявить только встроенные общие правила стиля, которые не будут изменяться в зависимости от ширины устройства. Все стили, которые можно изменить, будут находиться в начале правил, а медиа-запросы — в хвосте правил, так что они будут иметь приоритет для каждого устройства. Некоторые предполагают, что добавление !important в правила CSS заголовка решит проблему перезаписи встроенных стилей, но в некоторых проведенных нами тестах это не всегда так. Давайте теперь рассмотрим некоторые технические подробности создания медиа -запроса . Если вы знакомы с таблицами стилей, вам будет легко. Это просто вопрос объявления конкретных правил для каждого размера в объявлении в этой форме: @media only Данные телеграммы Гонконга screen and (max-width: 480px) {… } Или мы можем даже указать больше, задав максимальную и минимальную ширину, например: @ только медиа-экран и (минимальная ширина: 480 пикселей) и (максимальная ширина: 768 пикселей) {… } В скобках мы найдем конкретные правила для каждого измерения. Единого мнения по поводу изменений в правилах нет, но логическое определение могло бы быть следующим: Мобильные устройства : максимальная ширина: 480 пикселей . Планшеты : минимальная ширина: 480 пикселей и максимальная ширина: 800 пикселей. Настольные компьютеры : минимальная ширина: 800 пикселей и максимальная ширина. : 1200 пикселей. Высокое разрешение рабочего стола: минимальная ширина: 1200 пикселей. В любом случае на этапе производства мы можем обнаружить необходимость декларировать другие носители. запросы
мобильная электронная почта
исправить некоторые детали, которые не укладываются в самые распространенные правила. Если вы хотите узнать больше о том, как агентство работает с адаптивными шаблонами писем , рекомендуем эту статью .
Мы хотели бы узнать больше о вашем опыте использования адаптивного дизайна электронной почты, в данном случае в его самом техническом аспекте. Удалось ли вам преодолеть проблемы совместимости между устройствами и приложениями? Знаете ли вы примеры, которые можно взять в качестве справочного материала? Должны ли мы отказаться от Gmail на этом пути? На этом этапе зрелости подобные дебаты становятся необходимыми, чтобы приблизиться к техническому стандарту и способу работы.
Чтобы узнать больше об адаптивной электронной почте, рекомендуем вам посмотреть наш вебинар .
В любом случае, учитывая новые и растущие данные о показателях открытия мобильных устройств , следует ожидать, что отсутствие адаптации к новейшим технологиям в почтовых клиентах скоро будет решено. Другая проблема, с которой мы сталкиваемся, заключается в том, что электронные письма оформляются иначе, чем в Интернете: таблицы, встроенные стили... И это заставляет нас задаться вопросом... куда мы помещаем медиа-запросы ? Нам обязательно придется нарушить правило встроенных стилей, поскольку интегрировать эти правила таким образом невозможно. Решение состоит в том, чтобы поместить правила CSS в заголовок электронного письма между тегами <style></style>. При этом мы должны понимать, что Gmail не будет соблюдать эти правила . Мы можем подумать, что тогда лучше всего поместить все правила CSS для электронного письма внутри кода и оставить только медиа-запросы внутри тега <style></style>, но давайте не будем забывать, что правила CSS работают каскадно и это означает, что последние правила, заявленные в документе, будут иметь преимущественную силу над предыдущими. Таким образом, любой встроенный стиль перезапишет то, что было объявлено в заголовке электронного письма. Поэтому, если мы хотим, чтобы наше электронное письмо было отзывчивым, мы можем объявить только встроенные общие правила стиля, которые не будут изменяться в зависимости от ширины устройства. Все стили, которые можно изменить, будут находиться в начале правил, а медиа-запросы — в хвосте правил, так что они будут иметь приоритет для каждого устройства. Некоторые предполагают, что добавление !important в правила CSS заголовка решит проблему перезаписи встроенных стилей, но в некоторых проведенных нами тестах это не всегда так. Давайте теперь рассмотрим некоторые технические подробности создания медиа -запроса . Если вы знакомы с таблицами стилей, вам будет легко. Это просто вопрос объявления конкретных правил для каждого размера в объявлении в этой форме: @media only Данные телеграммы Гонконга screen and (max-width: 480px) {… } Или мы можем даже указать больше, задав максимальную и минимальную ширину, например: @ только медиа-экран и (минимальная ширина: 480 пикселей) и (максимальная ширина: 768 пикселей) {… } В скобках мы найдем конкретные правила для каждого измерения. Единого мнения по поводу изменений в правилах нет, но логическое определение могло бы быть следующим: Мобильные устройства : максимальная ширина: 480 пикселей . Планшеты : минимальная ширина: 480 пикселей и максимальная ширина: 800 пикселей. Настольные компьютеры : минимальная ширина: 800 пикселей и максимальная ширина. : 1200 пикселей. Высокое разрешение рабочего стола: минимальная ширина: 1200 пикселей. В любом случае на этапе производства мы можем обнаружить необходимость декларировать другие носители. запросы
мобильная электронная почта
исправить некоторые детали, которые не укладываются в самые распространенные правила. Если вы хотите узнать больше о том, как агентство работает с адаптивными шаблонами писем , рекомендуем эту статью .
Мы хотели бы узнать больше о вашем опыте использования адаптивного дизайна электронной почты, в данном случае в его самом техническом аспекте. Удалось ли вам преодолеть проблемы совместимости между устройствами и приложениями? Знаете ли вы примеры, которые можно взять в качестве справочного материала? Должны ли мы отказаться от Gmail на этом пути? На этом этапе зрелости подобные дебаты становятся необходимыми, чтобы приблизиться к техническому стандарту и способу работы.
Чтобы узнать больше об адаптивной электронной почте, рекомендуем вам посмотреть наш вебинар .