x
 
Игорь Петров
24 января 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Василий, Руст, привет!

Расскажите, как в бюро верстают электронные письма и рассылки?

Вторая часть: рассылка советов


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

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

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

«Советы за неделю» — еже­не­дель­ная рас­сылка с сове­тами за про­шлую неделю. Она вер­ста­ется авто­ма­ти­че­ски: спе­ци­аль­ное при­ло­же­ние соби­рает советы, вышед­шие на про­шлой неделе, ком­по­нует их, добав­ляет советы с новыми ком­мен­та­ри­ями, рекламу кур­сов, Школы и дру­гих про­дук­тов бюро. Тесто­вое письмо авто­ма­ти­че­ски соби­ра­ется и отправ­ля­ется бюрош­ни­кам в поне­дель­ник в 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 и браузере.

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

Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт до 12 августа или пока есть свободные места.
 

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

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Как переходить на переписанные с нуля сервисы? Как организовать работу удалённой команды разработчиков? С чего начать вёрстку ХТМЛ‑страницы 2 Как донести подход HADI до руководства? 4




Недавно всплыло

В бюро есть таймтрекинг для сотрудников? 5 2 2 Как найти себе замену 1