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

着智能手机和平板设备的流行，在电脑屏幕上看来正常的电子邮件在手机等移动设备上查阅却凌乱不已。根据一项调查，有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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

? <title>KATAUSTRIA - Email Template</title>

</head>

Markup

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

? ? <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? </table>

</body>

</html>

横幅和3Box Showcase区

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

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">

? ? ? ? <tr>

? ? ? ? ? ? <td align="center" valign="top" background="images/header-background.jpg" bgcolor="#66809b" style="background-size:cover; background-position:top;height="400"">

? ? ? ? ? ? <table class="col-600" width="600" height="400" border="0" align="center" cellpadding="0" cellspacing="0">

? ? ? ? <tr>

? ? ? ? ? ? <td height="40"></td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="center" style="line-height: 0px;"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/logo.png" width="109" height="103" alt="logo" />

? ? ? ? ? ? </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>

? ? ? ? ? ? <td height="50"></td>

? ? ? ? </tr>

? ? ? ? ? ? </table>

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? ? ? </table>

? ? ? ? ? ? </td>

? ? ? ? </tr>

吸睛标题和实际服务部分

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

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

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px;">

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">

? ? ? ? <tr>

? ? ? ? ? ? <td height="50"></td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td align="right">

? ? ? ? ? ? <table class="col2" width="287" border="0" align="right" cellpadding="0" cellspacing="0">

? ? ? ? <tr>

? ? ? ? ? ? <td align="center" style="line-height:0px;">

? ? ? ? ? ? <img style="display:block; line-height:0px; font-size:0px; border:0px;" class="images_style" src="images/icon-responsive.png" width="169" height="138" />

? ? ? ? ? ? </td>

? ? ? ? </tr>

? ? ? ? ? ? </table>

? ? ? ? ? ? <table width="287" border="0" align="left" cellpadding="0" cellspacing="0" class="col2" style="">

? ? ? ? <tr>

? ? ? ? ? ? <td align="center">

? ? ? ? ? ? <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0">

? ? ? ? <tr align="left">

? ? ? ? ? ? <td style="font-family: 'Raleway', sans-serif; font-size:23px; color:#2a3b4c; line-height:30px; font-weight: bold;">What we do?</td>

? ? ? ? </tr>

? ? ? ? <tr>

? ? ? ? ? ? <td height="5"></td>

? ? ? ? </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 "http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' 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框架——快邮，可以快速搭建一个响应式邮件。

为一名优秀的web前端人员，不懂响应式布局怎么可以呢？今天跟大家分享web前端开发和设计的干货。关于响应式布局的设计方法和响应式前端优化。

我们都知道，目前主流的pc屏幕的分辨率都是1366*768、1440*900 、1280*1024等大屏的显示器。

所以，我们设计的网页不能在按照1024的标准来设计或者是前端重构了。

再加上现在移动互联网的趋势发展这么良好，错过移动互联网这个平台是我们的最大损失。

因为国内众多电商网站还是门户网站，移动端的流量要大于pc端的。

响应式的核心优势在于设计者可以为所有设备使用同一种模板，只需要用CSS来定制内容在各种大小屏幕上的呈现方式。

一、3种响应式布局的设计方法

1、中心定位，两侧自适应

这种方法是将内容和视觉居中，而且把尺寸控制在1000px以内。左右两侧就放一些辅助信息，让他们根据屏幕宽度自适应即可。

2、单侧定位，中心延伸展开

这个方法就是把主要的内容放在左侧。这是我们阅读习惯所决定的，然后右边放一些辅助信息。中间这块是自适应屏幕宽度内容。

3、腾讯称为的小切糕全屏响应式设计。

其实小切糕全屏响应式设计算是瀑布流里面的一种。是根据屏幕宽度进行计算，以一个比较小的单元格微基础，然后以2倍，3倍，4倍等方式进行拓展，并计算出最适合的完整组合。通常用在图片信息展示页面。

二、响应式布局的组成和常用插件介绍

（1）Media Query

Media Query的主要作用是根据不同的分辨率去调整一些不同的样式。由于目前主流的移动设备都基于ios和Android，这两者的自带浏览器都是webkit内核，因此我们可以使用viewport属性和Media Query技术实现响应式网页。通过这一方法，我们能实现让基准字号font-size在不同分辨率下显示不一样的内容。

（2）Fluid grid

Fluid grid也称流体布局，就是在PC端实现的基础上将一些元素的狂傲由固定调整为弹性制的百分比或是字体比例等。使用Fluid grid的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面始终处于完整展现的状态，并且实现原有的基本功能。

（3）Flex box

Flex box是CSS3新添加的一种模型属性，它的出现有力的打破了我们常常使用的浮动布局、实现垂直等高、水平均分、按比例划分，可以实现许多我们之前做不到的自适应布局。如果你希望网站能以webapp的外观呈现在手机用户面前，那么，Flex box就是个不错的方式。Flex box和APP的结构很类似，头部底部全部固定，而中间部分的高度实现自适应。

HTML5响应式布局网站模板下载，算是一个响应式布局学习案例。

4、一套响应式布局HTML5网站网站模板下载-Wee

三、响应式前端设计的优化。主要针对用户体验的改进。

(1)减轻Javascript库负载

对于移动端来说，jQuery表现的太过厚重，而现在针对移动端的状态来说，有jQuery Mobile、YUI、XUI等可供选择的框架。

（2）减少HTTP请求次数

移动端相比较PC端有一个特殊的限制需要考虑到，就是用户的网络流量是有限的。这时候针对这些页面内部的部分操作，可以使用Ajax异步请求来完成，针对短期内不会变化的一些数据，可以使用服务器端缓存、前端缓存等机制来保存这些数据，这样可以减少用户一定的数据请求量。

（3）Javascript和CSS需要尽量压缩

把页面中使用的Javascript和CSS进行压缩之后会有效地减少页面大小。

（4）用CDN管理页面资源

CDN的即内容分发网络，意在尽可能避开互联网上有可能影响数据传输速度和稳定性的环节，使内容传输的更稳定。

（5）列表图片实现“懒”加载

移动终端设备因为屏幕大小有限，没有必要将全屏中的图片一次性加载完成，网页加载的同时，我们可以选择逐个加载，当用户进行滑动页面的时候，再继续加载图片。

（6）图片显示的优化处理

根据用户设备的分辨率来加载不同分辨率下的不同图片，这样既能给不同终端的用户一个很好的视觉体验，又不会白白浪费用户的网络数据流量。

我的微信号码：inivip

etz是干净的充分响应式宠物服务HTML模板，适合任何宠物或动物相关业务,如兽医,宠物店,养犬等。模板包括许多有趣的元素很容易编辑，建立在bootstrap前端css框架,有一个强大的选项,使主题完全可定制的。

主要特色

验证HTML5和CSS3
基于Bootstrap3.3
很容易编辑
14页包含
Mailchimp的集成
5准备配色方案
视差拖动滑块
充分响应
可滤过的画廊
CSS3动画

源码获取，前端学习交流私信“123”

在线咨询

上一篇：（基础）HTML文档结构知识点讲解
下一篇：var cTitle = '共同富裕

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

您的项目需求