制作响应式邮件模板方法剖析

切图和跨屏 07-28 242

前言：

眼前咱们对“html5邮件”都比较重视，咱们都需要学习一些“html5邮件”的相关知识。那么小编在网络上网罗了一些对于“html5邮件””的相关文章，希望小伙伴们能喜欢，我们快快来了解一下吧！

随着智能手机和平板设备的流行，在电脑屏幕上看来正常的电子邮件在手机等移动设备上查阅却凌乱不已。根据一项调查，有91%的用户会在移动设备上查阅邮件。电子邮件通讯设计模板亟待优化。

接下来，你可能会用div或CSS编写HTML代码改良邮件模板，但Outlook或雅虎邮箱却另辟蹊径。

由于HTML5和CSS3在邮件设计方面有所局限，设计响应式邮件模板的最佳方式是使用传统方式打造邮件布局——利用表格、内部插入CSS、inline CSS和媒体查询。

是否所有邮件客户端都支持媒体查询？

虽然大部分邮件客户端都支持媒体查询，但仍有Gmail Android APP在这方面有所局限。不过设计师们仍然可以增加表格和HTML元素的百分率，在不同的视窗上创建流畅的体验布局。

接下来，我们将一步步解析如何应用现有信息，使用表格、inline CSS和内部插入CSS等方式，在媒体查询技术的辅助下，创建响应式邮件模板。

我们需要的有：

Raleway以及Lato谷歌字体

切片图像和icon

HTML和CSS知识

媒体查询相关知识

终端输出

现代化的扁平设计

从何入手

开始之前，我们需要在标题栏内放入内容。首先，我们要增加一个XHTML文档，紧接着加上html标签，创建类型为xmlns。剩下的是元信息和标题标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>KATAUSTRIA - Email Template</title>

</head>

Markup

至于markup，我们需要利用表格重新开始，在表格中增加属性。

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</body>

</html>

横幅和3Box Showcase区

设计这两个部分时，我们稍后在CSS中会将每个部分用col-600 class包裹。我们将在设计中增加一个带有logo和文字的横幅。至于3Box Showcase，我们将用到col3，将宽度设为183。需要注意，在高度这里我们使用的是<td>标签预留空间。

<tr>

<tr>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

<td align="center" style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:24px; font-weight: bold; letter-spacing: 7px;">EMAIL <span style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:39px; font-weight: 300; letter-spacing: 7px;">TEMPLATE</span>

</td>

</tr>

<tr>

<td align="center" style="font-family: 'Lato', sans-serif; font-size:15px; color:#ffffff; line-height:24px; font-weight: 300;">A creative email template for your email campaigns, promotions <br/>and products across different email platforms.

</td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

吸睛标题和实际服务部分

设计这两个部分时，我们仍然使用class col-600，不过对于每个部分的内部元素，我们将采用完全不同的class。对于标题部分的第一个icon元素，我们要用到col1和col3_one设计文字。我们稍后会在媒体查询中调整字体大小。

在实际服务部分，我们会使用col2设计每一栏。在这里需要注意，我使用了一个inline CSS为我们的设计元素增加某些格调。

<tr>

<tr>

<tr>

</tr>

<tr>

<tr>

</td>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

<tr>

<td style="font-family: 'Lato', sans-serif; font-size:14px; color:#7f8c8d; line-height:24px; font-weight: 300;">We create responsive websites with modern designs and features for small businesses and organizations that are professionally developed and SEO optimized.

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

CSS

现在，所有需要用到的部分都设计好了，接下来我们需要在标题栏部分增加一些模式。首先为markup增加整体风格。插图谷歌网页字体，其余部分将包含我们为邮件主题、html、表格等等设计的模式。

关于网页字体的小提示：根据Campaign Monitor，邮件客户端对网页字体的支持有限，这以为着不是所有客户端都支持网页字体。

@import "' rel='stylesheet' type='text/css";

html,body {

background-color:#fff;

margin:0;

padding:0

}

html {

width:100%

}

body {

margin:0;

padding:0;

-webkit-text-size-adjust:none;

-ms-text-size-adjust:none

}

table {

border-spacing:0;

border-collapse:collapse

}

table td {

border-collapse:collapse

}

table tr {

border-collapse:collapse

}

img {

display:block!important

}

br,strong br,b br,em br,i br {

line-height:100%

}

a {

text-decoration:none

}

.button a {

font-size:14px;

font-family:'Lato',sans-serif;

color:#fff;

font-weight:300;

background:transparent

}

接下来，让我们为特别的邮件客户群增加独特风格。这能让每一种不同的群体都有不同的风格。

/* OUTLOOK CLASS*/

.ExternalClass {

background-color:#fff;

width:100%

}

.ExternalClass,.ExternalClass font,.ExternalClass td,.ExternalClass p,.ExternalClass span,.ExternalClass div {

line-height:100%

}

.ReadMsgBody {

width:100%;

background-color:#fff

}

/* YAHOO MAIL CLASS */

.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span {

border-bottom:none!important

}

/* MAILCHIMP CLASS */

.default-edit-image {

height:20px

}

媒体查询

到了媒体查询设计的步骤，我们需要在640px视窗中使用百分率增加并调整每个部分和元素的尺寸。

@media only screen and (max-width: 640px) {

body {

width:auto!important

}

table[class="col1"] {

width:29%;

}

table[class="col2"] {

width:47%;

text-align:left

}

table[class="col3_one"] {

width:64%;

text-align:left;

}

table[class="col3"] {

width:100%;

text-align:center;

}

table[class="col-600"] {

width:450px

}

table[class="insider"] {

width:90%

}

img[class="images_style"] {

width:60%;

height:auto

}

.margin{

margin-left: 25px;

margin-right: 25px;

}

在最后的CSS环节，我们将开始为480px视窗增加媒体查询。我们设计的大部分独立元素和部分将被设置为100%。

@media only screen and (max-width: 480px) {

body {

width:auto!important

}

table[class="col1"] {

width:100%;

}

table[class="col2"] {

width:100%;

text-align:left

}

table[class="col3"] {

width:100%;

text-align:center

}

table[class="col3_one"] {

width:80%;

text-align:center;

margin: 0 20px 0 0;

}

table[class="col-600"] {

width:290px

}

table[class="insider"] {

width:82%!important

}

img[class="images-style"] {

width:60%

}

.button { width: 40%; display: block; }

a.read-more { text-align: center; display: block;}

}

总结

通过以上步骤，各位就能成功设计响应式邮件模板了。不难看出，我们所有的整体风格都使用了inlineCSS。(来源：视觉中国)

切图网（qietu.com）提供优质的psd转邮件模板制作，并且开发了一款免费、开源的邮件模板css框架——快邮，可以快速搭建一个响应式邮件。

本文地址：http://www.longkongtuishu.com/ca961AmsHAVcECA.html

标签： #html5邮件