Пользуемся шаблонами MailChimp для создания простого и понятного письма

У вас есть список для рассылки в MailChimp? Тогда вы не могли не заметить обилие встроенных шаблонов?

MailChimp позволяет очень легко сделать классные, графически нагруженные письма.

Стоит ли этим воспользоваться?

Несколько столбцов, нагруженные изображениями могут быть неподходящими для письма туристического агентства, однако стоит просто использовать всего в меру.

Подписные базы таких людей как Натан Берри и Патрик МакКинзи составляют тысячи подписчиков. После многих лет работы они подсели на электронные письма с минимальным форматированием.

Они знают, что стили, множество столбцов сбивают внимание читателя от главного сообщения.

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

HTML или обычный текст?

Раз так, стоит ли вам пользоваться обычным текстом?

Нет, отказ от HTML является ошибкой. Простой текст невозможно оформить, применив: шрифты, толщину букв, наклон, изображения, кликабельные ссылки.

Другими словами, вы хотите использовать HTML, с минимального форматированием, сохраняя простоту текста.

Создание минимального шаблона HTML MailChimp

В MailChimp нет таких шаблонов, созданных по умолчанию.

Даже самые простые шаблоны с одной колонкой содержат лишние заголовки, изображения и элементы веб-сайта, который вам не нужны:

Таким образом, вам необходимо создать свой собственный HTML шаблон.

Если вы выполните следующие действия, то сможете использовать нормальный редактор MailChimp при составлении письма. Этот шаблон нормально отображается на мобильных устройствах.

1. В MailChimp, перейдите на страницу Templates, нажмите на кнопку Create Template.

2. Выберите Code Your Own, а затем выберите опцию Paste in code.

3. Откроется HTML редактор. С правой стороны, выделите весь HTML и удалите его.

4. Вставить следующий HTML код (последнюю версию можно найти на GitHub).

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>*|MC:SUBJECT|*</title>

        <style type="text/css">
            body {
                background:white;
                font-family:Arial,sans-serif;
                font-size:12px;
            }

            .footer {
                font-size:11px;
                font-style:italic;
                text-align:center;
                color:gray;
                margin-top:30px;
            }

            .footer a {
                color:gray;
            }

            @media only screen and (max-width:480px) {
                body{
                    font-size:18px !important;
                    -webkit-text-size-adjust:none !important;
                }
            }

        </style>

    </head>

    <body>

        <div mc:edit="body">
            Put your email content here.
        </div>

        <div mc:edit="footer" class="footer">
            <a href="*|UNSUB|*">Unsubscribe</a> *|EMAIL|* from this list.<br /> <br />
            *|LIST:ADDRESS|* <br />
            *|IF:REWARDS|* *|REWARDS|* *|END:IF|*
        </div>

    </body>

</html>

5. Нажмите Save and Exit. Не забудьте указать имя шаблона.

Теперь давайте рассмотрим начинку нашего минималистичного шаблона.

CSS

Блок <style> включает в себя несколько очень простых правил, чтобы получить "стандартный gmail" вид. Так же там используется медиа запрос для увеличения размера шрифтов для маленьких экранов.

Эти стили очень простые. Очевидно, вы можете настроить их в соответствии с вашими требованиями.

Основная часть письма

В основном div элементе мы прописали особые MailChimp атрибуты mc:edit=body и mc:edit=footer. Данные записи обеспечат полную совместимость с MailChimp.

В нижней части письмо MailChimp предоставляет возможность отказаться от подписки. Если вы не вставите аналогичный блок, то MailChimp сделает это за вас. Для добавления ссылки на отписку нужно воспользоваться вставкой *|UNSUB|* в пределах тега <a>.

Это только начало. Так же, если вам нужны дополнительные теги, такие как *|ARCHIVE|* или *|FORWARD|*, то можете добавить и их.

Используем шаблон

В следующий раз, когда вы воспользуетесь рассылкой или авто-отправкой сообщений, то ваш шаблон будет доступен для использования. Убедитесь, что вы выбираете Regular ‘ol Campaign, а не Plain-Text Campaign. В области Template, выберите категорию Saved Templates, и там будет ваш шаблон.

Как только вы выберете шаблон - откроется двусторонний редактор. Вы можете использовать панель инструментов, чтобы изменить шрифт, вставить изображения, ссылки... Не забудьте нажать кнопку Show Extra Tools, чтобы ознакомится с дополнительными тегами.

Любые стили применяемые во время редактирования будут заменять стили шаблона.

Если вы вставите текст из другого редактора, как например Google Docs, знайте, что иногда вставленный HTML может конфликтовать и создавать проблемы для макета. Если всё выглядит неправильно, выделите текст и нажмите кнопку Clear Formatting (ластик).

Проверка письма

Будет неплохо, если после редактирования вы отправите себе тестовое письмо. Для этого воспользуйтесь кнопкой Preview and Test в верхней части окна. Проверьте отображение письма на компьютере и на телефоне.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/accentuate-message-clean-simple-mailchimp-template/
Перевел: Станислав Протасевич
Урок создан: 20 Января 2015
Просмотров: 23065
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^