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

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



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


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

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

    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'а:

    • +8
    • 10,6k
    • 9
    Pechkin.com
    65,00
    Новый инструмент для e-mail маркетинга
    Поделиться публикацией

    Комментарии 9

      +2
      Письмо рассылки должно быть без оформления. Графическое оформление – моветон.
        +1
        Какие-то еще аргументы за и против?
          +4
          Быстрота и простота восприятия информации из письма. Нетекстовое оформление можно использовать только для структурирования информации для её лучшего восприятия. Больше ни для чего информационные рассылки при прочих равных не нужны. Итак много шума. Не надо превращать рабочий инструмент в социальную сеть с картинками для привлечения внимания.
            +2
            Логика верная. Конечно, не всегда можно обойтись plain-text письмами. Для разных задач — разные инструменты :)
              +4
              Да, это правильно. На каждую задачу свой инструмент.
              Я вот с трудом могу вспомнить ситуацию, когда в письмах без оформления было не обойтись. Хотя, конечно, заморачиваться псевдографикой для отрисовки табличек, это что-то. Так для этого ещё моноширинный шрифт должен быть, а он не везде по-умолчанию стоит.
              В СМСках сейчас добавили эти эмодзи. Но СМС не почтовая рассылка.
        0
        Теплые ламповые таблицы. Когда мир почтовых клиентов начнет понимать html 5? (ну или чтобы 1% можно было пренебречь)
        Да — я знаю почта появилась раньше чем div-ы. Но все же — мир не стоит на месте. Браузеры пришли же к принятию разметки дивами, а почтовые клиенты нет. Засунуть в почтовый клиент аналог браузерного движка так сложно?

        Или мы отправляем письма пользователям в начало 90-х? Машина времени изобретена?
          0
          Скорее всего нет смысла внедрять нечто подобное. Старые mail сервисы не поймут html5, как пишет человек выше, все это граф оформление — моветон, потому что в письме должен быть текст. В плюс могу сказать что такие нововведения могут повлечь за собой эксплойты с бэкдорами для нехороших действий с неосмотрительным владельцем почты)
          0
          Какие почтовые клиенты/ сервисы поддерживают js?
            0
            Если нет оформления, то текстовые письма (text/plain).
            Для создания оформления, HTML письма (text/html).

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое