Верстке писем и рассылок посвящено огромное количество обучающих статей. В таком объеме информации очень легко заблудиться, а писать письма и делать рассылку все-таки нужно. Поэтому сегодня мы подготовили материал, в котором собрали три популярные техники для эффективной верстки email’ов, подходящие для начинающих верстальщиков.
Интерактивные элементы разбавляют монотонный текст и экономят время читателя, поэтому являются удобным инструментом для создания рекламных писем и красиво оформленных текстов.
В качестве примера давайте рассмотрим простой способ создания интерактивных изображений. Он состоит из трех шагов:
1. Создаем таблицу из одной ячейки и задаем для неё фоновое изображение, которое показывается сразу после загрузки страницы.
2. Устанавливаем главное изображение и «прячем» его в ссылку с классом img-swap. Это позволит создать hover-эффект: когда при наведении курсора на фоновое изображение, на его месте появится главное.
3. Настраиваем команду :hover и устанавливаем стили для класса img-swap.
Этот вариант создания интерактивного изображения поддерживается такими сервисами, как: Mail, Outlook, Yahoo! и Gmail (с модификациями).
Прогрессивное улучшение – это стратегия, предполагающая поэтапное создание веб-страниц – от простого к сложному. Сперва обозначается структура письма, а уже затем ведется работа по улучшению внешнего вида и юзабилити.
Сначала содержимое письма размечается с помощью HTML, чтобы сформировать его структуру, построить макет. После этого идет отладка дизайна средствами CSS – наборы стилей CSS улучшают оформление и презентабельность документа – здесь устанавливаются фоновые изображения, задаются параметры шрифта и так далее. На третьем этапе применяются новые возможности спецификации CSS3. После разметки контента и приведения его в порядок приходит время JavaScript, отвечающего за взаимодействие с интерфейсом и динамические элементы.
Пошаговая работа с документом позволяет отслеживать ошибки и исправлять их на месте, ведь появление одного недочета может сказаться на результате всей работы. Если вы хотите посмотреть на прогрессивное улучшение в действии, то обратите внимание на пример от html academy.
Media queryМедиазапрос –— это компонент языка CSS, позволяющий выбирать разные наборы стилей CSS. Наборы стилей – ключ к созданию привлекательного внешнего вида документа (наглядный практический пример CSS в действии вы найдете по ссылке).
Медиазапрос включает в себя три последовательных компонента, которые настраиваются пошагово:
Медиазапросы незаменимы при оптимизации формата отображения писем на мобильных устройствах. Они позволяют перейти с фиксированного дизайна на «плавающий» – такой документ будет хорошо смотреться на разных платформах.
Более того, технология медиазапросов может быть использована для таргетинга сервисов (выделения сервисов, удовлетворяющих заданным критериям) и адаптации под них. По аналогии осуществляется и таргетинг устройств, где важно учитывать размеры экрана. К примеру, так выглядит стандартный код для iPhone 6 Plus:
Медиазапросы позволяют создавать красивые и, главное, адаптивные письма, которые хорошо выглядят на любом устройстве, однако нужно быть готовым к тому, что многие почтовые клиенты не поддерживают эту технологию.
Интерактивные письма, прогрессивное улучшение и медиазапросы – это достаточно распространённые техники, способные превратить ваши электронные послания в небольшие произведения искусства, более того, они являются неплохой базой для дальнейшего развития ваших навыков верстки.
О чем еще мы пишем в блоге Печкин-mail'а:
Интерактивные письма
Интерактивные элементы разбавляют монотонный текст и экономят время читателя, поэтому являются удобным инструментом для создания рекламных писем и красиво оформленных текстов.
В качестве примера давайте рассмотрим простой способ создания интерактивных изображений. Он состоит из трех шагов:
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 (с модификациями).
Прогрессивное улучшение (progressive enhancement)
Прогрессивное улучшение – это стратегия, предполагающая поэтапное создание веб-страниц – от простого к сложному. Сперва обозначается структура письма, а уже затем ведется работа по улучшению внешнего вида и юзабилити.
Сначала содержимое письма размечается с помощью HTML, чтобы сформировать его структуру, построить макет. После этого идет отладка дизайна средствами CSS – наборы стилей CSS улучшают оформление и презентабельность документа – здесь устанавливаются фоновые изображения, задаются параметры шрифта и так далее. На третьем этапе применяются новые возможности спецификации CSS3. После разметки контента и приведения его в порядок приходит время JavaScript, отвечающего за взаимодействие с интерфейсом и динамические элементы.
Пошаговая работа с документом позволяет отслеживать ошибки и исправлять их на месте, ведь появление одного недочета может сказаться на результате всей работы. Если вы хотите посмотреть на прогрессивное улучшение в действии, то обратите внимание на пример от html academy.
Медиазапросы
Media queryМедиазапрос –— это компонент языка CSS, позволяющий выбирать разные наборы стилей CSS. Наборы стилей – ключ к созданию привлекательного внешнего вида документа (наглядный практический пример CSS в действии вы найдете по ссылке).
Медиазапрос включает в себя три последовательных компонента, которые настраиваются пошагово:
- Тип среды (media type) – определяет среду применения правил. Выделяют такие типы, как all, print, screen (используется для email) и speech
- Выражения (expressions) – это перечень свойств устройства, описывающих, например, ширину (width) и высоту (height) экрана, цвет
- Правила стилей – применяются при открытии письма в среде, соответствующей типу и свойствам в выражении
Медиазапросы незаменимы при оптимизации формата отображения писем на мобильных устройствах. Они позволяют перейти с фиксированного дизайна на «плавающий» – такой документ будет хорошо смотреться на разных платформах.
Более того, технология медиазапросов может быть использована для таргетинга сервисов (выделения сервисов, удовлетворяющих заданным критериям) и адаптации под них. По аналогии осуществляется и таргетинг устройств, где важно учитывать размеры экрана. К примеру, так выглядит стандартный код для iPhone 6 Plus:
@media screen and (max-device-width: 414px) and (max-device-height: 776px) {
/* Insert styles here */
Медиазапросы позволяют создавать красивые и, главное, адаптивные письма, которые хорошо выглядят на любом устройстве, однако нужно быть готовым к тому, что многие почтовые клиенты не поддерживают эту технологию.
Интерактивные письма, прогрессивное улучшение и медиазапросы – это достаточно распространённые техники, способные превратить ваши электронные послания в небольшие произведения искусства, более того, они являются неплохой базой для дальнейшего развития ваших навыков верстки.
О чем еще мы пишем в блоге Печкин-mail'а:
- Email-маркетинг: Рецепт правильного plain-text письма
- How-to: гайд по созданию интерактивных писем
- Печкин-mail «вики»: Чеклист по email-рассылкам
- Интерфейсы и юзабилити: Кто и как проектирует UX
- «Поговорим об этом»: Работа проектировщика
