Как в бюро верстают
Рассылку советов
Как в бюро верстают
Рассылку советов
В прошлом совете я рассказал, как мы подходим к вёрстке транзакционных писем: квитанций, подтверждений, напоминаний и приглашений. В этом совете начну рассказывать о вёрстке массовых рассылок: советов за неделю, писем о выходе новых глав в книгах или начале занятий на ступени.
«Советы за неделю» — еженедельная рассылка с советами за прошлую неделю. Она верстается автоматически: специальное приложение собирает советы, вышедшие на прошлой неделе, компонует их, добавляет советы с новыми комментариями, рекламу курсов, Школы и других продуктов бюро. Тестовое письмо автоматически собирается и отправляется бюрошникам в понедельник в 9:00. Настоящее письмо отправляется подписчикам во вторник в 9:00.
После сбора советов приложение компонует их по особым правилам:
Самый важный совет встаёт первым в письме.
Менее важные советы компонуются с двумя другими в раскладки на три совета. Более важный совет занимает большую часть раскладки справа или слева.
Оставшиеся советы компонуются в раскладки из двух советов.
Раскладки на три совета не повторяются в одном письме. Если есть раскладка на три совета с важным советом справа, то следующая раскладка на три совета будет с важным советом слева.
Важность совета в первую очередь оцениваем по его типу: обычный совет, лекция, важный совет или скрижаль. Дополнительно учитываем количество комментариев, обложку, наличие и формат картинок в вопросе и ответе.
Чтобы собрать раскладку, используем заранее свёрстанные типовые этажи: совет‑бомба, тройка с важным советом слева, тройка с важным советом справа и симметричная двойка. Например раскладка на 7 советов в коде выглядит так:
<%= render_partial "essential_soviet", soviet: soviets[0] %>
<%= render_partial "3r", important_soviet: soviets[1], nearby_soviets: [soviets[2], soviets[3]] %>
<%= render_partial "3l", important_soviet: soviets[4], nearby_soviets: [soviets[5], soviets[6]] %>
<% # essential_soviet.erb %>
<div class="soviets-row">
<%= soviet(soviet, essential: true) %>
</div>
<% # 3r.erb %>
<div class="soviets-row">
<div class="soviet-column">
<%= soviet(nearby_soviets[0], padded_right: true) %>
<%= soviet(nearby_soviets[1], padded_right: true, bordered: true) %>
</div><div class="soviet-column is__bordered">
<%= soviet(important_soviet, important: true, padded_left: true) %>
</div>
</div>
<% # 3l.erb %>
<div class="soviets-row">
<div class="soviet-column">
<%= soviet(important_soviet, important: true, padded_right: true) %>
</div><div class="soviet-column is__bordered">
<%= soviet(nearby_soviets[0], padded_left: true) %>
<%= soviet(nearby_soviets[1], padded_left: true, bordered: true) %>
</div>
</div>
Когда ХТМЛ раскладки готов, компилируем стили и собираем письмо из блоков покрупнее: стили, шапка, тело и подвал с прощальными словами.
.soviet {
padding-bottom: 40px;
border-top: 1px solid $color-border;
font-size: $mobile-font-size;
line-height: $mobile-line-height;
text-align: left;
@include respond-to(mobile) {
padding-right: 0 !important;
padding-left: 0 !important;
}
&.has__image {
font-size: $small-font-size;
line-height: $small-line-height;
text-align: center;
}
&.is__important {
height: 100%;
}
&.is__essential {
padding-right: 0;
padding-bottom: 176px;
width: 100%;
min-height: 230px;
&.has__image {
padding-bottom: 43px;
}
}
&.is__important.has__image {
padding-right: 10px;
}
&.is__paddedLeft {
padding-left: 10px;
}
&.is__paddedRight {
padding-right: 20px;
}
}@import "tech/vars";
@import "tech/mixins";
@import "partials/reset";
@import "partials/base";
@import "partials/header";
@import "partials/soviets";
@import "partials/soviet";
@import "partials/discussion";
@import "partials/ad";
@import "partials/blast";
@import "partials/farewell";
@import "partials/apple";
@import "partials/outlook";
Когда письмо готово, остаётся протолкнуть его в Мейлчимп: через АПИ создать кампанию, настроить тему и отправителя, отправить тестовое письмо бюрошникам и поставить рассылку в очередь на отправку.
См. исходный код письма за неделю 7—13 января
Мейлчимп автоматически перенесёт стили в атрибуты, настроит теги Open Graph, добавит отслеживание кликов и «открываемости».
См. исходный код письма за неделю 7—13 января
Такая автоматическая вёрстка в Мейлчимпе не очень удобна в отладке и поддержке. Чтобы увидеть изменения, приходится пересобирать тестовое письмо и отправлять его через Мейлчимп: в среднем на это уходит 40 секунд. Поэтому, чтобы ускорить процесс вёрстки и отладки, мы собираем письмо локально и дальше отлаживаем в Litmus и браузере.
В следующем совете расскажу о самом больном — о рассылках Школы и Издательства бюро.