- PVSM.RU - https://www.pvsm.ru -
Верстке писем и рассылок посвящено огромное количество обучающих статей [1]. В таком объеме информации очень легко заблудиться, а писать письма и делать рассылку все-таки нужно. Поэтому сегодня мы подготовили материал, в котором собрали три популярные техники для эффективной верстки email’ов, подходящие для начинающих верстальщиков.
Интерактивные элементы разбавляют [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]).
Прогрессивное улучшение – это стратегия [5], предполагающая поэтапное создание веб-страниц – от простого к сложному. Сперва обозначается структура письма, а уже затем ведется работа по улучшению внешнего вида и юзабилити.
Сначала содержимое письма размечается с помощью HTML, чтобы сформировать его структуру, построить макет. После этого идет отладка дизайна средствами CSS – наборы стилей CSS улучшают оформление и презентабельность документа – здесь устанавливаются фоновые изображения, задаются параметры шрифта и так далее. На третьем этапе применяются новые возможности спецификации CSS3. После разметки контента и приведения его в порядок приходит время JavaScript, отвечающего за взаимодействие с интерфейсом и динамические элементы.
Пошаговая работа с документом позволяет отслеживать ошибки и исправлять их на месте, ведь появление одного недочета может сказаться на результате всей работы. Если вы хотите посмотреть на прогрессивное улучшение в действии, то обратите внимание на пример [6] от html academy.
Media queryМедиазапрос –— это компонент языка CSS, позволяющий выбирать разные наборы стилей CSS. Наборы стилей – ключ к созданию привлекательного внешнего вида документа (наглядный практический пример CSS в действии вы найдете по ссылке [5]).
Медиазапрос включает в себя три последовательных компонента, которые настраиваются пошагово:
Медиазапросы незаменимы при оптимизации формата отображения писем на мобильных устройствах. Они позволяют [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
Нажмите здесь для печати.