Коробка хитростей для создания отзывчивой электронной почты

Изменение свойства display

Второй способ построения многостолбцовой электронной почты — более элегантный и использует собственные правила CSS.

Этот метод заключается в изменении свойства displayresponseiveemailpatterns.com ). Это заставляет ячейки складываться вертикально:

Изменение схемы отображения

 table[class="body_table"] {
	width: 600px;
}
table td[class="column"] {
    height:100px;
    width:200px;
}

@media only screen and (max-width: 480px) {
	table[class="body_table"] {
		width: 440px!important;
	}

	table td[class="column"] {
        width:100%!important;
        display: block!important;
    }
}

Результаты этого теста превосходны: все клиенты правильно отредактировали тестовую электронную почту (иногда с небольшими ошибками), в любом случае помните, что мы пробовали пустую почту, и результаты могут отличаться при добавлении контента.

Вот кодекс для вас, чтобы выбрать.

Об изображениях

В адаптивных электронных письмах для изображений не требуется ничего, кроме классического адаптивного метода ( img {max-width: 100%;}

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

 @media only screen and (max-device-width: 480px) {
    img.original_img {
        display: none;
    }
    .substitute_image {
        background-image: url(background_image.png);
        width: 440px !important;
        height: 240px !important
    }   
}

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

Хорошим вариантом может быть использование одного и того же изображения как для тега imgbackground-image Вы должны подготовить многоцелевое изображение, которое можно использовать для всех областей, как в примере ниже:

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

 @media only screen and (max-device-width: 480px) {
    img.original_img {
        display: none;
    }
    .substitute_image {
        background-image: url(original_image_source.jpg);
        background-position: center center;
        background-repeat: no-repeat;
      width: 440px !important;
      height: 120px !important
    }   
}

Вы также можете добавить свойство background-sizeподдержку клиентами этого правила ).

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

Выводы

Итак, есть ли единственная, всепобеждающая, лучшая из когда-либо существовавших технологий для создания адаптивных писем?

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

Ресурсы

• https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic
• http://responsiveemailresources.com/
• http://responsiveemailpatterns.com/
• https://www.campaignmonitor.com/blog/post/3541/designing-ultra-short-emails-for-mobile-using-progressive-disclosure/
• https://litmus.com/blog/responsive-scalable-email-design-whats-the-difference
• https://litmus.com/blog/anatomy-mobile-email
• https://www.campaignmonitor.com/guides/mobile/