1. EDM設計原則
EDM/Newsletter可將最新的活動訊息或欲發佈的消息，以網頁設計的設計內容，透過email寄送給指定對象。
但因為必須同時考慮各種郵件軟體(如outlook)、及各家線上郵件平台(如Google Gmail, Yahoo! Mail)的呈現, 加上郵件平台及軟體對css 的支援性較差、會強制剝除某些css設定，因此需考慮以下設計原則：
1.只需單一html檔案。
2.將css直接寫入html。
JavaScript、iFrame、Flash 等語言，大部分都是不支援的。
3.圖片使用絕對路徑。圖片需要上傳至網路空間，再將圖片網址貼上。
4.一般的情況下，建議使用單欄設計。
2. HTML與CSS寫在同一個檔案裡
1. 範例：
http://mepopedia.com/~jinjin/webclass/edm-3.html
1. 將css寫在head裡
<![CDATA[
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>[2018年全國校際設計行銷創意競賽活動]</title>
<style type="“text/css”">
此部分寫css語法
</style>
]]>
<![CDATA[<style type="text/css">
body {background: #ffffff; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; line-height:150%; color:#444; margin:0; padding:0;}
p,li {margin-bottom:14px; margin-top:0; font-family:"微軟正黑體","Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; color:#999999; line-height:150%;}
td, div {font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px; }
a {color:#013275; text-decoration: none; font-weight: bold;}
a:hover{color: #3695B0;}
h1 {margin-top:15px; padding:0; color:#D70000; font-size:25px; font-weight:bolder; line-height:34px; font-family:"微軟正黑體", Arial, sans-serif;}
h2 {margin-top:0; color:#D70000; font-size:18px; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:normal;}
h3 {margin:0; font-family:"微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;}
</style>]]>
2. css inline
由於部分 email clients 會無視電子郵件中的 head 和 style 標籤，因此如果你在測試時發現內容設定不符合預期，或是有跑版的情況，可以試著將 css inline。
Inline 小工具
html
<![CDATA[
<h1>三、競賽辦法</h1>]]>
css
<![CDATA[
h1 {
margin-top:15px;
padding:0;
color:#D70000;
font-size:25px;
font-weight:bolder;
line-height:34px;
font-family:"微軟正黑體","Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
}]]>
合併
<![CDATA[<h1 style="“color:#D70000;" font-family: neue arial sans-serif font-size:25px font-weight:400 line-height:34px margin-top:15px padding:0>三、競賽辦法</h1>]]>
1. 範例：
http://mepopedia.com/~jinjin/webclass/edm1.html
以表格作為框架
2. css inline範例：
<![CDATA[<tr>
<td align="center" valign="middle" style="“font-family:微軟正黑體;" color: font-size:24px> <i>第十二屆威尼斯拉古納藝術獎</i></td>
</tr>]]>
3. 圖片絕對路徑：
先將圖片上傳至網路空間。
如上傳至hw02資料夾後，貼上圖片絕對路徑。
如：
http://mepopedia.com/~web106-2b/hw02/hw02-105/img/001.jpg
<![CDATA[<tr>
<td align="center" valign="middle" style="padding-top:15px;"><img style="display:block;;height:auto;;position:inherit !important;" indx="16414602" rank="139" irank="738587089" atitle="[講義] EDM/Newsletter製作" alt="" data-src="//www.cute.edu.tw/dvcd/master/img/mainpic.jpg" data-srcset="" class="rs-article-img-src do-lazy"></td>
</tr>
<tr>
<td align="center" valign="middle" style="padding-bottom:15px; padding-top:15px;"><img style=";height:auto;;position:inherit !important;" indx="16414602" rank="139" irank="766647948" atitle="[講義] EDM/Newsletter製作" alt="" data-src="//www.cute.edu.tw/dvcd/master/img/divider.gif" data-srcset="" class="rs-article-img-src do-lazy"></td>
</tr>]]>
3. EDM/Newsletter免費版型
可從免費版型中挑選適合的版型修改。
1.Free newsletter templates
http://templates.cakemail.com
2.Free Newsletter Templates
https://www.templatesbox.com/newsletters/index.htm
4. 課堂範例
(1)
http://mepopedia.com/~jinjin/webclass/edm1.html
(2)
http://mepopedia.com/~jinjin/webclass/edm2.html
(3)
http://mepopedia.com/~jinjin/webclass/edm-3.html