2014年6月19日 星期四

行動時代的電子報行銷

凌晨12:21 Posted by Envisioning U-Commerce Lab

在Campaign Monitor上有個「Handy email marketing field guides」系列文章,一定要仔細拜讀!

  • Responsive Email Design (喔喔,興大的研發處電子報沒有符合這樣的設計喔,而且更何況創產學院計中、總務處、人事室、體育室的電子報都還是郵件附加PDF檔的方式呢!),也看看這兩篇:實戰教學:如何讓手機使用者不再秒殺你的電子報()()。而要製作Responsive HTML Email的工具,像是VerticalResponse(Overview),或本來蠻推薦的Campaign Monitor影片示範的做法(不必登入帳號就能Launch the builder並在最後先寄給自己就能利用之Download as HTML & CSS,這個做法比很多Free Mail Template要方便多了)。但是,現在更推薦BeeFree 免費、免註冊、零技巧製作精美排版電子報是不必登入帳號就能編輯電子報,最後再用Send test寄給自己就能利用之另外,還有一種HTML Email平台是提供HTML編輯器模式,讓我們可以貼上HTML語法,並測試寄出HTML郵件。至於寄出的是我們自己設計的HTML郵件,是否能在收件時有正確的呈現效果,還有蠻大的變數,畢竟很多郵件平台或軟體不接受<head>與<style>語法而無法正確呈現HTML郵件樣貌,MailChimp有提供一個CSS inliner Tool可協助調整CSS語法,或許也可以一試。




至於對電子報行銷面應有的認知,請參考下列文章:



 




下列是測試BeeFree的電子報製作與寄發的結果,注意寄到學校信箱與Gmail信箱的一些差異問題.....


1. 編輯好的電子報內容,直接以 Send test 寄送到自己的信箱看看。(若不小心關掉瀏覽器,但電子報內容尚未寄出、也未備份存檔,記得再開啟瀏覽器時直接在網址列鍵入beefree.io/editor,就能再繼續編輯尚未完成的電子報內容。)




2. 當然,接下來就是測試再轉寄的結果,發現從Gmail轉寄到學校信箱,再從Outlook收信開啟觀看就整個版面背景崩壞了.....


從Outlook將信轉寄到Gmail也沒好到哪裡,一樣是版面位置跑掉了.....



3. 最後,發現只有直接用學校信箱電腦版Webmail來做轉寄,不管是轉寄到Gmail,或轉寄到學校信箱再從Outlook收信開啟觀看,都能看到完整的呈現.....


(只是手機版Gmail看到的沒有RWD了)


(學校信箱手機版Webmail正確呈現RWD)



4. 最後結論就是,將BeeFree製作好的電子報寄給自己的學校信箱,再用學校信箱電腦版Webmail來做轉寄,先刪除標題會出現的"Fw:"及信件內容的前幾行轉寄訊息(紅框),再刪除結尾的BeeFree的聲明文字(紅框),然後將其 "另存新範本"(藍框)。





日後,在學校信箱電腦版Webmail要寄發此範本,就只要在寫信時套用該範本再寄出即可。







2019.4.20更新~~~
不同的電子郵件軟體或平台對於Email Client CSS SupportCSS Support Guide for Email Clients各有不同,而且畢竟還是有不少人在使用Outlook收發郵件,所以最好是找Outlook Email Templates,基於這樣的需求而Stripo.email應該算是更佳的解決方案了。
更進一步,將Stripo.email製作完成的郵件內容Export存成HTML檔之後,我們可以將其原始碼置入Google Apps Script引用,就可以將自己的Google雲端硬碟當作電子報發送伺服器喔,這裡有個簡單的例子「國立中興大學訪客/貴賓車輛進出須知信件寄送」,建立副本之後就能以Spreadsheet上的自訂選單執行信件寄送(程式部分會在課堂上解說設計重點)