Пишем свой стартап: очистка шаблонов электронных писем

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

Final product image — What You'll Be Creating

Этот учебник является частью серии статей Пишем свой стартап на PHP на Envato Tuts +. В этой серии я направляю вас через запуск приложения от концепции до готового продукта, используя приложение Планировщик встреч в качестве реального приложения. На каждом шаге я делаю релиз кода планировщика собраний в качестве примеров с открытым исходным кодом, из которых вы можете узнать что-то новое. Я также рассмотрю связанные с запуском бизнес-вопросы по мере их возникновения.

В этом учебном пособии я буду очищять гибкие HTML шаблоны электронных писем, которые использует Планировщик собраний для рассылки приглашений, уведомлений, напоминаний и связанных с учетной записью сообщений.

На начальном этапе разработки Планировщика встреч я сосредоточился прежде всего на функциональности и еще не вложил значительных средств в дизайн и даже не нанял дизайнера. Сегодняшняя цель - очистить внешний вид существующих шаблонов HTML, чтобы основные электронные письма были более читабельными и удобными для людей.

Вероятно, половина первого опыта людей с Планировщиком собраний будет через электронную почту с запросом на собрание.

Если вы еще не опробовали Планировщик собраний, то обязательно запланируйте свою первую встречу. Я участвую в комментариях ниже, так что скажите мне, что вы думаете! Вы также можете связаться со мной в Twitter @reifman. Меня особенно интересует, если вы хотите предложить новые функции или темы для будущих учебников.

Напомним, что весь код Планировщика собраний написан в Yii2 Framework для PHP. Если вы хотите узнать больше о Yii2, ознакомьтесь с нашей параллельной серией Программирование с Yii2.

Сообщения и шаблоны

Ранние шаблоны

Первоначально я использовал базовые фреймворки, которые я нашел в Интернете, чтобы создавать первые письма для Планировщика собраний. Они хорошо работали на ранней стадии разработки.

Вот пример наших существующих HTML-писем; они функциональны, но выглядят не очень привлекательно. И, в целом, я решил, что людям не нужны эти многочисленные варианты и ссылки в их приглашениях. Пришло время уменьшить множество вариантов для более простого опыта.

Meeting Planner Templates - Original HTML Invitation Template

Даже с шаблонами, которые я использовал, таблицы электронной почты часто казались поврежденными без объяснения причин:

Meeting Planner Templates - Example of Corrupted View of Invitation in Gmail

Я собирался перейти на более профессиональные шаблоны электронной почты, но я явно запоздал с этим.

Разнообразие сообщений

Ниже приведен список сообщений, которые регулярно отправляет Планировщик собраний:

запросы на собрания (т. е. приглашения)
обновление cобраний для изменений (также известны как уведомления)
подтверждение встречи с прикреплением файла календаря
напоминание о встрече
запросы на контактную информацию для предстоящей встречи
запросы на сброс пароля

Для альфа-теста я надеюсь, что смогу достичь разумной эстетической основы, применяя open-source шаблоны, которые можно найти в Интернете. Затем мы наймем дизайнера, чтобы оживить шаблоны, тему и бренд.

Я начал поиск хороших шаблонов для электронных писем.

Open-Source ресурсы с шаблонами

Существует ряд полезных руководств, таких как:

И ряд провайдеров предлагают собственные шаблоны с открытым исходным кодом:

Первоначально меня привлекали шаблоны Mailgun, так как я чувствовал, что они были тщательно протестированы, и я мог бы опираться на них, но в конечном итоге я решил воспользоваться шаблонами электронных писем от Sendwithus Oxygen. Sendwithus - это синергетическая маркетинговая платформа для Mailgun (или, возможно, других поставщиков электронной почты), но у меня нет опыта работы с их общим сервисом.

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

Meeting Planner Templates - The Send With Us Oxygen Templates

Это очень приятно с их стороны предложить свои open-source шаблоны электронных писем, не требуя, чтобы вы были платным пользователем. Вперед open source!

Интеграция новых шаблонов

MVC фреймворк Yii отделяет макеты от содержимого тела. Поэтому мне нужно было разбить шаблоны и контролировать различия между вариантами внутри группы.

Вы можете загрузить семейство шаблонов Oxygen из Sendwithus GitHub, но они четко не разделяли стандартные элементы стиля, общие для каждого шаблона, поэтому вы должны сделать это сами.

Потребовалось некоторое время, чтобы выбрать, какие шаблоны мне нужны, какие элементы мне нравились в каждом, и какой CSS следует интегрировать в макет.

Разделение макета

В конечном счете, вот новый макет HTML (я вырезал стили здесь для удобочитаемости):

<?php
use yii\helpers\Html;
/* @var $this \yii\web\View view component instance */
/* @var $message \yii\mail\MessageInterface the message being composed */
/* @var $content string main view render result */
?>
<?php $this->beginPage(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=<?php echo Yii::$app->charset; ?>" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title><?php echo Html::encode($this->title); ?></title>
  <?php $this->head(); ?>
    <style type="text/css">
  ...
</style>
<link rel="stylesheet" media="screen" type="text/css" href="http://fonts.googleapis.com/css?family=Oxygen:400,700">
...
</head>
<body>
<?php $this->beginBody(); ?>
<body bgcolor="#f7f7f7">
<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%">
  <tr>
    <td align="left" valign="top" width="100%" style="background:repeat-x url(https://meetingplanner.io/img/bg_top_02.jpg) #ffffff;">
      <center>
        <?= Html::img('https://meetingplanner.io/img/transparent.png', ['class'=>'force-width-gmail']);?>
        <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="https://meetingplanner.io/img/bg_top_02.jpg" style="background-color:transparent">
          <tr>
            <td width="100%" height="80" valign="top" style="text-align: center; vertical-align:middle;">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
              <v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
              <v:textbox inset="0,0,0,0">
            <![endif]-->
              <center>
                <table cellpadding="0" cellspacing="0" width="600" class="w320">
                  <tr>
                    <td class="pull-left mobile-header-padding-left" style="vertical-align: middle;">
                      <a href="https://meetingplanner.io"><?= Html::img('https://meetingplanner.io/img/email-logo.gif', ['alt'=>'Meeting Planner logo','height'=>'47','width'=>'137']);?></a>
                    </td>
                    <td class="pull-right mobile-header-padding-right" style="color: #4d4d4d;">
                      <a href="https://twitter.com/intent/user?screen_name=meetingio"><?= Html::img('https://meetingplanner.io/img/social_twitter.gif', ['alt'=>'@meetingio on twitter','height'=>'47','width'=>'38']);?></a>
                      <!-- <a href=""><img width="38" height="47" src="http://s3.amazonaws.com/swu-filepicker/LMPMj7JSRoCWypAvzaN3_social_09.gif" alt="facebook" /></a>-->
                      <!-- <a href=""><img width="40" height="47" src="http://s3.amazonaws.com/swu-filepicker/hR33ye5FQXuDDarXCGIW_social_10.gif" alt="rss" /></a>-->
                    </td>
                  </tr>
                </table>
              </center>
              <!--[if gte mso 9]>
              </v:textbox>
            </v:rect>
            <![endif]-->
            </td>
          </tr>
        </table>
      </center>
    </td>
  </tr>
<?php echo $content; ?>
</table>
<?php $this->endBody(); ?>
</body>
</html>
<?php $this->endPage(); ?>

Замена общих элементов

Внутри шаблонов мне пришлось заменить несколько элементов:

логотип
Поддержка изображений
Ссылки

Я создал файл логотипа, который на данный момент для нас подойдет, и я статически размещал его и вспомогательные изображения, например, для Twitter, на сервере Планировщика собраний.

Я также заменил ссылки по умолчанию в письме с кодом для ссылок на наш сайт.

Создание нижнего колонтитула

Чтобы упростить повторное использование в приложении, я разделил код нижнего колонтитула:

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use common\components\MiscHelpers;
?>
<tr>
  <td align="center" valign="top" width="100%" style="background-color: #f7f7f7; height: 100px;">
    <center>
      <table cellspacing="0" cellpadding="0" width="600" class="w320">
        <tr>
          <td style="padding: 25px 0 15px">
            <strong><?php echo Html::a(Yii::t('frontend','Meeting Planner'), $links['home']); ?></strong><br />
            Seattle, Washington<br />
          </td>
        </tr>
        <tr><td style="font-size:75%;"><em>
          <?php echo HTML::a(Yii::t('frontend','Email settings'),$links['footer_email']); ?>
          | <?php echo HTML::a(Yii::t('frontend','Block sender'),$links['footer_block']); ?>
          <?php //echo HTML::a(Yii::t('frontend','Block all'),$links['footer_block_all']); ?>
        </em>
        </td></tr>
      </table>
    </center>
  </td>
</tr>

Обновление существующих шаблонов

Чтобы интегрировать шаблоны, я хотел начать с самого простого. Перемещение по сложным, незнакомым CSS и HTML никогда не бывает простым.

Я начал с нашего шаблона электронной почты «Сброс пароля».

Восстановление пароля

Я выбрал шаблон приветствия Oxygen, показанный ниже:

Meeting Planner Templates - Oxygen Welcome Template

Каждый из отдельных шаблонов SendwithU может быть просмотрен и протестирован на их учетной записи Litmus.

Вот как сейчас выглядит письмо со сбросом нароля на iPhone, гораздо лучше, чем раньше:

Meeting Planner Templates - Reset Your Password

Я был немного смущен, когда увидел первые письма в Gmail и они выглядели поврежденными.

Meeting Planner Templates - Reset Your Password in Gmail

Но просмотр их превью Litmus показал мне, как именно так они выглядят в Gmail:

Meeting Planner Templates - Oxygen Welcome in Gmail

Позже я узнал, что Gmail требует большей инкрустации CSS, чем другие сервисы. Я проведу вас через фикс этого бага в следующем учебнике.

Вот код passwordRequestToken.php:

<?php
use yii\helpers\Html;
/* @var $this yii\web\View */
/* @var $user common\models\User */
$resetLink = Yii::$app->urlManager->createAbsoluteUrl(['site/reset-password', 'token' => $user->password_reset_token]);
?>
<tr>
  <td align="center" valign="top" width="100%" style="background-color: #f7f7f7;" class="content-padding">
    <center>
      <table cellspacing="0" cellpadding="0" width="600" class="w320">
        <tr>
          <td class="header-lg">
            Reset Your Password
          </td>
        </tr>
        <tr>
          <td class="free-text">
            Hello <?php echo Html::encode(\common\components\MiscHelpers::getDisplayName($user->id)); ?>,
            Click the button below to reset your Meeting Planner password:
          </td>
        </tr>
        <tr>
          <td class="button">
            <div><!--[if mso]>
              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
                <w:anchorlock/>
                <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">My Account</center>
              </v:roundrect>
            <![endif]--><a class="button-mobile" href="<?php echo $resetLink ?>"
            style="background-color:#ff6f6f;border-radius:5px;color:#ffffff;display:inline-block;font-family:'Cabin', Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;line-height:45px;text-align:center;text-decoration:none;width:155px;-webkit-text-size-adjust:none;mso-hide:all;">Reset Your Password</a></div>
          </td>
        </tr>
      </table>
    </center>
  </td>
</tr>
<tr>
  <td align="center" valign="top" width="100%" style="background-color: #ffffff;  border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;">
    <center>
      <br />
    </center>
  </td>
</tr>
<?php echo \Yii::$app->view->renderFile('@common/mail/section-footer-static.php') ?>

Запрос на собрание

Приглашение, которое люди получают в качестве запроса на встречу, является нашим самым сложным шаблоном. Он содержит краткое введение, возможные места, возможное время, а иногда и записку.

Для этого я использовал шаблон Oxygen Confirm:

Meeting Planner Templates - Oxygen Confirm Template

Я думал, что Shipping и Date Shipped могут использоваться для совместного использования опций Place and Date Time, и это работает довольно хорошо.

Вот как выглядит приглашение:

Meeting Planner Templates - Meeting Request Template

Конечно, основной эстетический внешний вид намного лучше. В будущем я могу сделать некоторую работу, чтобы выровнять и сравнять вертикальные высоты мест и полей времени.

Вот код тела invitation-html.php:

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use common\components\MiscHelpers;
use frontend\models\Meeting;
use frontend\models\MeetingNote;
use frontend\models\MeetingPlace;
use frontend\models\MeetingTime;
/* @var $this \yii\web\View view component instance */
/* @var $message \yii\mail\BaseMessage instance of newly created mail message */
?>
<tr>
  <td align="center" valign="top" width="100%" style="background-color: #f7f7f7;" class="content-padding">
    <center>
      <table cellspacing="0" cellpadding="0" width="600" class="w320">
        <tr>
          <td class="header-lg">
            Your Meeting Request
          </td>
        </tr>
        <tr>
          <td class="free-text">
            <p><em>Hi, <?php echo $owner; ?> is inviting you to an event using a new service called <?php echo HTML::a(Yii::t('frontend','Meeting Planner'),MiscHelpers::buildCommand($meeting_id,Meeting::COMMAND_HOME,0,$user_id,$auth_key)); ?>. The service makes it easy to plan meetings without the exhausting threads of repetitive emails. Please try it out below.</em></p>
            <p><?php echo $intro; ?></p>
          </td>
        </tr>
        <tr>
          <td class="button">
            <div><!--[if mso]>
              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:45px;v-text-anchor:middle;width:155px;" arcsize="15%" strokecolor="#ffffff" fillcolor="#ff6f6f">
                <w:anchorlock/>
                <center style="color:#ffffff;font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;">Track Order</center>
              </v:roundrect>
            <![endif]--><a href="<?php echo $links['view']; ?>" style="background-color:#ff6f6f;border-radius:5px;color:#ffffff;display:inline-block;font-family:'Cabin', Helvetica, Arial, sans-serif;font-size:14px;font-weight:regular;line-height:45px;text-align:center;text-decoration:none;width:155px;-webkit-text-size-adjust:none;mso-hide:all;"><?php echo Yii::t('frontend','View Request')?></a>
          </div>
          </td>
        </tr>
        <tr>
          <td class="w320">
            <table cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td class="mini-container-left">
                  <table cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                      <td class="mini-block-padding">
                        <table cellspacing="0" cellpadding="0" width="100%" style="border-collapse:separate !important;">
                          <tr>
                            <td class="mini-block">
                              <span class="header-sm">Possible Times</span><br />
                              <?php
                                foreach($times as $t) {
                                  ?>
                                      <?php echo Meeting::friendlyDateFromTimestamp($t->start); ?><br />
                                      <?php
                                    }
                                ?>
                                <?php // echo HTML::a(Yii::t('frontend','accept all times'),$links['accepttimes']); ?>
                                <br />
                                <?php
                                if ($meetingSettings->participant_add_date_time) { ?>
                                <?php echo HTML::a(Yii::t('frontend','suggest a time'),$links['addtime']); ?><br />
                                <?php
                                }
                                ?>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
                <td class="mini-container-right">
                  <table cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                      <td class="mini-block-padding">
                        <table cellspacing="0" cellpadding="0" width="100%" style="border-collapse:separate !important;">
                          <tr>
                            <td class="mini-block">
                              <span class="header-sm">Possible Places</span><br />
                              <?php
                              if (!$noPlaces) {
                              ?>
                              <?php
                                foreach($places as $p) {
                                  ?>
                                      <?php echo $p->place->name.' '; ?>
                                      <span style="font-size:75%;"><?php echo $p->place->vicinity; ?> <?php echo HTML::a(Yii::t('frontend','map'),
                                      MiscHelpers::buildCommand($meeting_id,Meeting::COMMAND_VIEW_MAP,$p->id,$user_id,$auth_key)); ?></span><br />
                                <?php
                                    }
                                ?>
                                <br />
                                <?php // echo HTML::a(Yii::t('frontend','accept all places'),$links['acceptplaces']); ?><br />
                                <?php
                                if ($meetingSettings->participant_add_place) { ?>
                                <?php echo HTML::a(Yii::t('frontend','suggest a place'),$links['addplace']); ?><br />
                                <?php
                                }
                                ?>
                                <?php
                              } else {
                                  ?>
                                  Phone or video <br />
                              <?php
                                }
                              ?>
                            </td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="free-text">
            <?php
                if (!$noPlaces) {
                    echo HTML::a(Yii::t('frontend','Accept all places and times'),$links['acceptall']).' | ';
                }
             ?>
               <?php
               if ($meetingSettings->participant_finalize && count($places)==1 && count($times)==1) {
                echo HTML::a(Yii::t('frontend','Finalize meeting'),$links['finalize']).' | ';
               }
               ?>
               <?php echo HTML::a(Yii::t('frontend','Decline request'),$links['decline']); ?>
          </td>
        </tr>

        <?php echo \Yii::$app->view->renderFile('@common/mail/section-notes.php',['notes'=>$notes,'links'=>$links]) ?>
      </table>
    </center>
  </td>
</tr>
<?php echo \Yii::$app->view->renderFile('@common/mail/section-footer-dynamic.php',['links'=>$links]) ?>

Что дальше?

Теперь, когда базовые шаблоны были обновлены, я начну работу над исправлением их отображения в Gmail. И вскоре мы будем использовать уведомления и напоминания.

Пока вы ждете эпизодов об этих функциях, запланируйте свою первую встречу и попробуйте новые шаблоны. Кроме того, я был бы признателен, если вы поделитесь своим опытом ниже в комментариях, меня всегда интересуют ваши предложения. Вы также можете связаться со мной в Twitter @reifman напрямую.

Я также начинаю экспериментировать с WeFunder, основываясь на реализации новых правил SEC. Пожалуйста, подпишитесь на наш профиль. Я могу больше написать об этом как часть нашей серии.

Следите за предстоящими учебными пособиями в разделе серии Пишем свой стартап на PHP. Впереди у нас есть еще несколько больших функций.