最近几年中，手机等移动端用户不断增长，这给人们获取信息的方式带来了变革，甚至可以说是一场革命。响应式设计这种思维方式就是在这样的大环境中兴起的，越来越多的人们开始讨论怎样做好响应式网站。然而，尽管响应式设计已经形成风潮，却很少有人提起响应式邮件的设计。

对设计师或开发者来说，html邮件可能是一个相对比较麻烦的媒介。它的客户端技术已经落后陈旧，内容、格式等又没有一定的标准规范，这使得现代的编码规则毫无用武之地，一些代码根本就无法显示出来。但邮件仍是关键的营销渠道之一，它的作用不容忽视。研究表明在手机等移动端上使用电子邮件的用户已经大大超过电脑或网页上的用户，与此同时，50%以上的移动用户会选择关闭或删除非个性化的邮件。怎样才能让邮件也跟上互联网时代发展的潮流呢?响应式的邮件是一个很好的选择， 在邮件呈现上，通过页面隐藏、折叠、扩展等，它可以给PC端用户和移动端提供舒适的体验。那么响应式的html邮件应该是什么样的呢?今天小飞就带大家一起看看为什么我们应该选择响应式邮件以及响应式邮件应该具备哪些特点。

如果您曾经使用手机打开一个固定宽度的邮箱，您可能更能体会响应式的邮箱设计的必要性。因为一个固定宽度的邮件在移动设备的小屏幕上显示时，整体布局通常会被缩小，这时它通常会出现以下缺点：

阅读感受不佳

邮件布局整体缩小，这意味着如果用户想要阅读完整的内容就必须放大邮件内容，一旦邮件内容放大了他们就需要不停的横向移动，从左至右浏览信息，但研究表明用户在浏览邮件时习惯由上至下。这破坏了用户的浏览习惯，而且来来*滚动多次才能看完文章，无形之间带来了不少的麻烦。不少用户认为这种麻烦会消磨他们的耐心，让他们无法完成阅读。

链接和按钮不可见

在移动端上，人们通常习惯使用手势操作，邮箱的整体布局缩小，这也意味着邮件中的链接和"行为引导"按钮会变小，这样一来用户就无法有效的进行点击，相关信息就得不到用户的关注。特别是"行为引导"按钮，如果我们的按钮不够明显，用户一般不会给予特别关注，这直接的影响了邮件的转化率，以及它在增加网站流量、销售额等方面的效用。

图片显示不全等问题

邮件中的图片显示是一个大问题。在PC端进行浏览时，多样的图片可能最能体现网站的活泼、丰富，拉近与用户的距离。但是在移动端使用数据流量时，用户很可能不想进行大量图片的加载。其次，多张图片在移动端展示时可能因为尺寸等问题显示不全，难以呈现PC端的那种效果。另外还有一些时候，某些用户无法看见邮件中的图片，虽然iphone的本地邮箱默认显示图片，但是有很多移动客户端都限制图片的载入。

响应式邮件应具备的特点：

就像响应式网站能够同时适用于电脑、手机等多种设备，响应式邮箱能够同时适用多种终端，一封邮件能够根据不同的设备以相应的格式来呈现。那么做好一个响应式邮箱有哪几个关键点要把握呢?

1. 内容清晰简练

内容是网站永恒的主题，邮箱更是如此。因为移动设备的屏幕相比PC端要小，能够利用的空间比较少，这时怎样通过小屏幕完成与用户的互动显得尤为重要。尽量保持邮件的内容清晰简练，不是所有的信息都同样重要，筛选出比较重要的信息，不要什么信息都放上去让邮件显得很拥挤。另外，按信息的重要程度垂直排列，最重要的、最希望用户看见的内容放在最上方，突出显示优先级的信息。

2. 单列的设计布局

简洁是邮箱设计的核心。在手机等移动端上浏览邮件，我们需要着重考虑用户使用时的流畅性。虽然多列的设计布局在邮件中也可以显示出来，但是单列的是最理想的选择，宽度不超过640px的布局比较适合手机阅览。这样就算有些设备只能缩小邮箱的整体布局，我们也不用担心是否会有内容显示不出来。

3. 明显的行为引导按钮

就像我们在上面提过的，如果行为引导按钮不够明显，用户可能根本就不会注意到，那我们的邮件究竟还有何意义?因此这些行为引导按钮应该足够大，以方便用户进行点击，不过按钮和其他的链接也要尽量分散开来，防止用户不小心点错了，做到用户友好再友好。苹果ios的人机界面推荐最小的按钮区域应该是44*44px，因此行为引导按钮的区域面积最好大于这个数值。

4. 文本左对齐

邮件的文本最好左对齐，同时我们可以将重要的元素放到内容区域的左边，这可不是小飞随便说说的，它的背后有很多理论支撑。首先，有相关视觉追踪的研究表明用户会将大部分的注意力集中在邮箱内容的左边，这点可能没什么好惊讶的，因为我们的阅读习惯是从左向右的。而且，一些操作系统，特别是安卓的，在无法缩放邮件完美适应小屏幕时，通常只展示邮件的左侧内容(也许有些用户使用安卓手机会出现这种情况呢)。另外，从人体工程学的角度来说，大部分用户觉得手持屏幕时与左下角或中间位置的内容交互最容易。

5. 响应式图片

图片是响应式邮件设计中不可忽视的一环。就像我们前面提到的一样，不要使用固定宽度的图片，将图片设置成响应式的。这一点可以通过给图片设置相关单位，或者使用支持响应式的框架(比如Bootstrap)， 用响应式图片class名控制(例如class="img-responsive")来解决。另外，移动设备在加载图片时通常会比PC端要慢，所以不要放一些与邮件不相关的图片，做到简洁明了。

6. 大号的字体

考虑到很多邮件客户端不直接显示图片，文字往往是用户看见的第一要素。为了便于用户阅读，在设计响应式邮件时，使用的字体尽量大一点。因为如果字体比较小，再加上相近的背景色，用户在阅读时可能会有困难。建议至少使用13px以上的字体(13px是iPhone手机上的最小字体)。

除了以上这些要点，在做响应式邮箱时，我们还应该注意以下几点：邮件主题栏应该简短有力，引人入胜;减少或隐藏导航菜单;使用多种测试工具等。总之，考虑的越周全，做出的响应式邮箱越会合用户的口味。

小飞相信以上这些建议应该能给您很多启发，让您对响应式邮件有新的看法和认识。在 起飞页自助建站平台（）做网站，您可以免费获得一个响应式的邮箱。现在使用移动端邮箱的人这么多，如果您是做网上商城的，那就更加不能错过了。响应式邮箱可以给您的用户提供舒畅的浏览体验，能够帮助树立公司高大上的品牌形象。

起飞页上的响应式邮箱在哪?在做好一个网站之后，您只需点击"后台"，就会看见如下页面，再点击"设置"中的"邮件模板设置"。起飞页已经为您设计了多种风格不同的邮箱模板，您找到自己满意的，点击即可使用。除此以外，您还可以通过修改整体设定、logo、页眉和标题栏等自定义自己邮箱的风格。快来起飞页自助平台做一个属于自己的网站吧!