建立您的创业公司：完善电子邮件模板

最新推荐文章于 2020-07-09 12:35:17 发布

cunjie3951

最新推荐文章于 2020-07-09 12:35:17 发布

阅读量5k

点赞数

文章标签： java html python 人工智能 javascript ViewUI

本教程是Envato Tuts +上的“ 使用PHP构建启动”系列的一部分。在本系列文章中，我将以我的Meeting Planner应用程序作为真实示例，指导您完成从概念到现实的启动。在此过程的每一步中，我都会将Meeting Planner代码作为开放源代码示例发布，您可以从中学习。我还将解决与启动相关的业务问题。

在本教程中，我将完善会议计划程序用来发送邀请，通知，提醒和与帐户相关的消息的HTML响应模板。

在Meeting Planner开发的初期，我主要专注于功能，还没有在设计上投入大量资金，也没有聘请设计师。今天的目标是清理现有HTML模板的外观，以使人们更容易阅读和使用基本电子邮件。

人们首次使用Meeting Planner的经历中，有一半可能是通过会议要求电子邮件发送的。

如果您尚未尝试使用会议计划器，请继续并安排您的第一次会议。我确实参与了下面的评论主题，所以请告诉我您的想法！您也可以通过Twitter @reifman与我联系。如果您想为以后的教程提出新功能或主题，我特别感兴趣。

提醒一下，Meeting Planner的所有代码都是在PHP的Yii2框架中编写的。如果您想了解有关Yii2的更多信息，请查看我们的平行系列“ 使用Yii2编程” 。

消息和模板

早期的模板

最初，我使用在网络上找到的基本框架为Meeting Planner创建早期电子邮件。他们在早期开发阶段的工作令人满意。

这是我们现有HTML电子邮件的示例；它们功能齐全，但吸引力不大。总体而言，我已经决定人们在邀请中不需要这么多的选项和链接。是时候减少过多的选择以获得更简单的体验了。

即使使用了我使用的模板，电子邮件表也经常显示出损坏而没有简单的解释：

我一直在准备迁移到更专业的电子邮件模板，但这绝对是过期。

各种讯息

以下是Meeting Planner今天定期发送的消息的摘要：

会议要求（即邀请）
会议更新以进行更改（ 也称为通知 ）
带日历文件附件的会议确认
会议提醒
请求即将举行的会议的联系信息
密码重置请求

对于Alpha测试，我希望可以通过应用可在网上找到的开源模板来达到合理的审美基准。稍后，我们将聘请一名设计师来共同增强模板，主题和品牌。

我开始在网上搜寻最佳的电子邮件模板。

开源模板资源

有许多有用的指南，例如：

许多提供商都提供了自己的开源模板：

最初，我被Mailgun模板吸引了，因为我认为它们已经过全面测试并且可以在它们之上进行构建，但最终，我决定使用Sendwithus的Oxygen电子邮件模板。 Sendwithus是Mailgun （或可能的其他电子邮件提供商）的协同营销平台，但我没有有关其整体服务的经验。

氧气提供了适用于各种情况的完整模板系列。它看起来很简单，有条理并且易于扩展：

他们提供了自己的开源电子邮件模板，而无需您成为付费用户。开源！

整合新模板

作为MVC框架，Yii将布局与主体内容分开。因此，我需要分解模板并监视组中版本之间的差异。

您可以从Sendwithus GitHub 下载Oxygen模板系列，但是它们没有明确划分每个模板通用的标准样式元素，因此您必须自己做。

花了一些时间来选择我喜欢的模板，每个模板中我喜欢的元素以及应该将哪些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(); ?>

替换常见元素

在模板中，我不得不替换许多元素：

商标
配套图片
链接

我创建了一个现在可以使用的徽标文件，并在Meeting Planner的服务器上静态托管了该徽标文件和帮助程序图像（例如，用于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绝非易事。

我从密码重置电子邮件模板开始。

重设密码

我选择了氧气显示的欢迎模板，如下所示：

每个SendwithUs的单独模板都可以在其Litmus帐户上进行预览和测试。

这是我们现在在iPhone上重置密码电子邮件的方式，比以前更加美观：

当我收到的第一个Gmail尝试对我来说不正确时，我感到有点困惑。

但是查看他们的Litmus预览显示给我的是他们在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') ?>

会议要求

人们收到的邀请见面邀请是我们最复杂的模板。它共享一个简短的介绍，可能的地点，可能的时间，有时还提供注释。

为此，我使用了氧气确认模板：

我认为“运送”和“运送日期”框可用于共享“地点”和“日期时间”选项，并且效果很好。

现在是这样的邀请：

当然，基本的美学外观要好得多。将来，我可能会做一些工作来平整和均衡地点和日期时间框的垂直高度。

这是邀请代码-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]) ?>