Knowing how to code HTML email can bring you many opportunities, such as working as a digital designer, collaborating with front end developers, finding freelancing projects.
知道如何对HTML电子邮件进行编码可以为您带来许多机会，例如担任数字设计师，与前端开发人员合作，寻找自由职业项目。
On one of my interviews, the lead designer asked me to send him digital design works so he can evaluate my work experience. I sent him 5 different email HTML templates I did at the previous company and got the job offer as a digital designer.
在我的一次采访中，首席设计师要求我向他发送数字设计作品，以便他可以评估我的工作经验。 我给他发送了5种电子邮件电子邮件HTML模板，这些模板是我在上一家公司所做的，并获得了作为数字设计师的工作机会。
The best part is coding an email requires just a little basic knowledge of HTML and CSS. This article, demonstrated by my free series of videos, will show you how to code in the most visual way, with the least code.
最好的部分是编写电子邮件，只需要一点HTML和CSS的基础知识。 我的免费视频系列展示了这篇文章， 它将向您展示如何以最少的代码以最直观的方式进行编码。
Step 1:
第1步：
Create your HTML file
çreate您HTML文件
To start, you need to install Visual Studio Code, or Atom, or any source-code editor. Create a folder in your local computer, then create a new HTML file inside that folder and name it index.html
首先，您需要安装Visual Studio Code或Atom或任何源代码编辑器。 在本地计算机中创建一个文件夹，然后在该文件夹中创建一个新HTML文件，并将其命名为index.html
To create a new HTML template, type “html:5” and enter. You can start coding your HTML now.
要创建新HTML模板，请输入“ html：5”并输入。 您可以立即开始对HTML进行编码。
If you don’t what is HTML and CSS, let’s take it simple: HTML is all the plain text while CSS is all the styling that make your text and design colourful.
如果您不是HTML和CSS，那就简单点吧： HTML是纯文本，而CSS是使文本和设计色彩丰富的所有样式。
Right-click and open “index.html” in the lite server. Always work with the browser on the first half of your screen while the second half of your screen is the code.
右键单击并在lite服务器中打开“ index.html”。 始终在屏幕的前半部分与浏览器一起使用，而屏幕的后半部分是代码。
Step 2
第2步
Bring in your internal and inline CSS
B环的内部和内联CSS
Now you know that HTML and CSS are two separate components in front-end design. Then how can you link HTML and CSS together so the design can fully display the interface look? There are 3 ways: External CSS, Internal CSS, and Inline CSS. We use external CSS for web design. For web designers, most of the time they’re gonna create another file style.css and they put all the CSS code separately here.
现在您知道HTML和CSS是前端设计中的两个独立组件。 那么如何将HTML和CSS链接在一起，以便设计可以完全显示界面外观？ 有3种方式 ：外部CSS，内部CSS和内联CSS。 我们使用外部CSS进行网页设计 。 对于网页设计师而言，大多数时候他们将创建另一个文件style.css，并将所有CSS代码分别放在此处。
The second way is Internal CSS. Internal CSS means you put the styling of CSS inside <head> section. This way is used to set up the CSS reset and put all the repeated code in one place.
第二种方法是内部CSS 。 内部CSS表示您将CSS样式放在<head>部分中。 这种方式用于设置CSS重置，并将所有重复的代码放在一个位置。
<head>
<style>
/*CSS reset*/
body,
table,
td,
a {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
table {border-collapse: collapse !important;}</style>
</head>The third way is Inline CSS where you put the style right next to the element you want to style. For example, I want the heading to have a border so I can put the border style next to <h1>.
第三种方法是Inline CSS，您可以在其中将样式放置在要样式化的元素旁边。 例如，我希望标题具有边框，以便可以将边框样式放在<h1>旁边。
<h1 style=“border: 1px solid black;">Hello Alex!</h1>For email design, we’ll use Internal CSS and Inline CSS only.
对于电子邮件设计，我们将仅使用内部CSS和内联CSS。
Step 3
第三步
Build email layout with <table>
用乙 uild电子邮件布局的<table>
Planning the right layout from the beginning is critical because it will save you a lot of time when coding your email. When working with email, tableis the most popular structure. With this layout, you put all the content into different tables. This is how I started: I designed the email in Indesign and calculated I would need 8 different tables to design this email.
从一开始就计划正确的布局至关重要，因为它可以在编码电子邮件时节省大量时间。 使用电子邮件时， table是最受欢迎的结构。 使用这种布局，您可以将所有内容放入不同的表中。 这就是我开始的方式：我在Indesign中设计了电子邮件，并计算出需要8个不同的表格来设计此电子邮件。
The code for table is tdmeans table data while trmeans table row. So the basic structure to follow is
表的代码是td表示表数据，而tr表示表行。 所以要遵循的基本结构是
<table>
<tr>
<td></td>
</tr>
</table>For our example, we need to repeat the <table></table> for 8 times with the text on the left and the images on the right. Here is the sample code.
对于我们的示例，我们需要将<table> </ table>重复8次，左边的文本和右边的图像。 这是示例代码 。
Step 4
第4步
Add headings, paragraphs and buttons
到 DD标题，段落和按钮
Let’s bring in some headings and paragraphs.
让我们引入一些标题和段落。
<table>
<tr>
<td>
<h1>Hello Designers!</h1>
<p>My name is Rosy. I’m a full stack designer.</p>
</td>
</tr>
</table>If you don’t want to code buttons, there is an option for you with buttons.cm.You can input the button color, any border style, call-to-action and URL, and copy the automatic-generated code.
如果不想对按钮进行编码，可以使用 button.cm 为您提供一个选项。您可以输入按钮的颜色，任何边框样式，号召性用语和URL，然后复制自动生成的代码。
Step 5
第5步
Add images and videos
到 DD图像和视频
Now we bring in a background image into another table<table></table> . The code to bring in a background image is style=“background-image:url(#);background-size:cover;height:400px;".
现在，我们将背景图像引入另一个表<table></table> 。 引入背景图像的代码是style=“background-image:url(#);background-size:cover;height:400px;" 。
The most tricky part is the link you bring in has to be a permanent link, not a relative path. Permanent link is when your file is hosted online on the Internet while relative path refers to the local file on your computer. There are two ways to create permanent link: Upload your files (photos, videos) to your website and copy the URL or you can host in for free with Github.
最棘手的部分是您引入的链接必须是永久链接，而不是相对路径。 永久链接是指文件在Internet上在线托管，而相对路径是指计算机上的本地文件。 有两种创建永久链接的方法：将文件(照片，视频)上传到您的网站并复制URL，或者您可以使用Github免费托管。
To host your files on Github, create your Github account, create repository and upload your files to that repository. Simply add ?raw-true to the URL of your upload. Something looks like this.
要将文件托管在Github上，请创建您的Github帐户，创建存储库，然后将文件上传到该存储库。 只需在上传的网址中添加?raw-true即可。 看起来像这样。
<img src="https://github.com/rosyhnguyen/imageudemy/blob/e01769d22be196cb926eb9e950d7824cb5432db7/Asset%201.png?raw=true”>View this step in more detail with my free Udemy course here.
在这里，通过我的免费Udemy课程更详细地了解此步骤。
Step 6
第6步
Make your email responsive with @media queries
使您的电子邮件响应@media查询
Most of your customers will read your newsletters on mobile. So make sure your email is fully responsive. If you want to make your email design responsive, there’re a lot of things to do. I want to show you the three most easiest ways: @media queries, fluid table, responsive images.
您的大多数客户都会在移动设备上阅读您的新闻通讯。 因此，请确保您的电子邮件是完全响应的。 如果您想使电子邮件设计具有响应性，则有很多事情要做。 我想向您展示三种最简单的方法： @media查询，流体表，响应图像。
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}max-width is used for mobile style because it means the device cannot grow bigger in 600px while min-width applies for desktop design.
max-width用于移动样式，因为这意味着设备不能以600px增大，而min-width适用于桌面设计。
So what if fluid table? Fluid table means your table gonna resize when you resize the browser or when you do use different device. All you need to do is to add max-width to tables and images.
那如果流体表呢？ 流体表意味着您在调整浏览器大小或使用其他设备时将调整表大小。 您需要做的就是为表格和图像添加max-width 。
table {max-width: 100% !important;}<img src=“#?raw=true" style="width: 100%; max-width: 600px;">And one more thing we can do is to add display:block to images to make them fully responsive.
我们可以做的另一件事是在图像上添加display:block以使它们充分响应。
<img src=“#?raw=true" style="width: 100%; max-width: 600px; height: auto; display: block;">Step 7
步骤7
Add animation without code
没有代码的 dd动画
Adding GIF to your HTML is a visual way to create animation without any front end code. You need to use Photoshop or familiar tools to create a GIF first. Here are 6 handy animation tutorials to enhance your work.
在HTML中添加GIF是一种创建动画的可视方式，无需任何前端代码。 您需要先使用Photoshop或熟悉的工具来创建GIF。 这里有6个便捷的动画教程，可以帮助您增强工作效率。
After exporting as .gif file, host it either on GitHub or your personal website. Remember to add ?raw=true to the URL to make it the permanent link (refer back to step 5).
导出为.gif文件后，将其托管在GitHub或您的个人网站上。 切记在URL上添加?raw=true使其成为永久链接(请参考第5步)。
<img width="600" height="auto" style="max-width: 100%;" src="https://github.com/rosyhnguyen/imageudemy/blob/fedfec0cf9ca639ef3eaf4b4be26b1a4702709dd/cowboy.gif?raw=true">Step 8
步骤8
Email Accessibility Standards
电子信箱无障碍标准
Email accessibility when you make sure that people what disable or who are using assisted technologies don’t miss out any key information when they receive your email.
当您确保禁用或正在使用辅助技术的人员在收到您的电子邮件时，不会错过任何关键信息。
Making sure your email accessible is really important because you may miss a large portion of the audience if your email fails accessibility standards.
确保电子邮件的可访问性非常重要，因为如果您的电子邮件不符合可访问性标准，您可能会错过很大一部分受众。
First, always have the language semantic lang=“en” . To know which language code you should use, see the list here.
首先，始终使用语言语义lang=“en” 。 要了解您应该使用哪种语言代码，请参阅此处的列表。
Second, ensure your text color high contrast. Colorsafe is a my favourite visual tool to check text contrast. 5:1 is a safe ratio.
其次，确保您的文本颜色具有高对比度。 Colorsafe是我最喜欢的视觉工具，用于检查文本对比度。 5：1是安全比率。
Third, have a consistent alignment. For example, all the text in my design is left aligned, which helps reader easy to follow my content sequence.
第三，保持一致。 例如，我设计中的所有文本都保持左对齐，这有助于读者轻松遵循我的内容顺序。
Forth, make sure all of your images have the alt — it’s a description of your image; all of your table has the role=“presentation”
第四，确保您所有的图像都有alt这是对图像的描述； 您所有表的role=“presentation”
Step 9
步骤9
Now your HTML templates are ready, how can you send them out?
现在您HTML模板已准备就绪，如何发送出去？
Not many email provider allows you to send your own custom HTML templates for free, like MailChimp and Campaign Monitor do charge you with a paid plan. However, you can import your HTML into MailJet, ConvertKit or Gmail for free with limited quantity. This is my full review about free deployment options.
没有多少电子邮件提供商允许您免费发送自己的自定义HTML模板，例如MailChimp和Campaign Monitor会向您收取付费计划的费用。 但是，您可以将HTML数量有限地免费导入到MailJet，ConvertKit或Gmail中。 这是我对免费部署选项的完整评论。
Step i++
步骤i ++
How to find inspiration for your emails
^ h OW找到你的电子邮件灵感
I want to show you how you can find inspiration to create your stunning emails. Everyday I receive many emails from brands I love. I click “View Online” and then right click “View page source” and see all the HTML and CSS that brand uses to create their emails.
我想向您展示如何找到灵感来创建精美的电子邮件。 每天我都会收到许多我喜欢的品牌的电子邮件。 我单击“在线查看”，然后右键单击“查看页面源”，然后查看该品牌用于创建其电子邮件的所有HTML和CSS。
You can learn their basic HTML and CSS code, how they set up their head section and how they reset all the CSS. Bring this code back to your Visual Studio Code. Now you have an email that look exactly like the email you like. You can apply all the steps in this article to create a new look for your HTML email.
您可以学习它们的基本HTML和CSS代码，如何设置其头部以及如何重置所有CSS。 将此代码带回到您的Visual Studio代码。 现在，您将收到一封与您喜欢的电子邮件完全相似的电子邮件。 您可以应用本文中的所有步骤来为HTML电子邮件创建新外观。
Feel free to ping me on LinkedIn. For more useful resources, or 1-on1 Q&A chat, read more on my Quora space here!
随时在 LinkedIn 上对我执行ping操作 。 欲了解更多有用的资源，或1-ON1 Q＆A聊天，了解更多关于我的Quora的空间 在这里 ！
Visit me at my portfolio site ☕🤞
在我的投资组合 网站上 访问我 ☕🤞
翻译自: https://blog.prototypr.io/transform-email-designs-into-html-css-with-the-least-coding-b21a911199cf
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/275621.shtml
如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！相关文章
Hulu CEO预计网站本年营收将达5亿美元
面对 this 指向丢失，尤雨溪在 Vuex 源码中是怎么处理的
单选按钮步骤流程向导 js_创建令人愉快的按钮的6个步骤
axios怎么封装，才能提升效率？
护肤产生共鸣_通过以人为本的设计编织共鸣的20个指针
谷歌已推送 Android Q Beta 1
对使用CodeSmith模板生成NHibernate的代码的分析
若川诚邀你加源码共读群，每周一起学源码
matlab 规范,matlab-代码-规范
zoom视频会议官网_人性化视频会议的空间（Zoom等）
KOFLive Postmortem
单调队列优化多重背包
2021年7月 虾皮、货拉拉、有赞等面经总结
谷歌抽屉_Google（最终）会杀死导航抽屉吗？
axure9控件树 rp_如何在Axure RP 9中创建分段控件
【送书-小姐姐配音】低代码平台的核心价值与优势
sketch钢笔工具_设计工具（Sketch，Adobe XD，Figma和InVision Studio）中奇怪的一项功能
Python进阶：如何将字符串常量转化为变量？
