免费试用
成为客座作者
您想成为为多普勒博客撰写文章的作者群体的一员吗？别再等了！将您的文章发送给我们。
立即加入
如何布局响应式 HTML
您希望您的作品显示在所有类型的设备上吗？根据我们的专家Nazareno Oviedo的建议开展全方位电子邮件营销活动。立即发现它们！
对响应式电子邮件进行编码不再是一种选择，而是实现您正在寻找的结果的前提。您能想象您的一位订阅者因为无法查看您的营销活动而无法访问您的促销活动吗？想都别想！
9 月 9 日，数百人见证了 Making Sense的 UI 开发人员Nazareno Oviedo提供的新多普勒学院在线培训。演讲者不仅提供了有关响应式 HTML的出色建议，而且还负责编写实时电子邮件营销活动。
您是否错过了网络研讨会，或者您想详细观看它以与 Nazareno 一起布置您的作品吗？这里有视频！但首先...我们建议您注册SOWEB传播总监Adrián Peláez将提供的下一次免费在线培训：“如何在您的全球战略中使用影响力营销” 。立即注册！
为什么你的作品应该是响应式的
让我们分成几部分吧！首先，Nazareno 明确了什么是 响应式电子邮件：
它是根据屏幕和电子邮件客户端的大小来适应我们的订阅者环境的。
如果您想在电子邮件营销策略中实现最大效果，您必须让任何用户和所有类型的设备（无论是智能手机、平板电脑还是上网本）都可以访问您的作品。实现它是必要的吗？答案是：当然！
根据Litmus的一项研究，四年来，移动职位 科威特电报数据 空缺增加了500%：2011 年仅占 8%；2011 年，移动职位空缺仅占 8%。今天，这一比例达到了 53%。与此同时，在桌面上打开的电子邮件数量也大幅下降：从 2011 年的 58% 下降到 2015 年的 22%。
您可以在响应式电子邮件中做什么？
桌面版本和移动设备用于组织作品元素的空间并不相同。由于空间较小，您应该考虑重新组织这些对象， 以优先考虑真正重要的内容。
借助响应式编码，您可以修改内容、图像和字体的大小 ，以确保它们完全按照您想要的方式显示，具体取决于电子邮件客户端和打开电子邮件的设备类型。
您还可以隐藏实现营销活动目标并非真正必要的内容，并将您的作品的列堆叠起来，以便文本和图像都能获得更大的视觉冲击力。
4 个技巧让你的 HTML 万无一失
#1 使用媒体查询
该术语指的是可以根据每个屏幕的特征获得特定样式的条件语句。使用媒体查询将允许您检测屏幕的大小，从而对内容、图像和结构进行更改。
使用媒体查询时，您要做的就是定义HTML 必须遵守的一系列条件。例如，如果打开电子邮件的屏幕宽度大于 600 px，则该元素应获取的颜色将为红色。或者，如果宽度小于 600 像素，则图像将以 100% 显示。
注意力！请注意，并非所有电子邮件客户端都支持媒体查询。据估计，只有 47% 的人这样做。其中最著名的是：IOS（Iphone/Ipad）、Android 4.x。本机客户端、Android Outlook.com 应用程序和 Windows Phone 7.5。
#2 选择让您的工作更轻松的软件
在创建 HTML 时，有几个程序可以为您提供很大的帮助。然而，这些是 Nazareno 向与会者推荐的：Sublime Text、Notepad和Litmus。
关于这个主题，我们必须告诉您一些您会喜欢的事情：最近，在 Doppler，我们推出了一个完全更新的HTML 编辑器 ，它允许您 100% 自定义我们新的响应式电子邮件模板。创建您的免费帐户并了解他们！
#3 发现与每个电子邮件客户端的兼容性
借助某些软件，例如caniuse.com，您将能够知道哪些 CSS 属性在不同的浏览器版本中起作用。从这个意义上说，您还可以使用Litmus在不同的电子邮件客户端中预览您的电子邮件片段。
#4 优化电子邮件中的图像
电子邮件营销的关键之一是不要将作品的设计集中在图像上，因为许多代理商默认不允许显示它们。对此我们必须补充一点，如果它们太重，卸载它们将需要更长的时间，你知道吗？在用户离开您的电子邮件之前，您只有4 秒钟的时间来影响他们。
因此，Nazareno 提供了一些建议，以帮助您的营销活动取得最大效果。请注意！
优化所有图像的权重。
使用PNG 或 JPG格式。
避免使用大于600 px的尺寸。
您准备好开始了吗？
我们的演讲者不希望培训仅停留在理论上。为了让他们能够采纳他的建议，他认为最好每个人都可以访问他在网络研讨会期间编写的HTML 代码。所以……给你了！
您是否错过了任何概念？不用担心！我们为您留下我们专家的 演示，以便您回顾所看到的一切。向前！
