Как в бюро верстают

Как в бюро верстают

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

«Советы за неделю» — еженедельная рассылка с советами за прошлую неделю. Она верстается автоматически: специальное приложение собирает советы, вышедшие на прошлой неделе, компонует их, добавляет советы с новыми комментариями, рекламу курсов, Школы и других продуктов бюро. Тестовое письмо автоматически собирается и отправляется бюрошникам в понедельник в 9:00. Настоящее письмо отправляется подписчикам во вторник в 9:00.

После сбора советов приложение компонует их по особым правилам:

  • Самый важный совет встаёт первым в письме.
  • Менее важные советы компонуются с двумя другими в раскладки на три совета. Более важный совет занимает большую часть раскладки справа или слева.
  • Оставшиеся советы компонуются в раскладки из двух советов.
  • Раскладки на три совета не повторяются в одном письме. Если есть раскладка на три совета с важным советом справа, то следующая раскладка на три совета будет с важным советом слева.

Важность совета в первую очередь оцениваем по его типу: обычный совет, лекция, важный совет или скрижаль. Дополнительно учитываем количество комментариев, обложку, наличие и формат картинок в вопросе и ответе.

Варианты раскладки 7, 6, 5 и 4 советов
Варианты раскладки 7, 6, 5 и 4 советов

Чтобы собрать раскладку, используем заранее свёрстанные типовые этажи: совет‑бомба, тройка с важным советом слева, тройка с важным советом справа и симметричная двойка. Например раскладка на 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";
Стили разбиваем на четыре группы: переменные и миксины, базовые стили, стили по этажам и стили, специфичные для почтовых клиентов

Когда письмо готово, остаётся протолкнуть его в Мейлчимп: через АПИ создать кампанию, настроить тему и отправителя, отправить тестовое письмо бюрошникам и поставить рассылку в очередь на отправку.

Мейлчимп автоматически перенесёт стили в атрибуты, настроит теги Open Graph, добавит отслеживание кликов и «открываемости».

Такая автоматическая вёрстка в Мейлчимпе не очень удобна в отладке и поддержке. Чтобы увидеть изменения, приходится пересобирать тестовое письмо и отправлять его через Мейлчимп: в среднем на это уходит 40 секунд. Поэтому, чтобы ускорить процесс вёрстки и отладки, мы собираем письмо локально и дальше отлаживаем в Litmus и браузере.

В следующем совете расскажу о самом больном — о рассылках Школы и Издательства бюро.

Отправить
Поделиться
Запинить

Рекомендуем похожие советы