移动设备邮件模板优化_制作响应式邮件模板方法剖析

智能手机和平板电脑的普及使得原本在电脑屏幕上整齐的电子邮件，在手机等移动设备上显得杂乱无章。一项调查显示，高达91%的用户倾向于在移动设备上查看邮件。因此，电子邮件的通讯设计模板亟需进行改进。

在接下来的步骤中，你或许会借助div标签和CSS样式来对邮件模板的HTML代码进行优化，然而，雅虎邮箱却选择了不同的处理方式。

鉴于HTML5与CSS3在邮件设计上存在一定的限制，构建高效响应式邮件模板的优选途径是采用传统方法进行布局设计——具体而言，这包括运用表格布局、嵌入内部CSS样式以及运用CSS和媒体查询功能。

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

尽管多数邮件软件具备媒体查询功能，然而Gmail APP在此功能上存在一定的限制。尽管如此，设计师们依然能够通过调整表格及HTML元素的百分比，实现在不同窗口尺寸下提供流畅的布局体验。

接下来，我们将逐步阐述如何运用现有知识，通过运用表格、CSS以及内部嵌入CSS等手段，在媒体查询技术的支持下，构建出适应不同设备的邮件模板。

我们需要的有：

以及Lato谷歌字体

切片图像和icon

HTML和CSS知识

媒体查询相关知识

终端输出

现代化的扁平设计

从何入手

在着手进行之前，我们必须在标题栏区域填充相应信息。首先，需引入一个XHTML文档，随后添加html标签，并设定其xmlns属性。接下来，还需添加元数据以及标题标签。

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

横幅和3Box 区

在设计这两个区域的过程中，我们计划在稍后的CSS代码中，为每个区域添加上col-600的类。同时，我们会在设计里添加一条包含公司logo及文字的横幅。对于3Box这一部分，我们将采用col3的样式，并将其宽度设定为183像素。在此过程中，还需留意的是，在高度这一方面，我们采用的是……

标签预留空间。

EMAIL

A email for your email ,

and email .

吸睛标题和实际服务部分

在构思这两个区域的过程中，我们依旧选择了col-600作为基本样式，但针对各个区域内部的构件，我们决定采用全新的class。具体到标题区域的首个图标，我们将运用col1样式以及设计文字，而字体尺寸的调整则将在后续的媒体查询中完成。

在服务实施环节，我们采用col2模式来规划每一列的布局。在此过程中，我特别运用了CSS技术，旨在为我们的设计元素增添独特的风格和品味。

What we do?

我们致力于开发和优化针对小型企业和个人用户的网站，同时确保它们在搜索引擎优化方面表现出色。

CSS

现在，所有必要的部分设计已经完成。紧接着，我们计划在标题栏区域增添若干模式。首先，我们将引入谷歌网页字体以提升整体风格。此外，邮件主题、HTML、表格等其余部分也将采用我们预先设计的模式。

关于网页字体的注意事项：鉴于邮件客户端对网页字体的兼容性存在局限，这表明并非所有邮件客户端都能够识别并使用网页字体。

@规则设定为：300、400、700、900号字体与400、300、500、600、700、800、900号字体分别对应，使用方式为文本样式，具体类型为'text/css'。

html,body {

-color:#fff;

:0;

:0

html {

width:100%

body {

:0;

:0;

--text-size-:none;

-ms-text-size-:none

table {

-:0;

-:

table td {

-:

table tr {

-:

img {

:block!

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

line-:100%

a {

text-:none

. a {

font-size:14px;

font-:'Lato',sans-serif;

color:#fff;

font-:300;

:

现在，我们要为特定的邮件客户群体注入个性化的设计元素。这样做可以确保每个独特的群体都能享受到专属的风格。

/* CLASS*/

. {

-color:#fff;

width:100%

对字体、表格单元、段落、内嵌内容以及HTML文档中的div元素，实施限制性规定。

line-:100%

. {

width:100%;

-color:#fff

/* YAHOO MAIL CLASS */

对以下样式进行限制：链接样式、悬停样式、链接元素、悬停时的链接元素、链接内的文本。

-:none!

/* CLASS */

.-edit-image {

:20px

媒体查询

进入媒体查询设计的阶段，我们需在640像素宽的视窗内，通过百分比的调整来提升并优化各个部分及元素的尺寸。

仅对特定条件下的屏幕尺寸进行样式设置，当屏幕宽度不超过640像素时，此样式将生效。

body {

width:auto!

table

class="col1"

width:29%;

table

class="col2"

width:47%;

text-align:left

table

class=""

width:64%;

text-align:left;

table

class="col3"

width:100%;

text-align:;

table

class="col-600"

width:450px

table

class=""

width:90%

img

class=""

width:60%;

:auto

.{

-left: 25px;

-right: 25px;

在CSS的最终阶段，我们将着手为480像素宽的视窗添加媒体查询功能。我们设计的众多独立元素以及一部分元素，其宽度将被设定为100%。

仅针对特定条件，当屏幕宽度不超过480像素时，{

body {

width:auto!

table

class="col1"

width:100%;

table

class="col2"

width:100%;

text-align:left

table

class="col3"

width:100%;

text-align:

table

class=""

width:80%;

text-align:;

: 0 20px 0 0;

table

class="col-600"

width:290px

table

class=""

width:82%!

img

class="-style"

width:60%

. { width: 40%; : block; }

该样式规则应用于“read-more”类，指定文本对齐方式为左对齐，并设置显示方式为块级元素。

总结

经过上述操作，大家便能够顺利地制作出适应不同屏幕尺寸的邮件模板。显而易见，我们统一采用了相同的整体设计风格。(来源：视觉中国)

切图网提供专业的psd文件转换为邮件模板的服务，同时自主研发了一款免费且开源的邮件模板CSS框架，名为“快邮”，它能够帮助用户迅速构建出响应式的邮件模板。