响应式设计如何改变邮件营销?

2015年04月01日 webpower

响应式电子邮件是基于CSS3来进行邮件HTML制作,其呈现效果会根据用户阅读的不同设备环境(系统平台、屏幕尺寸、屏幕定向等),进行邮件宽度、字体大小、内容布局、图像缩放等方面的自动响应和调整,以此实现最优的阅读显示效果。响应式电子邮件具有的弹性显示,使得用户在各种屏幕宽度的移动设备上,都能阅读到清晰的邮件内容,提升了用户阅读体验。

为什么需要响应式电子邮件?

1、全球手机用户数量达到60亿,中国手机用户近12亿;

2、近40%邮件在移动设备上打开;

3、80%的邮件阅读用户会删除显示不佳的移动邮件;

4、实践总结发现,采用响应式设计的邮件比传统邮件在移动设备上的点击率、阅读率更高,跳出率更低。

响应式电子邮件设计可以实现什么?

响应式设计如何改变邮件营销?

1、改变层级;
2、改变导航;
3、扩大字体;
4、改变颜色;
5、改变布局;
6、缩放图像;
7、填充内容;
8、改变或隐藏内容。

注意

适用于:风格简洁、区块分明的电子邮件,如期刊类电子邮件;
不适用于:背景丰富、花哨的电子邮件,如促销类电子邮件。

响应式电子邮件设计步骤

第一步 Meta标签

为了适应屏幕,多数的手机把HTML网页缩放到手机屏幕的宽度。可以使用meta标签的viewpoint属性来设置。下面的代码告诉浏览器,使用手机屏幕宽度作为内容的宽度,并且忽视初始的宽度设置。这段代码写在<head></head>里面。

如下:

<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

第二步 需要使用CSS3 Media Query(媒介查询)插件

CSS3 Media Query(媒介查询)插件,这是响应式设计的核心。它根据条件告诉浏览器,如何为指定视图宽度渲染页面。媒介查询的数量可以根据需要添加。其目的在于为指定的视图宽度设定不同的CSS规则,来实现不同的布局。

如下:

@media only screen and (max-width:480px;) /* 一般屏幕最大的手机宽度为480px,当屏幕小于480px时,自动适应。

第三步 正文编写

最外面固定下邮件的尺寸(600px-850px),里面用百分比定义,能对所有手机屏幕宽度自动适应。

<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@media only screen and (max-width:480px;)
{
.body {width:auto!important;}
.container {width:95%;height:auto;}
}
</style>
<body>
<table width="750" border="0" cellspacing="0" cellpadding="0" class="container">
<tr><td></td></tr>
</table>
</body>

支持响应式电子邮件的设备及客户端

1、支持各种设备,移动端设备阅读显示体验佳;

2、目前支持各种系统的原生客户端:苹果iOS、Android安卓、Windows Phone、黑莓系统;

3、不支持手机直接访问在线邮箱,不支持部分第三方邮件客户端:iPhone Gmail app、BlackBerry OS 5、iPhone Mailbox app、Windows Mobile 6.1、iPhone Yahoo! Mail app、Windows Phone 7&8、Androdi Gmail app、Android Yahoo! Mail app。

我要评论打印关闭
版权所有 贰零捌度(208Du.com)互联网营销 津ICP备07002886号
不良信息举报中心 - 网络110报警服务 - 网站安全检测
无觅相关文章插件,快速提升流量