- PVSM.RU - https://www.pvsm.ru -

«Пишите письма»: Три техники верстки хороших email’ов

Верстке писем и рассылок посвящено огромное количество обучающих статей [1]. В таком объеме информации очень легко заблудиться, а писать письма и делать рассылку все-таки нужно. Поэтому сегодня мы подготовили материал, в котором собрали три популярные техники для эффективной верстки email’ов, подходящие для начинающих верстальщиков.

«Пишите письма»: Три техники верстки хороших email’ов - 1 [2]

Интерактивные письма

Интерактивные элементы разбавляют [3] монотонный текст и экономят время читателя, поэтому являются удобным инструментом для создания рекламных писем и красиво оформленных текстов.

В качестве примера давайте рассмотрим простой способ создания интерактивных изображений. Он состоит из трех шагов:

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

<table cellpadding=0 cellspacing=0 border=0><tr>
<td width=240 background="http://.../alternate-image.jpg">
</td></tr></table>

2. Устанавливаем главное изображение и «прячем» его в ссылку с классом img-swap. Это позволит создать hover-эффект: когда при наведении курсора на фоновое изображение, на его месте появится главное.

<table cellpadding=0 cellspacing=0 border=0><tr>
<td width=240 background="http://../alternate-image.jpg">
<a class="img-swap" href="http://../link"><img src="http://../primary-image.jpg" width="240" height="170" border="0" style="display:block;" alt="the product"></a>
</td></tr></table>

3. Настраиваем команду :hover и устанавливаем стили для класса img-swap.

<style>
.img-swap {
  display: block;
  width: 240px;
  height: 170px;
}

.img-swap:hover img {
  height: 0px;
}
</style>

Этот вариант создания интерактивного изображения поддерживается такими сервисами, как: Mail, Outlook, Yahoo! и Gmail (с модификациями [4]).

Прогрессивное улучшение (progressive enhancement)

Прогрессивное улучшение – это стратегия [5], предполагающая поэтапное создание веб-страниц – от простого к сложному. Сперва обозначается структура письма, а уже затем ведется работа по улучшению внешнего вида и юзабилити.

Сначала содержимое письма размечается с помощью HTML, чтобы сформировать его структуру, построить макет. После этого идет отладка дизайна средствами CSS – наборы стилей CSS улучшают оформление и презентабельность документа – здесь устанавливаются фоновые изображения, задаются параметры шрифта и так далее. На третьем этапе применяются новые возможности спецификации CSS3. После разметки контента и приведения его в порядок приходит время JavaScript, отвечающего за взаимодействие с интерфейсом и динамические элементы.

Пошаговая работа с документом позволяет отслеживать ошибки и исправлять их на месте, ведь появление одного недочета может сказаться на результате всей работы. Если вы хотите посмотреть на прогрессивное улучшение в действии, то обратите внимание на пример [6] от html academy.

Медиазапросы

Media queryМедиазапрос –— это компонент языка CSS, позволяющий выбирать разные наборы стилей CSS. Наборы стилей – ключ к созданию привлекательного внешнего вида документа (наглядный практический пример CSS в действии вы найдете по ссылке [5]).

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

  • Тип среды (media type) – определяет среду применения правил. Выделяют такие типы, как all, print, screen (используется для email) и speech
  • Выражения (expressions) – это перечень свойств устройства, описывающих, например, ширину (width) и высоту (height) экрана, цвет
  • Правила стилей – применяются при открытии письма в среде, соответствующей типу и свойствам в выражении

Медиазапросы незаменимы при оптимизации формата отображения писем на мобильных устройствах. Они позволяют [7] перейти с фиксированного дизайна на «плавающий» – такой документ будет хорошо смотреться на разных платформах.

Более того, технология медиазапросов может быть использована для таргетинга сервисов (выделения сервисов, удовлетворяющих заданным критериям) и адаптации под них. По аналогии осуществляется и таргетинг устройств, где важно учитывать размеры экрана. К примеру, так выглядит стандартный код для iPhone 6 Plus:

@media screen and (max-device-width: 414px) and (max-device-height: 776px) {
    /* Insert styles here */

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

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

О чем еще мы пишем в блоге Печкин-mail'а:

Автор: Pechkin.com

Источник [14]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/email-rassy-lki/195233

Ссылки в тексте:

[1] статей: https://habrahabr.ru/company/pechkin/blog/264967/

[2] Image: https://habrahabr.ru/company/pechkin/blog/311572/

[3] разбавляют: http://habrahabr.ru/company/pechkin/blog/264967/

[4] модификациями: http://habrahabr.ru/company/pechkin/blog/263699/

[5] стратегия: https://habrahabr.ru/post/157115/

[6] пример: http://htmlacademy.ru/demos/1

[7] позволяют: https://habrahabr.ru/company/pechkin/blog/262585/

[8] не поддерживают: https://habrahabr.ru/company/pechkin/blog/258313/

[9] Рецепт правильного plain-text письма: https://pechkin.com/blog/plain-text/#more-1674

[10] гайд по созданию интерактивных писем: https://pechkin.com/blog/interactive-email/#more-1667

[11] Чеклист по email-рассылкам: https://pechkin.com/blog/checklist/#more-1660

[12] Кто и как проектирует UX: https://pechkin.com/blog/ui-ux/#more-1648

[13] Работа проектировщика: https://pechkin.com/blog/ux/#more-1654

[14] Источник: https://habrahabr.ru/post/311572/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best