首页
博客
网页设计创建HTML电子邮件:网页设计师概述

创建HTML电子邮件:网页设计师概述

通过威廉•克雷格 大约15分钟阅读

WebFX总裁。Bill在互联网营销行业有超过25年的经验，专门从事SEO, UX，信息架构，营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

伟大的HTML电子邮件的许多要求都与伟大的网站设计背道而驰。直到你理解了HTML的细微差别电子邮件设计在美国，这可能是一次令人沮丧、毫无结果的经历。但是，一旦你理解并接受HTML电子邮件是一种变化无常、不一致、容易出现错误的媒介，就有可能在为你自己和客户进行营销时使用它。

下面是一些来自HTML电子邮件设计世界的可靠智慧的集合，应该会让你更容易潜入。在整个过程中，穿插在叙述中，我们还包括了一些很棒的HTML电子邮件设计示例，让你了解其他人在做什么。

进入HTML电子邮件思维模式

在你开始之前，确保你放弃了像素完美的HTML电子邮件设计的概念。

要习惯这样的想法:最好的办法是控制代码如何崩溃，而不是试图阻止它崩溃。随着人们查看电子邮件的方式的多样化和电子邮件客户端的数量——桌面客户端包括Outlook、Mac OS X Mail和Thunderbird，基于web的电子邮件应用程序包括Gmail、Yahoo!Mail和Microsoft Exchange Online -几乎不可能保证你的设计看起来是一样的。

Behance假日HTML电子邮件．

这是一个事实:你的HTML电子邮件设计将打破

你美丽的HTML电子邮件设计将打破。这是无法回避的。在那10,000个通讯收件人的名单上，有些人会使用一些如此晦涩或如此古老的电子邮件客户端，你根本不可能为此做好准备。

即使是流行的应用程序(Gmail, Outlook, Thunderbird, Mail等)在呈现HTML时也没有真正的一致性。因此，你必须克服试图让你的HTML电子邮件看起来完全相同和完美的每个人看到它的想法。这是不可能发生的。

你能做的最好的事情就是预测每个主要客户会如何破坏你的设计，然后试着控制它如何破坏，这样你的大多数收件人仍然可以读懂。CSS奖HTML电子邮件。

使用HTML表格的电子邮件布局

设计HTML电子邮件违背了许多公认的优秀网页设计的最佳实践。例如，虽然网页设计师早就放弃了使用表格进行网页布局，但HTML电子邮件需要使用HTML表格，而不是CSS和基于div的布局。

这是因为它无法预测CSS将如何在各种电子邮件客户端上被处理，而基于div的布局(现代网页布局的最佳实践)依赖于CSS来定位和对齐。

使用Photoshop为HTML表格布局

如果你已经忘记如何使用HTML表格进行布局——或者如果你是一个从未使用过HTML表格的年轻网页设计师，请使用Photoshop的帮助来开始。在Photoshop中，你可以使用切片工具．

首先，使用切片工具将你的HTML电子邮件布局切割成几个组件。接下来，转到文件>保存为Web和设备。选择文件格式(JPG或GIF比PNG更广泛支持)，然后按保存。

您将看到一个对话框窗口，底部有一些保存选项。下另存为类型,选择HTML和图像．这对于布局设计中的图形元素很有效，但您需要确保文本是HTML，而不是图像，因此需要在标记中替换它们。

此外，还需要清理HTML输出，因为它可能会添加不必要的HTML垃圾。自动化工具并不能很好地替代手工编写的代码，但它至少可以让您开始。

布局边距和填充

另一件需要记住的重要事情是，并不是所有的电子邮件客户端对待页边距和填充都是一样的。

对于任何重要的位置，最好是嵌套表格单元格，而不是使用CSS边距或填充。BuySellAdsHTML电子邮件．

图像需要特殊处理

当涉及到图像时，有一些注意事项需要处理。

图像格式

首先，你可能会想要坚持其中一种jpg或gif的HTML电子邮件模板，因为不是所有的电子邮件客户端支持png．

确保您指定了您的映像高度而且宽度属性——无论如何这都是很好的实践——以防止呈现中的任何问题。

使用Alt属性

你应该总是给出你的图像alt属性;它在HTML电子邮件中绝对是至关重要的。默认情况下，许多电子邮件客户端在第一次打开电子邮件时不显示图像。

相反，他们要求用户主动选择显示图像。这一额外步骤的后果是，许多用户根本不会费心显示图像。没有alt属性，电子邮件收件人可能会失去一些内容。

下面是一个HTML电子邮件看起来像Gmail默认。注意邮件中的图片alt属性，描述它试图显示的图像。

避免CSS背景图像

背景图像也很棘手。

例如，Gmail对于如何处理CSS背景图像(或背景颜色，取决于它们在标记中的指定方式)非常特别，因此请确保在发送到列表之前进行彻底测试。Outlook 2007如果不经过小的破解，根本不会显示背景图片。Kate Spade HTML电子邮件。

重要的信息不应该是图片

作为一个基本的经验法则，图形元素应该使用图像，文本元素应该使用文本。

无论你是在设计网页还是HTML电子邮件，这都是一个很好的实践。由于电子邮件最初打开时通常不会显示图像，因此关键信息以纯HTML文本而不是图像形式显示是有意义的，以确保它们可访问。Broadsheet Melbourne HTML电子邮件。

HTML电子邮件布局更窄

HTML电子邮件的常规标准宽度约为600px。

从设计960px+的网页布局回到600px是一个很大的变化。你实际上失去了超过三分之一或更多你习惯的屏幕空间。这就是为什么简化你的设计很重要。

一列是理想的，但如果你注意比例和布局，两列也可以。三个或更多将是一个挑战。它可以比600px宽一点或窄一点，但你要使用600px作为你的基线。

更宽，你几乎肯定会需要一大部分收件人水平滚动。如果你走得更窄，你就不能很好地利用可用空间。CorbisHTML电子邮件．

保持HTML电子邮件尽可能简单

简单,极简主义设计经常工作最好。

这有几个原因，其中最主要的是极简设计通常有更少的代码和图像资产需要破坏。专注于创建简单，干净的专业设计，并充分利用最少数量的图像。看看可以简化代码和整体布局的方法。

不要误以为用一张图片就能解决你所有的编码问题。只有一张图片、几乎没有其他内容的电子邮件是黑名单的热门目标。所以，虽然表面上看起来是个好主意，但它可能会导致你的电子邮件被转移到垃圾邮件过滤器或根本无法发送。

宜家HTML电子邮件．

小心使用CSS

在HTML电子邮件中使用CSS是很棘手的。我们已经讨论过它如何不适用于布局，但是当为电子邮件而不是web编写CSS时，还有其他事情要记住。

使用内联CSS

首先，您的CSS属性需要内联，而不是在您的< >头或者在单独的样式表上。

这是我们必须在HTML电子邮件中使用的另一个糟糕的网页设计实践。

不要使用简写的CSS

其次，避免使用CSS简写，因为正如你可能已经猜到的那样，电子邮件客户端和web应用程序之间对此有不同的支持。例如，一些电子邮件客户端不支持3个字符的十六进制颜色编码(例如:

使用# FFFFFF对于白色，不是# FFF)．指定每个字体属性。例如，declare字体类型，字体大小，字体样式分开，而不是一起字体声明。

旧海军HTML电子邮件。

其他常见问题

编写HTML电子邮件有很多可能的问题，几乎不可能全部讨论。这就是为什么测试你的邮件是绝对重要的。这里还有其他一些需要注意的事情。

文本调整

自动调整文本大小会导致各种各样的问题，尤其是在基于表格的布局中。加倍大小声明可以帮助避免这个问题(如果电子邮件客户端忽略了一组属性，它将坚持另一组属性)。

链接的颜色

链接颜色是电子邮件客户端可能倾向于恢复到默认蓝色的另一个领域。

所以，要么设计你的电子邮件，让默认的链接颜色是可以的，或者增加一个额外的跨度在你的链接标签中，在父元素和子元素中定义颜色，如下所示:

link .

蓝铃HTML电子邮件。

使用HTML电子邮件模板

开始使用HTML电子邮件设计的最简单的方法之一是适应现有的HTML电子邮件模板。由于电子邮件传递的问题，HTML电子邮件，几乎从定义上讲，比网站更标准化。你在更多的限制和不一致的情况下工作，所以在别人尝试和测试过的工作的基础上进行构建，在你的旅程开始时是有益的。

只需学习专业HTML电子邮件设计师创建的模板，就可以帮助你制作更好、更少出错的HTML电子邮件。然后，一旦你更熟悉电子邮件设计的过程和你必须处理的不一致，你会有一个更容易从头设计。

CampaignMonitor的免费HTML电子邮件模板

CampaignMonitor有最好的吗HTML电子邮件模板库在那里。

作为领先的电子邮件营销网络应用程序之一，他们也恰好是备受推崇的专家，当涉及到HTML电子邮件设计，并贡献了大量的信息关于工艺(他们甚至写了一个关于它的书)．在他们的HTML电子邮件模板库中，他们已经招募了一些顶级的网页设计师——包括Elliot Jay Stocks, megan Fisher, MetaLab和Simon Collison——来设计超过100个高质量的HTML电子邮件模板，这些模板漂亮，功能强大，而且基本上没有故障和不一致(任何电子邮件模板都可以)。如果你想要调整模板，或者只是通过研究预构建模板来学习HTML电子邮件设计最佳实践，它们绝对是最好的开始。

以下是他们提供的一些HTML电子邮件模板:由45royale设计。由45royale设计。由Elliot Jay Stocks设计。megan Fisher设计。megan Fisher设计。由MetaLab设计。Mike Kus设计。Mike Kus设计。Newism设计。Simon Collison设计。Veerle Pieters设计。MailChimp也有许多免费的电子邮件布局模板，你可以下载。它们只是你用自己的图形和文本元素填充的基本布局设计。如果你对从头开始设计更感兴趣，它们是一个很好的开始。