Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
商業往來中,郵件的使用是非常頻繁的,郵件也是比較正式的通訊方式;建立不同類型的郵箱模板,可以顯著的提高工作效率,根據不同的業務和不同的客戶類型建立對應的模板,快速又有效。
不過如何快速創建郵件模板呢?如果擁有web相關的技術,可以通過 CSS 和 HTML5 等來創建一個H5的郵件模板,但對于小型企業來說,可能不會選擇花時間去做H5的模板,并且日后的修改和添加新式樣也比較麻煩。
在 Zoho Mail 中,可以直接編輯插入的模板,就像編輯新郵件一樣編輯模板內容,可以根據自己的業務需要編輯好郵件的格式和共同的信息,背景圖和文字式樣等,并且也同時支持插入H5的代碼,來設置樣式,多種方式來定制模板;
操作入口: 新建郵件——選項(發送按鈕右側的三個點)——插入模板
如果覺得不錯不要忘記“點贊”!
著智能手機和平板設備的流行,在電腦屏幕上看來正常的電子郵件在手機等移動設備上查閱卻凌亂不已。根據一項調查,有91%的用戶會在移動設備上查閱郵件。電子郵件通訊設計模板亟待優化。
接下來,你可能會用div或CSS編寫HTML代碼改良郵件模板,但Outlook或雅虎郵箱卻另辟蹊徑。
由于HTML5和CSS3在郵件設計方面有所局限,設計響應式郵件模板的最佳方式是使用傳統方式打造郵件布局——利用表格、內部插入CSS、inline CSS和媒體查詢。
是否所有郵件客戶端都支持媒體查詢?
雖然大部分郵件客戶端都支持媒體查詢,但仍有Gmail Android APP在這方面有所局限。不過設計師們仍然可以增加表格和HTML元素的百分率,在不同的視窗上創建流暢的體驗布局。
接下來,我們將一步步解析如何應用現有信息,使用表格、inline CSS和內部插入CSS等方式,在媒體查詢技術的輔助下,創建響應式郵件模板。
我們需要的有:
Raleway以及Lato谷歌字體
切片圖像和icon
HTML和CSS知識
媒體查詢相關知識
終端輸出
現代化的扁平設計
從何入手
開始之前,我們需要在標題欄內放入內容。首先,我們要增加一個XHTML文檔,緊接著加上html標簽,創建類型為xmlns。剩下的是元信息和標題標簽。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no"/>
? <title>KATAUSTRIA - Email Template</title>
</head>
Markup
至于markup,我們需要利用表格重新開始,在表格中增加屬性。
<body yahoo="fix">
? ? <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- START HEADER/BANNER -->
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? </td>
? ? ? ? </tr>
<!-- END HEADER/BANNER -->
<!-- START 3 BOX SHOWCASE -->
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? </td>
? ? ? ? </tr>
<!-- END 3 BOX SHOWCASE -->
<!-- START AWESOME TITLE -->
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? </td>
? ? ? ? </tr>
<!-- END AWESOME TITLE -->
<!-- START WHAT WE DO -->
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? </td>
? ? ? ? </tr>
<!-- END WHAT WE DO -->
<!-- START READY FOR NEW PROJECT -->
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? </td>
? ? ? ? </tr>
<!-- END READY FOR NEW PROJECT -->
<!-- START PRICING TABLE -->
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? </td>
? ? ? ? </tr>
<!-- END PRICING TABLE -->
<!-- START FOOTER -->
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? </td>
? ? ? ? </tr>
<!-- END FOOTER -->
? ? </table>
</body>
</html>
橫幅和3Box Showcase區
設計這兩個部分時,我們稍后在CSS中會將每個部分用col-600 class包裹。我們將在設計中增加一個帶有logo和文字的橫幅。至于3Box Showcase,我們將用到col3,將寬度設為183。需要注意,在高度這里我們使用的是<td>標簽預留空間。
<!-- START HEADER/BANNER -->
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" valign="top" background="images/header-background.jpg" bgcolor="#66809b" style="background-size:cover; background-position:top;height="400"">
? ? ? ? ? ? <table class="col-600" width="600" height="400" border="0" align="center" cellpadding="0" cellspacing="0">
? ? ? ? <tr>
? ? ? ? ? ? <td height="40"></td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" style="line-height: 0px;"><img style="display:block; line-height:0px; font-size:0px; border:0px;" src="images/logo.png" width="109" height="103" alt="logo" />
? ? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:24px; font-weight: bold; letter-spacing: 7px;">EMAIL <span style="font-family: 'Raleway', sans-serif; font-size:37px; color:#ffffff; line-height:39px; font-weight: 300; letter-spacing: 7px;">TEMPLATE</span>
? ? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" style="font-family: 'Lato', sans-serif; font-size:15px; color:#ffffff; line-height:24px; font-weight: 300;">A creative email template for your email campaigns, promotions <br/>and products across different email platforms.
? ? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td height="50"></td>
? ? ? ? </tr>
? ? ? ? ? ? </table>
? ? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? ? ? ? </table>
? ? ? ? ? ? </td>
? ? ? ? </tr>
<!-- END HEADER/BANNER -->
吸睛標題和實際服務部分
設計這兩個部分時,我們仍然使用class col-600,不過對于每個部分的內部元素,我們將采用完全不同的class。對于標題部分的第一個icon元素,我們要用到col1和col3_one設計文字。我們稍后會在媒體查詢中調整字體大小。
在實際服務部分,我們會使用col2設計每一欄。在這里需要注意,我使用了一個inline CSS為我們的設計元素增加某些格調。
<!-- START WHAT WE DO -->
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-left:20px; margin-right:20px;">
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? <table class="col-600" width="600" border="0" align="center" cellpadding="0" cellspacing="0" style=" border-left: 1px solid #dbd9d9; border-right: 1px solid #dbd9d9;">
? ? ? ? <tr>
? ? ? ? ? ? <td height="50"></td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td align="right">
? ? ? ? ? ? <table class="col2" width="287" border="0" align="right" cellpadding="0" cellspacing="0">
? ? ? ? <tr>
? ? ? ? ? ? <td align="center" style="line-height:0px;">
? ? ? ? ? ? <img style="display:block; line-height:0px; font-size:0px; border:0px;" class="images_style" src="images/icon-responsive.png" width="169" height="138" />
? ? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? ? ? ? </table>
? ? ? ? ? ? <table width="287" border="0" align="left" cellpadding="0" cellspacing="0" class="col2" style="">
? ? ? ? <tr>
? ? ? ? ? ? <td align="center">
? ? ? ? ? ? <table class="insider" width="237" border="0" align="center" cellpadding="0" cellspacing="0">
? ? ? ? <tr align="left">
? ? ? ? ? ? <td style="font-family: 'Raleway', sans-serif; font-size:23px; color:#2a3b4c; line-height:30px; font-weight: bold;">What we do?</td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td height="5"></td>
? ? ? ? </tr>
? ? ? ? <tr>
? ? ? ? ? ? <td style="font-family: 'Lato', sans-serif; font-size:14px; color:#7f8c8d; line-height:24px; font-weight: 300;">We create responsive websites with modern designs and features for small businesses and organizations that are professionally developed and SEO optimized.
? ? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? ? ? ? </table>
? ? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? ? ? ? </table>
? ? ? ? ? ? </td>
? ? ? ? </tr>
? ? ? ? ? ? </table>
? ? ? ? ? ? </td>
? ? ? ? </tr>
<!-- END WHAT WE DO -->
CSS
現在,所有需要用到的部分都設計好了,接下來我們需要在標題欄部分增加一些模式。首先為markup增加整體風格。插圖谷歌網頁字體,其余部分將包含我們為郵件主題、html、表格等等設計的模式。
關于網頁字體的小提示:根據Campaign Monitor,郵件客戶端對網頁字體的支持有限,這以為著不是所有客戶端都支持網頁字體。
@import "http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css";
html,body {
? ? background-color:#fff;
? ? margin:0;
? ? padding:0
}
html {
? ? width:100%
}
body {
? ? margin:0;
? ? padding:0;
? ? -webkit-text-size-adjust:none;
? ? -ms-text-size-adjust:none
}
table {
? ? border-spacing:0;
? ? border-collapse:collapse
}
table td {
? ? border-collapse:collapse
}
table tr {
? ? border-collapse:collapse
}
img {
? ? display:block!important
}
br,strong br,b br,em br,i br {
? ? line-height:100%
}
a {
? ? text-decoration:none
}
.button a {
? ? font-size:14px;
? ? font-family:'Lato',sans-serif;
? ? color:#fff;
? ? font-weight:300;
? ? background:transparent
}
接下來,讓我們為特別的郵件客戶群增加獨特風格。這能讓每一種不同的群體都有不同的風格。
/* OUTLOOK CLASS*/
.ExternalClass {
? ? background-color:#fff;
? ? width:100%
}
.ExternalClass,.ExternalClass font,.ExternalClass td,.ExternalClass p,.ExternalClass span,.ExternalClass div {
? ? line-height:100%
}
.ReadMsgBody {
? ? width:100%;
? ? background-color:#fff
}
/* YAHOO MAIL CLASS */
.yshortcuts,.yshortcuts a,.yshortcuts a:link,.yshortcuts a:visited,.yshortcuts a:hover,.yshortcuts a span {
? ? border-bottom:none!important
}
/* MAILCHIMP CLASS */
.default-edit-image {
? ? height:20px
}
媒體查詢
到了媒體查詢設計的步驟,我們需要在640px視窗中使用百分率增加并調整每個部分和元素的尺寸。
@media only screen and (max-width: 640px) {
body {
? ? width:auto!important
}
table[class="col1"] {
? ? width:29%;
}
table[class="col2"] {
? ? width:47%;
? ? text-align:left
}
table[class="col3_one"] {
? ? width:64%;
? ? text-align:left;
}
table[class="col3"] {
? ? width:100%;
? ? text-align:center;
}
table[class="col-600"] {
? ? width:450px
}
table[class="insider"] {
? ? width:90%
}
img[class="images_style"] {
? ? width:60%;
? ? height:auto
}
.margin{
margin-left: 25px;
margin-right: 25px;
}
}
在最后的CSS環節,我們將開始為480px視窗增加媒體查詢。我們設計的大部分獨立元素和部分將被設置為100%。
@media only screen and (max-width: 480px) {
body {
? ? width:auto!important
}
table[class="col1"] {
? ? width:100%;
}
table[class="col2"] {
? ? width:100%;
? ? text-align:left
}
table[class="col3"] {
? ? width:100%;
? ? text-align:center
}
table[class="col3_one"] {
? ? width:80%;
? ? text-align:center;
? ? margin: 0 20px 0 0;
}
table[class="col-600"] {
? ? width:290px
}
table[class="insider"] {
? ? width:82%!important
}
img[class="images-style"] {
? ? width:60%
}
.button { width: 40%; display: block; }
a.read-more { text-align: center; display: block;}
}
總結
通過以上步驟,各位就能成功設計響應式郵件模板了。不難看出,我們所有的整體風格都使用了inlineCSS。(來源:視覺中國)
切圖網(qietu.com)提供優質的psd轉郵件模板制作,并且開發了一款免費、開源的郵件模板css框架——快郵,可以快速搭建一個響應式郵件。
計網站時,關于我們頁面和聯系頁面(contact us page)往往是必要頁面之一。雖然只是一個簡單的頁面,但要真的能讓用戶有聯系你的沖動還是很有挑戰性。如果說,用戶點擊了聯系頁面,用戶其實已經在嘗試聯系你了,這個時候,你需要提供的,不是花哨的設計,而是直觀的聯系方式,不阻礙用戶嘗試聯系你的行為。但話又說回來,如果你有信心設計得美觀,新穎,自然是最好,而且簡潔也不意味著簡單。今天我和大家分享12個聯系我們表單和頁面設計模板和例子,如果你喜歡,可以用在你的網頁設計里哦。
特色:
該模板是一個響應式的聯系表單模板,它具有不錯的布局,可以自適應任何大小的屏幕。憑借其簡單的白色界面,您可以收集客戶信息,包含姓名,電子郵件,聯系電話,網站和消息等。
使用模板:
https://www.jotform.com/form-templates/responsive-layout-general-inquiry-contact-form
特色:
該模板是一個基于CSS3和HTML5的簡易聯系表格,可以在任何不同行業的網站上使用。 該聯系表單包含有Google地圖背景,可以準確地展示你公司在地圖上的位置。此外,該模板還帶有常用的表單字段和標題,其圖片精致,文字簡練,可以鼓勵訪客與你取得聯系,也有助你收集用戶信息,包括姓名,電子郵件,消息字段等。
使用模板:https://colorlib.com/wp/template/contact-form-v15/
特色:
該模板是一個簡易的免費HTML5聯系表單模板。它有一個自定義風格的按鈕,采用了純色配色方案,響應式設計使其在任何網頁和移動屏幕上可以完美顯示。該模板發表于2018年5月,采用了最新設計趨勢,為你提供一個非常不錯的收集用戶信息的解決方案。
使用模板:https://colorlib.com/wp/template/contact-form-v10/
特色:
該模板是一個動態的聯系表格,有非常不錯的交互設計,絕對是一個可以讓訪客為之驚嘆的聯系頁面設計。該模板是一個整頁的聯系表單,擴展了JavaScript和CSS3,它非常適合兒童類網站,或是動畫效果突出的網站。
使用模板:https://codepen.io/anon/pen/OMMOaO/
特色:
該模板是一個關于我們頁面模板的響應式引導程序,它包含關于我們網頁所需的所有元素。此模板主要有3個部分:團隊介紹,聯系我們表單和客戶介紹。如果你需要一個包含干凈聯系表單的完整的關于我們頁面設計,那么此模板是你的最佳選擇。該頁面包含的聯系表單很簡單,有一個大文本框,可以了解用戶的想法。
使用模板:https://mobirise.com/bootstrap-template/about-us-page-template/
特色:
Bootstrap 3聯系表單是一個完全響應的網站聯系頁面。這個模板與常見的普通聯表單設計完全不同,具有夢幻般的全屏圖像背景。該模板還有優秀的配色方案,在深色背景和白色表單之間創建出強烈的對比,刺激用戶反饋。它還有一個大的文本框,可以接收用戶想要表達的任何信息。
使用模板:http://reusableforms.com/d/e2/bootstrap-3-contact-form
特色:
聯系表格HTML / CSS模板是另一個出自reusableforms.com網站的聯系我們頁面模板設計之一。最大的一個亮點是大圖背景,十分美觀,具有很強的吸引力。該模板的動畫設計也很出彩,能與用戶進行有效的互動,用戶使用起來,不僅有趣,也很受用。
使用模板:http://reusableforms.com/d/o3/contact-form-css-template
設計:
HTML5聯系表單簡單而美觀,具有很棒的交互動態功能。此表單使用CSS3和HTML5創建??梢暂p松自定義設計以及在任何屏幕上自適應。你只需復制并粘貼HTML和CSS代碼即可將該模板添加到你的網站中。該HTML5表單包含所有必填字段,例如姓名,電子郵件,電話和消息等。最后,配色方案也值得一提,明亮鮮艷,很具有吸引力。
使用模板:https://codepen.io/codeconvey/pen/rgiLB/
4個最佳免費響應式HTML5聯系表格和聯系我們頁面例子
9. Choice Screening
Choice Screening的“聯系我們”頁面很出彩,你也許第一眼就會被他們的大標題吸引。該網站所有的頁面都組織有序,聯系我們頁面還包含有聯系信息,提供了每個不同部門的電子郵件,再后是一個聯系表單。對于大多數企業來說,表單顯得有點冗長,但對于需要運行各種背景調查的企業而言,表單字段可能是幫助他們查詢信息的必要條件。
查看例子:https://www.choicescreening.com/contact-choice-screening
伴隨移動端設備使用的不斷增加,Google也在其搜索引擎結果頁面上大力支持適合在移動設備瀏覽的網站,網頁設計的自適應要求越來越高。該模板就是在這種設計趨勢下專門制作的,具有非常細致美觀的自適應力,任何屏幕的尺寸都可以完美展示。該模板有一個簡化導航設計,大型CTA按鈕通過拇指可以輕松點擊,大型表單字段可以用于收集用戶反饋。
查看例子:http://www.weifieldcontracting.com/contact/
Mockpplus是國內最好的原型工具提供者,網站設計簡潔沉靜,聯系我們頁面和一般的頁面設計不太一樣,沒有使用表單,而是根據用戶可能的不同需求提供了更加直觀的聯系方式。Mockplus在聯系我們頁面特意加入了Slack鏈接,方便用戶找到Mockplus專屬社群,為用戶提供了一種及時交流的方式,很是用心。
查看例子:https://www.mockplus.com/support
該網站的聯系我們頁面可以說是我最喜歡的設計之一。它的配色和設計感都非常獨特,最大的亮點是Say Hello大文本標題,這個行動召喚按鈕非常能夠調動用戶的情緒,刺激用戶產生互動。
查看例子:http://www.helloinnovation.com/contact/
以上就是本次推薦的12個聯系我們表單和頁面設計??偟膩碇v,聯系我們頁面就只有一個最大的用途——刺激用戶產生聯系互動。因此,聯系我們頁面的設計應該是簡潔的,聯系方式多樣的,最好能提供不同業務的不同聯系方式,以便用戶能快速的找到自己需要的聯系方式。希望你喜歡今天的分享。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。