最少的编码
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
Create folder “Testing” then click on “New file” and name it index.html創建文件夾“ Testing”，然后單擊“ New file”并將其命名為index.htmlTo 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是使文本和設計色彩豐富的所有樣式。
Left: HTML only vs Right: HTML and CSS左：僅HTML與右：HTML和CSSRight-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.
第三，保持一致。 例如，我設計中的所有文本都保持左對齊，這有助于讀者輕松遵循我的內容順序。
All the text in my design is left aligned我設計中的所有文本都保持對齊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電子郵件創建新外觀。
To explain my steps better, I created my free Udemy course after a lot of effort in 2 months self isolation to give back to design community “Design to Code: Turning Email Designs into HTML and CSS”.
為了更好地說明我的步驟，我在兩個月的自我隔離之后付出了巨大的努力，創建了免費的Udemy課程，以回饋給設計社區“從設計到代碼：將電子郵件設計轉換為HTML和CSS”。
If you liked this article, here are some other articles you may enjoy.
如果您喜歡本文，則可能會喜歡其他一些文章。
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
總結
- 上一篇： 前端学习（3014）：vue+eleme
- 下一篇： 普林斯顿微积分读本06第五章--连续性