Как мы это сделали: превращение Tuts+ Emails в шаблон для Campaign Monitor.

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

В первых двух частях этого исследования, мы рассмотрели, как был создан дизайн новых Tuts+ Emails, затем их HTML/CSS составляющая. В этой последней части, я покажу вам, как мы их превратили в шаблон для Campaign Monitor.

На этой стадии было двое человек, вовлеченных в процесс: Кэмерон и я. Кэм отвечала за внедрение в систему наших писем, я за новостные рассылки, о чем я и расскажу здесь.

1. Готовьте ваши файлы

Николь создала серию файлов к самому концу работы, включая HTML, CSS и примеры картинок. Вместе, они смогли сверстать несколько различных примеров email, так что мне оставалось только взять готовый шаблон и начать работать отсюда.

Подсказка: Скачайте исходные файлы, если хотите идти дальше.

Местный герой

Сейчас, пути файлов относительны. Есть всего парочка CSS файлов, некоторое количество ссылок к картинкам и это все привязано к локальной директории. То есть:

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/var-newsletter.css" />

<!-- Optional - for selectable topic colours -->
<link rel="stylesheet" type="text/css" href="css/topics.css" />

Когда мы загружаем наши файлы в конце урока, Campaign Monitor распознает все эти пути и расставит их в нужном порядке.

2. Начинаем сверху.

Наш процесс таков:Мы берем все статические части нашего email и заменяем их на динамические везде где только можно. Скроллим, первый виноватый оказался на 73 строчке: ссылка на веб-версию:

Something not looking right? <a href="#">View the web version</a>

Эта ссылка каждый раз будет разной, так что давайте заменим ее на динамическое <webversion>:

Something not looking right? <webversion>View the web version</webversion>

Все просто. Дальше!

3. Больше важных ссылок

<webversion>, о котором мы только что позаботились является одной из важнейших ссылок, используемой Campaign Monitor. Как только мы будем готовы, давайте используем парочку других ссылок. Параграф email preferences можно найти на 346 сторчке, и выглядит он так:

<p>You’re subscribed to this newsletter because you’re part of the translation team. Not quite to your liking? No problem: <a href="#">update your email preferences</a> or <a href="#">unsubscribe</a>.</p>

Используем <preferences> и <unsubscribe> для того, чтобы сделать эту секцию динамической:

<p>You’re subscribed to this newsletter because you’re part of the translation team. Not quite to your liking? No problem: <preferences>update your email preferences</preferences> or <unsubscribe>unsubscribe</unsubscribe>.</p>

Есть еще несколько важных ссылок, например <forwardtoafriend>, но мы не будем ими пользоваться в этом случае.

4. Простые строчки

Далее стоит обратить внимание на заголовок email.

tuts email heading — Заголовок и подзаголовок

Рядом с 87 строкой вы найдете его со следующей разметкой:

<p class="heading h1">Translation Project Newsletter</p>
<p class="heading h2">Month 20XX</p>

Параграфы с классами heading и h1 или h2 (спасибо HTML email). Каждый из этих элементов должен быть редактируемым из Campaign Monitor, так что так как нам нужно менять всего лишь текст, воспользуемся элементом <singleline>.

<p class="heading h1">
    <singleline label='Newsletter title'>Translation Project Newsletter</singleline>
</p>
<p class="heading h2">
    <singleline label='Newsletter subtitle'>Month 20XX</singleline>
</p>

В самих параграфах ничего не меняется, мы просто добавляем элемент, который можно редактировать. Каждый singleline имеет необязательный атрибут label, который будет отражаться в Campaign Editor.

5. Множественные строчки

Для более сложного, чем заголовки, контента, мы используем элемент <multiline>. На 134 строчке вы найдете контент нашей первой статьи, который мы используем как введение для каждого email.

<p>In this translation project newsletter n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.</p>

<p>Ian Yates<br />
<strong>Editor, Envato Tuts+</strong></p>

Давайте сделаем обе этих секции динамическими:

<multiline label='Intro blurb'>
    <p>In this translation project newsletter n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.</p>
</multiline>

<multiline label='Your friendly host'>
    <p>Ian Yates<br />
    <strong>Editor, Envato Tuts+</strong></p>
</multiline>

По той же схеме: редактируемые части, с необязательными label – но в этот раз можем воспользоваться WYSIWYG редактором:

6. Редактируемые картинки

Прокрутите вниз к 168 строчке и вы обнаружите картинку в табличной строке, саму по себе:

<td class="image">
    <img src="images/onecol3.jpg" width="514" alt="" />
</td>

Это будет частью повторяющейся секции (которую мы скоро сделаем), так что давайте сперва сделаем картинку динамической. Я не люблю использовать слово "простой" в уроках, но в этом случае я дам ему шанс: просто добавьте атрибут editable тегу image. Готово!

<td class="image">
    <img editable src="images/onecol3.jpg" width="514" label="section image" alt="" />
</td>

Атрибут width необходим, но src (который показывает нам оригинальную картинку) необязателен, также как и наш друг label.

Сделав это, редактор позволит нам избавиться от оригинальной картинки, загрузить новую, добавить текст под картинку и (что наиболее важно) добавить ссылку.

"Тяжелые данные говорят: email с картинками обладают в два раза большей конверсией" – Chris Hexton, CEO and Co-founder of Vero

Примечание: держите в голове, что если мы решим удалить картинку, соответствующая разметка останется. Результатом этого могут стать излишне большие padding с большим количеством пустого места, так что будьте осторожны.

7. Повторяющиеся области

Эта картинка – это та часть секции, которую мы бы хотели повторять столько раз, сколько потребуется. Она начинается на 146 строчке и заканчивается на 176 со следующим комментарием:

<!-- Repeatable Article, Stroked at Top -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">

</table>
<!-- END Repeatable Article, Stroked at Top -->

Также как и ранее с другими областями, нам необходимо сделать заголовок секции <singleline>, а контент – <multiline>, так что разберитесь с этим, прежде чем мы продолжим.

Чтобы можно было использовать этот код много раз, мы завернем необходимые строчки в <repeater> элемент:

<!-- Repeatable Article, Stroked at Top -->
<repeater>
    <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">

    </table>
</repeater>
<!-- END Repeatable Article, Stroked at Top -->

Это добавит нам чуть больше контроля в Campaign Monitor, позволяя копировать секции, перемещать их или удалять.

Примечание: <repeater> должен содержать <singleline>, <multiline> или <img editable>

Еще примечание: вы не можете вкладывать элементы <repeater>!

8. Разметка страницы

Рассмотрим повторяющуюся секцию опять, но немного с другой стороны. Это секция, особая для определенной темы, и каждая тема имеет свой цвет.

В случае с нашей рассылкой для проекта переводов, иногда мы используем фото и видео секции, также как и секции кода, или разработки игр. Иногда мы пренебрегаем кодом. Иногда мы используем все девять тем. Как лучше всего их организовать? Введите элемент <layout>.

Мы можем использовать несколько элементов layout в одном блоке <repeater>, так что каждый раз, когда мы хоти скопировать блок, нам будет из чего выбрать. В нашем случае мы хотим иметь возможность выбрать из доступных тем, так что наша разметка будет выглядеть следующим образом.

<repeater>
    
    <layout label='Topic: PHOTOGRAPHY & VIDEO'></layout>
    <layout label='Topic: WEB DESIGN'></layout>
    <layout label='Topic: DESIGN & ILLUSTRATION'></layout>
    <layout label='Topic: CODE'></layout>
    
    ...    
    
</repeater>

Тут вы видите элементы, у каждого свой label.

Важно: Не используйте такие структуры HTML как, например, &amp; или & у label.

Начиная со 183 строчки заворачиваем наши блоки в <repeater>. Затем каждый из наших блоков-тем в <layout label=''>, убедившись, что каждый блок имеет уникальный label.

Теперь , когда мы загрузили все в Campaign Monitor, редактор выдаст нам все возможные опции, когда мы захотим использовать повторно какую-либо секцию:

9. Загрузка в Campaign Monitor

Все самое сложное позади, теперь нам необходимо загрузить наши файлы непосредственно в Campaign Monitor, чтобы мы могли использовать наш шаблон в email рассылке!

На панели управления вашей Campaign Monitor перейдите по Шаблоны > Импортировать.

Затем, введите имя вашему шаблону, выберите ваш готовый HTML файл, все необходимые дополнительные файлы (CSS и картинки) в одном файле.

Ваш файл загрузится и обработается, это займет какое-то время. Стили оптимизируются (некоторые прямо в строке, некоторые в элементе <head>), а пути обновятся. Когда все будет готово, ваш шаблон будет доступен к выбору, когда вы решите запустить новую компанию!

Заключение

Мы рассмотрели этот случай; инсайт о том, как мы создали дизайн и запустили email рассылку для Envato Tuts+. Надеюсь вам это понравилось, а если вам необходимо вдохновение для вашей следующей компании, ознакомьтесь со списком доступных шаблонов на Envato Market!