Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tjwudi/7f800ac786e1d386dffe to your computer and use it in GitHub Desktop.
Save tjwudi/7f800ac786e1d386dffe to your computer and use it in GitHub Desktop.
Making Responsive HTML Emails

原文地址

响应式HTML Email制作指南

This is a run down of my process for designing, building and testing responsive HTML emails. I’ve also included lots of links to articles and resources for further reading.

这篇文章是我对我的响应式HTML Email设计、构建和测试的流程的一个系统性的介绍。在本文中,我也加入了大量的相关文章、资源的链接,供读者阅读参考。

Starting with the Client Brief

从客户简述入手

If you are lucky like me, you’ll have a client who will supply you with an initial brief.

如果你跟我一样幸运的话,你会有一个客户给你提供一份客户简述。(译者按:客户是制作HTML Email的需求方,客户简述就是对这个HTML Email的需求进行的简要的概述)

These usually include…

  • the main objective of the email
  • the target audience
  • an early draft of the content
  • guidance on potential photography
  • ideas about potential design style

客户简述一般包括下面的内容。

  • 这封Email的主题
  • 这封Email的目标群体
  • 这封Email的内容草稿
  • 对于Email中图片的风格的一些规约
  • 一些对Email设计的想法

(Hopefully it goes without saying that writing the content and defining a marketing strategy for an email is a whole other task that won’t be covered in this article).

(当然了,Email的内容撰写、营销策略制定等并不在本文的阐述范围中)

Content
内容

This is an example of the kind of content that a typical email might include…

  • Logo
  • Main image
  • Heading 1
  • Paragraph (or two) of body copy
  • A main call to action (CTA) button
  • Contact details
  • Social media icons
  • Small print
  • Unsubscribe link
  • View in a browser link

下面是一封常见的Email可能包括的内容

  • Logo图
  • 一封大图(主图)
  • 大标题
  • 一两段的文案主体内容
  • 一个行动按钮(Call-to action button)
  • 联系方式
  • 社交媒体的链接图标
  • 小字标注的一些细则(译者按:例如注明“产品和照片上展现的可能略有不同”)
  • 取消订阅的链接
  • 在浏览器中打开查看Email的链接

What Email Clients Are Your Users Using?

你的用户用的是什么样的邮件客户端?

It’s worth trying to find out as much information as you can about the recipients early on, as this will effect the design as well as the build.

提前了解将看到你邮件的用户的一些相关信息将对你很有用,因为这将会影响到你的设计和构建的过程。

If your audience are using modern email clients you might want to try some cutting edge techniques like moving images or web fonts.

如果看到邮件的用户使用的是比较新的邮件客户端,那么你就可以使用新颖的技术来实现一些效果,例如移动的图片、webfont之类的。

The bad news is, despite community efforts the state of email standards is a lot worse than the state of web standards. And many very popular email clients (like Gmail) are reluctant to get on board with a consistent approach.

然而不好的消息是,尽管我们的社区已经很努力了,但是email相关的标准远远没有web标准来得成熟与可靠。并且很多受欢迎的邮件客户端(例如Gmail)的实现也很不情愿地和这些不成熟的email标准保持了一致。

The reality is you will probably need to support a range of web, mobile and desktop clients, including the notorious Outlook (which incase you don’t know, is like the Internet Explorer of email clients).

事实摆在眼前,你需要支持很多的web、移动以及桌面客户端,包括臭名昭著的Outlook(如果你不知道Outlook,它就好比是邮件客户端里面的IE)。

Once you know what email clients you need to support, this guide from Campaign Monitor is really useful for checking what CSS is supported by various email clients: The Ultimate Guide to CSS.

当你明确你需要支持哪些email客户端之后,Campaign Monitor制作的这份指南(The Ultimate Guide to CSS)将会帮助你检查你的CSS是否被你需要支持的客户端所支持。

The Ultimate Guide to CSS

If you can’t get any information about what email clients your users have, then this website from Litmus lists the top 10 clients according to their analytics: Email Client Market Share. You’ll notice that ‘mobile’ makes up a big chunk of users.

如果你不是太了解用户用的都是那些客户端,那么你可以看下Litmus的这个网站,它根据统计数据列出了最常用的10个邮件客户端,Email Client Market Share。你会发现,用移动客户端查看邮件的用户真的很多!

Email Client Market Share

Sketching

草绘

Once I’ve got the brief, I like to scribble all the elements I need on a piece of paper. First I’ll just list them, marking them up as h1, paragraph, call to action, small print etc.

当我拿到客户简述之后,我就会在一张纸上将我邮件中需要的所有元素全部很快地草绘出来。一开始,我只会将它们简单地列出来,然后标出它们分别是什么,例如大标题、段落、行动按钮、小字标注等。

This helps me to develop a hierarchy and a source order. And, by initially limiting myself to a single column, it forces me to think in a mobile-first kind of way.

这将会帮助我构建出一个邮件的架构,以及元素的先后顺序。并且,在一开始我只使用一栏的设计,这让我更加专注于Mobile First的理念。

Next, I’ll begin to sketch a layout, slowly grouping the elements together into a very rough design.

接下来,我会将布局也草绘出来,然后将前面列出来的元素慢慢地聚合起来,产出一个很粗糙的设计。

草绘

Designing

设计

If this is the first ever campaign, or the design is a big departure from previous campaigns, then I’ll jump into Photoshop (or whatever) at this point to mock-up a concept. This is useful for me as it helps to experiment with and gather any fonts, colours and imagery etc that I’ll be using.

如果这是第一次群发出去活动邮件,或者和之前发过的活动邮件有根本性的不同,那么我会打开Photoshop(或其他任何熟悉的工具),将邮件要传递出来的概念(concept)作出一个模型(mock-up)来。这对我来说很有用,因为我可以用任何的字体、颜色和图片等等素材来试验。

概念模型

If you are comfortable working directly in the browser than do that, I think that whatever is the fastest and most comfortable way for you to begin iterating on the design is the best route to take.

如果你觉得在浏览器里面做这件事情更快的话,那么你就应该这样做。我认为只要是对你而言最舒服的,让你能够以最快的速度对设计进行迭代的方式,就是最好的方式。

How Big Should an Email Be?
这封Email应该要多大?

Although it’s becoming less clear cut with responsive design, I still like to design my emails at around 600px wide.

尽管在响应式设计的背景下我们一般不会做定宽的设计,但是我依然是将我的设计保持在600px宽左右。

Because I’ve already sketched out my source order, I have a good idea how things will look on mobile too, so I don’t spend any time mocking things up at different widths.

因为我已经草绘出了元素的先后顺序,我也对这封邮件在移动客户端上面的展现有了很好的了解,那么我就没有必要花太多时间去设计不同宽度下面的布局了。

In terms of email height (and file weight) I think the smaller the better is a good rule of thumb. Your content should be focused and concise and this in-turn should result in a small email.

对于高度(以及文件大小),我认为越小越好是黄金法则。你的内容应该是很专注于某一话题,并且描述非常精准,这样的话你的Email大小和高度也就会相对较小。

Keep Things Simple
保持简单

My advice would be to keep things simple, just because we might be working with a 12 column grid, doesn’t mean we should use every one.

我建议让事情保持简单,就算我们最终可能使用12栏的网格系统,但这并不代表我要用他们中的每一个。

Complicated designs take a very long time to test once built. And more importantly, at 600px wide, any more than 2 or 3 columns of text is unlikely to give a comfortable read and is going to start to feel very cramped.

复杂的设计将会花掉很多的时间去测试和构建。更重要的是,在600px的宽度下,2到3栏的设计会让文字非常难以阅读,让人的视觉觉得非常拥挤。

Don’t forget how cluttered many email clients can be, don’t let your complicated design contribute to the noise. Your users probably don’t want to waste time and effort reading your email. So my recommendation would be to design with 1 column and plenty of space between elements to make things as easy as possible.

不要忘了,很多邮件客户端自身就设计得很杂乱,所以不要让你的复杂的设计给用户添乱。这样的话,你的用户可能根本就不想浪费时间和精力去阅读你的邮件。所以我的建议是就使用单栏的设计,留出足够的视觉空间,让邮件看起来很简洁。

留出足够的视觉空间

The Inbox
收件箱

Consider also how the email copy will read in the inbox view too. The user may be presented with just the name of the sender, the subject line, and just a few words from the beginning of the email, before they decide whether to read it, swipe it straight to archive, or even worse, mark it as spam.

同时你还要考虑一下邮件在收件箱里面的样子。用户可能只会看到邮件的标题和发送人,主题句,以及邮件内容的前几个词。然后用户才会去决定是否要点进去看,或者将它删除,或者更糟糕的是,将它标注为垃圾邮件。

收件箱

Spam
垃圾邮件

On the note of spam, I’d urge you take it seriously and please don’t bombard people. If you’re interested in learning more about the rules and regulations this is a good starting point: Spam Lawsuits (by MailChimp).

对于垃圾邮件,我建议你认真对待这一件事情。如果你对学习垃圾邮件相关的一些规则和归约,那么MailChimp的Spam Lawsuits这篇文章将会对你有帮助。

Build

着手构建

Choosing a Framework
选择一个框架

Personally, I’m not a huge fan of using frameworks to build websites, but when it comes to emails, there are so many hacks and gotchas that trying to build something from scratch, even if you are familiar with HTML and CSS will probably send you crazy.

对于我个人而言,我并不是很喜欢用框架来构建我的站点。但是当在制作email的时候,我们如果从头开始都是自己做而不用框架,那么我们需要面对很多的hacks,即使你对HTML和CSS非常熟悉,你可能也会抓狂。

As I’m sure most of you know, HTML emails are built with tables instead of divs for layout. And for fine-grained control over things like spacing, you may even need to put each heading and paragraph in their own table cells too.

我相信读者们大部分都知道,HTML Email是用表格(table)构建的,而不是div。为了更好地控制一些类似间隔的问题,你可能需要将标题、段落分别放到一些单元格(td)里面。

HTML Email - 基于表格

This results in horribly bloated code. And that’s before you’ve added all the CSS inline (we need to do this because Outlook and Gmail strip out CSS from the head).

这就导致了非常臃肿的代码的产生。而且,这还只是在加入CSS之前,而且还是内联的CSS(也就是直接写在元素上面的CSS)。我们需要在Email里面写内联CSS,因为Outlook和Gmail会把<head>里面的<style>去掉。

Ink

The framework I currently use is called Ink, which was created by Zurb, the people behind the Foundation framework.

我现在使用的框架叫做Ink,由Zurb开发,他是开发Foundation的作者。

Ink has a 12 column grid, that drops to a single column below 600px. They have an inliner on their website which lets you build your email in a more traditional way (i.e. keeping the HTML and CSS separate). Then the inliner can be used to process your code, and inject the relevant CSS around each element.

Ink使用的是12栏的网格,当viewport宽度小于600px时,它会变成1栏。Ink有一个代码内联工具(inliner)可以帮你将CSS内联到相关元素上面去,这样你就可以用传统的方式开发,将HTML和CSS分离了。

Once you’ve learnt how to use Ink’s grids, buttons and panels etc, then the actual build is fairly straightforward. If you get stuck then they have some great documentation available.

当你学会了如何使用Ink的网格系统,按钮和面板(Panel)之后,那么实际的构建工作就很简洁明了了。如果你哪里遇到了问题,你可以去查看官方文档。

其他工具

测试

Testing is the most difficult and tedious part about building an email. Even when using the Ink framework, I find that three quarters of my entire time on a project is spent debugging layout issues. Luckily there are lots of tools and resources out there to help.

测试是HTML Email制作过程中最难也是最无聊的一部分。就算使用的是Ink框架,我发现我有3/4的时间都是在处理一些布局上面的问题。所幸的是,我们有很多的工具和资源可以利用。

Once my email has been designed, built and processed with Ink’s inliner (to bring the CSS inline), I’m nearly ready to begin testing.

当我的Email被设计、构建并由Ink的代码内联工具处理过之后,我就可以开始准备测试了。

在测试之前不要忘了
  • Proof read of the copy

  • Double check phone numbers and email addresses (in the markup too)

  • Check you’ve included alt text and titles attributes where appropriate

  • Remove any unused CSS (frameworks are notorious for adding bloat)

  • Optimize images

  • Check your email with images turned-off

  • Update images to have absolute paths

  • 审读一次全文内容

  • 多检查一下电话号码和email地址

  • 检查所需要的alt、title属性

  • 删除多余的CSS(使用框架很容易引入无用CSS)

  • 优化图片

  • 检查在图片无法显示的时候你的Email是否正常显示

  • 图片使用绝对路径

I usually stick the images in my Dropbox public folder while testing. Many ESPs (Email Service Providers) will have the ability to host your images too.

我在测试的时候一般都是把图片放在Dropbox的public目录下以供使用。很多ESP(Email Service Provider,邮件服务提供商)也可以为你提供图片托管服务。

Note: I’ve noticed that certain imageproxys (like Outlook.com’s) will refuse to load images from certain sources. I don’t pretend to understand why this happens, but if it does, try hosting your images somewhere else.

注意:我注意到一些图片代理(例如Outlook的图片代理)会拒绝从某些特定来源加载图片。如果你遇到了这样的问题,试着在其他地方托管你的图片。

Using MailChimp to Send Test Campaigns
用MailChimp发送测试邮件

This is where MailChimp comes in for me, you can sign up for a free account and use it to send tests to a few personal accounts.

接下来我就使用MailChimp来发送测试邮件了,你可以免费注册MailChimp然后发送一些测试邮件。

Currently, I Test on the Following Email Clients…
目前,我在下列邮件客户端上面测试…
  • Gmail.com (Chrome, Firefox & Internet Explorer)
  • Outlook.com (Chrome, Firefox & Internet Explorer)
  • Yahoo.com (Chrome, Firefox & Internet Explorer)
  • AOL.com (Chrome, Firefox & Internet Explorer)
  • iPhone 5c
  • iPad
  • Mail (OSX)
  • Thunderbird (OSX)
  • Outlook (Windows)
  • Windows Live Mail (Windows)

The last email I did took about 15 tests before I was happy with it. Testing the same design 15 times on multiple email clients can get pretty demoralising, so to help ease the pain I created this handy PDF for testing email clients.

我最近一次制作的Email总共被测试了15次之后我才满意。在15个不同的邮件客户端测试同一个设计会让人非常疲惫,因此我整理了这个PDF来帮助你在邮件客户端上面测试。

Debugging Common Problems
调试常见的问题

In my experience, inspecting the code is rarely useful (and not always even possible). So the best route when you find a problem is to search the web.

根据我的经验,看代码本身对于调试一般是没有什么用的。所以当你遇到一个问题的时候,最好的方式是在网上搜索。

Here are a few common ones…

下面是一些常见的问题…

The Litmus and Email on Acid blogs are usually the best place to find solutions to problems.

LitmusEmail on Acid这两个博客一般情况下都能让你找到不错的解答。

Virtual Testing with Litmus (via MailChimp)

Once I’m happy with the design in the email clients that I have direct access to (it doesn’t need to be pixel perfect), I will run some virtual tests for good measure. These services allow you test in a whole raft of Email Clients (40+) which is pretty difficult to achieve without access to a comprehensive Device Lab.

当我对最后设计实现的结果满意的时候,我就会在一些测试服务上运行一些测试。这些测试服务允许我们在四十多种Email客户端上面进行测试,这是我们自己很难做到的,除非我们有一个专门的测试设备实验室。

There are two email testing services that I would recommend…

我推荐下面的两个测试服务…

Rather than use these services directly, I use a feature via MailChimp called Inbox Inspection. This is powered by Litmus, and if you have a free MailChimp account, it only costs $3 per test which can work out cheaper than a monthly subscription.

我并不是直接使用这些服务,而是通过MailChimp里面一个叫做Inbox Inspection的功能。这是Litmus提供的功能,如果你有个免费的MailChimp账号,那么每次测试你只需要花$3,或者你可以选择成为按月付费用户,这样会更便宜一些。

测试服务

Conclusion

总结

I hope you found this write-up of my email design process useful. It’s worth reiterating that you should keep the design as simple as possible and leave plenty of time for testing. If you have an further questions, please feel free to ask me on Twitter.

我希望你会觉得这篇文章很有用。我觉得很值得重复强调的是,你需要保持你的设计越简单越好,然后留给测试足够多的时间。如果你有更多的问题,在Twitter上给我提问即可

Lastly here are some further resources to keep you busy…

最后,一些干货分享给大家…

Design Inspiration
设计灵感来源

If you are looking for some inspiration, these sites have some good design galleries…

如果你想要一些灵感来源,那么这些网站值得一看。

Further Reading
推荐阅读
Subscribe to Some Emails
订阅一些邮件

Last of all, I find the best way to stay up-to-date with techniques and best practices is to subscribe to newsletters from the experts. These guys (as you might expect) have consistently great emails…

最后,我认为最好的保持学习的方式就是订阅一些专家发布的邮件。这些人(正如你所愿)发送的Email都很出色。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment